/* One continuous underwater landscape, from sunlit water to the deep garden. */
:root {
  --deep: #031321;
  --ink: #e0eff1;
  --white: #eaf4f2;
  --mint: #8fddd4;
  --gold: #e0c48a;
  --blue: #8ccbeb;
  --text-primary: #eaf4f2;
  --text-secondary: #b8cfd7;
  --muted: #91afbb;
  --line: rgba(147,206,222,.2);
  --hexagon: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
body { background: #031321; }
.ocean-environment { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; background: radial-gradient(ellipse at 65% -20%, #317f94 0, #0c3a51 35%, #041625 78%); }
.ocean-environment canvas { position: absolute; inset: 0; }
.ocean-light { position: absolute; inset: 0; background: linear-gradient(112deg, transparent 15%, #89e6f10b 26%, transparent 31%, #b4f4f208 34%, transparent 41%); }
main { position: relative; z-index: 1; }
.site-header { background: linear-gradient(#062b4070, transparent); }
.brand-mark { font-size: 40px; }
.brand-slash { color: #88b6c5; }
.brand-note { color: var(--muted); }
a:focus-visible,button:focus-visible,summary:focus-visible { outline-color: #9ae9df; }
.hero { background: linear-gradient(90deg, #06233575, transparent 75%); }
.hero-grid { background: none; }
.hero-hexagon { position: absolute; width: 650px; height: auto; aspect-ratio: .8660254038; right: -1%; top: 17%; background: #8dc8d40d; clip-path: var(--hexagon); transform: rotate(12deg); }
.hero-hexagon::after { content: ''; position: absolute; inset: 0; transform: scale(.99); clip-path: var(--hexagon); background: #082c4080; }
.hero .eyebrow { color: #addbdc; }
.hero-description { color: var(--text-secondary); }
.hero-identity { color: var(--muted); }
.hero h1 { text-shadow: 0 2px 30px #03253b50; }
.pill-link,.intro-evidence>a.pill-link { border-radius: 0; border: 0; background: #9de4e41c; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); padding: 18px 30px; }
.pill-link:hover,.intro-evidence>a.pill-link:hover { background: #9de4e439; }
.hero-people { right: 2%; bottom: 120px; width: 55%; }
.portrait { width: 56%; }
.portrait::before { display: none; }
.portrait-frame { position: relative; aspect-ratio: .8660254038; clip-path: var(--hexagon); background: linear-gradient(145deg, #b3e9e89c, #326a8266 47%, #88bdd187); padding: 0; }
.portrait-frame::before { content: ''; position: absolute; inset: 0; transform: scale(.99); clip-path: var(--hexagon); background: linear-gradient(150deg, #2b6579, #12374e 60%, #0b2339); }
.portrait img { width: 100%; height: 100%; object-fit: contain; clip-path: var(--hexagon); filter: saturate(.85); }
.portrait-mako { transform: translateY(-32px); }
.portrait-tefu { margin-left: -9%; transform: translateY(40px); }
.portrait-index { top: auto; bottom: -56px; right: 0; left: 0; text-align: center; color: #9bc5d2; font-size: 8px; }
.person-label { margin-top: 17px; }
.person-label strong { font-size: 16px; }
.person-label>span { color: var(--text-secondary); }
.person-label small { color: var(--muted); }
.hero-bottom { color: #acd2d8; }
.scroll-line { background: #8dcdd6; }
.motion-toggle { border: 0; color: #c4e2e6; background: #052b4080; cursor: pointer; padding: 10px 14px; }
.motion-toggle:hover { background: #1d546b; }
.intro-strip { background: linear-gradient(180deg, transparent, #03182740); }
.intro-copy>p:last-child { color: var(--text-secondary); }
.intro-evidence strong { color: var(--text-primary); }
.intro-evidence small,.intro-evidence-title { color: var(--muted); }
.exploration { background: linear-gradient(180deg, #03182740, #02142290); }
.stage-top { color: #a7c8d5; }
.stage-top>span:last-child { color: #8fccc9; }
.stage-bottom { border-color: #77b5c738; }
.stage-progress i { background: #2e5666; }
.chapter>p:not(.eyebrow) { color: var(--text-secondary); }
.text-link { border-color: #6bafc266; }
.aside-character img { border-radius: 0; clip-path: var(--hexagon); background: #28546b; width: 82px; height: calc(82px / .8660254038); object-fit: contain; }
.aside-character p { color: var(--text-secondary); }
.aside-character p span { color: var(--muted); }
.light-section { background: #051a2bea; color: var(--white); }
.works-section { background: linear-gradient(#041625bf, #071f30f0); }
.section-heading .eyebrow { color: #8fc4cf; }
.section-heading>p { color: var(--text-secondary); }
.work-art { border: 1px solid #9edbe321; clip-path: polygon(0 0, calc(100% - 23px) 0, 100% 23px, 100% 100%, 23px 100%, 0 calc(100% - 23px)); }
.rfc-art { background: #143e50; color: #b7dce1; }
.rfc-papers>span { background: #bcd8d6; color: #214851; box-shadow: 3px 10px 20px #00152540; }
.rfc-papers i { color: #54838b; }
.writing-art { background: #1b3947; color: #e0d2ac; }
.tls-art { background: #082a40; color: #a7d8e9; }
.fractal-card-art { background: radial-gradient(ellipse at 50% 80%, #21454d, #0b2435 75%); }
.fractal-card-art .art-kicker { background: transparent; color: #a6cbd0; }
.fractal-card-art .art-corner { color: #a6cbd0; }
.work-meta { color: var(--muted); }
.work-card p { color: var(--text-secondary); }
.serial-links,.serial-links>a { border-color: #7aabb638; }
.serial-links small { color: var(--muted); }
.serial-links em { color: var(--mint); }
.all-works-link { border-color: #7aabb638; }
.about-section { background: #051727ec; border-color: #7aabb638; }
.profile-image { clip-path: var(--hexagon); border-radius: 0; aspect-ratio: .8660254038; background: linear-gradient(145deg, #b3e9e880, #326a8266 47%, #88bdd180); }
.profile-image::before { content: ''; position: absolute; inset: 0; transform: scale(.98); clip-path: var(--hexagon); background: linear-gradient(140deg, #396678, #17374f); }
.profile-image > img { position: relative; }
.profile-image img { width: 100%; height: 100%; object-fit: contain; margin-top: 0; }
.profile-image.tefu-bg::before { background: linear-gradient(140deg, #53616a, #233b51); }
.profile-card .eyebrow { color: #8db6c3; }
.profile-card h3 small { color: var(--muted); }
.profile-card p:last-child,.biography { color: var(--text-secondary); }
.archive,.archive:last-child { border-color: #7aabb638; }
.archive-content { color: var(--text-secondary); }
.archive-content a { color: #9cd9e1; }
.archive-content td { border-color: #7aabb62a; }
.history-note { color: var(--muted); }
.contact-section { background: linear-gradient(#041321ee, #031321b0); }
.contact-links a { border-color: #7aabb638; }
.contact-links a span { color: var(--muted); }
.footer-bottom { border-color: #7aabb638; }
.footer-bottom>span,.footer-bottom>a:last-child { color: var(--muted); }
@media (max-width:1100px) and (min-width:761px) {
  .hero-people { width: 60%; bottom: 145px; }
}
@media (max-width:760px) {
  .hero { min-height: 1000px; padding-bottom: 520px; }
  .hero-people { width: 99%; right: .5%; bottom: 145px; height: 290px; }
  .portrait { width: 56%; }
  .portrait-mako { transform: translateY(-6px); }
  .portrait-tefu { transform: translateY(32px); }
  .portrait-index { bottom: -45px; font-size: 8px; }
  .person-label { margin-top: 12px; }
  .person-label strong { font-size: 13px; }
  .person-label>span { font-size: 10px; margin-top: 6px; }
  .hero-hexagon { width: 440px; height: auto; top: 40%; right: -15%; }
  .hero-bottom { flex-wrap: wrap; height: 87px; padding: 12px 0; gap: 10px; }
  .hero-bottom>span:first-child { width: 100%; }
  .motion-toggle { font-size: 8px; padding: 5px 8px; }
  .hero-bottom .mono { font-size: 7px; }
  .aside-character img { width: 70px; height: calc(70px / .8660254038); }
  .chapter { border-color: #7aabb638; }
}
@media (prefers-reduced-motion:reduce) {
  .portrait-mako,.portrait-tefu { transform: none; }
}
/* Keep role labels clear of the following section at every portrait size. */
.portrait-index { top: -17px; bottom: auto; }

/* Fade the bust into the water before the source image's lower edge. */
.portrait img,
.profile-image img,
.aside-character img {
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.45) 77%, transparent 91%);
  mask-image: linear-gradient(to bottom, #000 52%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.45) 77%, transparent 91%);
}

/* A single expression change on hover; touch devices keep the normal portrait. */
.profile-image { position: relative; }
.portrait-frame > .expression-hover,
.profile-image > .expression-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease-out;
}
@media (hover:hover) and (pointer:fine) {
  .portrait-frame:hover > .expression-hover,
  .profile-image:hover > .expression-hover { opacity: 1; }
}
@media (prefers-reduced-motion:reduce) {
  .portrait-frame > .expression-hover,
  .profile-image > .expression-hover { transition: none; }
}

/* The only fractal is the generated artwork in Selected Works. */
.fractal-card-art img { object-fit: contain; padding: 46px 35px 16px; mix-blend-mode: normal; opacity: 1; }
.ocean-light { background: linear-gradient(112deg, transparent 15%, #89e6f106 26%, transparent 31%, #b4f4f204 34%, transparent 41%); }

/* Regular hexagons use the tight bounding box: width / height = sqrt(3) / 2. */
.brand-mark { position: relative; display: inline-block; flex-shrink: 0; width: 23px; height: auto; aspect-ratio: .8660254038; font-size: 0; background: var(--mint); clip-path: var(--hexagon); }
.brand-mark::after { content: ''; position: absolute; inset: 0; transform: scale(.85); clip-path: var(--hexagon); background: #0b2939; }
/* Each work offers a small glimpse into its subject. Motion stays inside the panel. */
.work-card { --work-scroll: 0; --work-hover: 0; }
.work-card:hover .work-art { transform: none; }
.work-art { transition: border-color .35s, box-shadow .35s; }
.work-card:focus-visible { --work-hover: 1; }
@media (hover:hover) and (pointer:fine) {
  .work-card:hover { --work-hover: 1; }
}
.work-card:is(:hover,:focus-visible) .work-art { border-color: #a2dfe66b; box-shadow: inset 0 0 45px #92d7eb0b; }
.art-kicker,.art-corner,.tls-version { z-index: 2; }
.art-corner { transition: transform .5s; transform: translate(calc(var(--work-hover) * 3px),calc(var(--work-hover) * -3px)); }
.rfc-papers { transform: translateY(calc(var(--work-scroll) * 12px)) rotate(calc(-7deg + var(--work-hover) * 5deg)); transition: transform .65s cubic-bezier(.2,.65,.3,1); }
.rfc-papers>span { transition: transform .65s cubic-bezier(.2,.65,.3,1), box-shadow .65s; }
.rfc-papers>span:first-child { transform: translateX(calc(var(--work-hover) * -12px)) rotate(calc(var(--work-hover) * -6deg)); }
.rfc-papers>span:nth-child(2) { transform: translate(calc(var(--work-hover) * 12px),calc(13px - var(--work-hover) * 10px)) rotate(calc(12deg + var(--work-hover) * 3deg)); }
.editorial-title { transform: translateY(calc(var(--work-scroll) * 10px)); transition: transform .65s; }
.editorial-title>.editorial-line { display: block; font-size: inherit; transition: transform .65s, text-shadow .65s; }
.editorial-line:first-child { transform: translateX(calc(var(--work-hover) * -12px)); }
.editorial-line:last-child { transform: translateX(calc(var(--work-hover) * 12px)); text-shadow: calc(var(--work-hover) * -4px) calc(var(--work-hover) * 4px) #a3916125; }
.tls-visual { transform: translateY(calc(var(--work-scroll) * 9px)); transition: transform .65s; }
.tls-streams { flex: 1; min-width: 0; display: block; }
.tls-track { display: block; position: relative; width: 100%; height: 2px; background: #729bab66; margin: clamp(20px,2.4vw,32px) 0; }
.tls-track::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid #a4d6df; border-right: 1px solid #a4d6df; transform: rotate(45deg); }
.tls-track:nth-child(2) { transform: rotate(180deg); }
.tls-track::before { content: ''; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; background: #bbf0e9; box-shadow: 0 0 12px #a7e9ef99; animation: work-packet 2.4s linear infinite; animation-play-state: paused; }
.tls-track:nth-child(2)::before { animation-delay: -.8s; }
.tls-track:nth-child(3)::before { animation-delay: -1.6s; }
.work-card.work-visible .tls-track::before { animation-play-state: running; }
.work-card:is(:hover,:focus-visible) .tls-track::before { animation-duration: 1.5s; }
@keyframes work-packet { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
.fractal-card-art img { padding: 0; object-fit: cover; object-position: 50% 35%; }
.tree-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .25s ease-out; }
.tree-flow path { fill: none; stroke: #d7fff3; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1.5 100; filter: drop-shadow(0 0 3px #b5fff0); animation: tree-particle 2.9s linear infinite paused; }
.tree-flow path:nth-child(2) { animation-delay: -.7s; }
.tree-flow path:nth-child(3) { animation-delay: -1.5s; }
.tree-flow path:nth-child(4) { animation-delay: -1.1s; }
.tree-flow path:nth-child(5) { animation-delay: -2.1s; }
.tree-flow path:nth-child(6) { animation-delay: -2.5s; }
.work-card:focus-visible .tree-flow { opacity: 1; }
.work-card:focus-visible .tree-flow path { animation-play-state: running; }
@media (hover:hover) and (pointer:fine) {
  .work-card:hover .tree-flow { opacity: 1; }
  .work-card:hover .tree-flow path { animation-play-state: running; }
}
@keyframes tree-particle { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
.fractal-card-art::after { content: ''; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(#082231a6,transparent 30%,transparent 80%,#08223155); }
.fractal-card-art .art-kicker { background: transparent; }
[data-works-motion="paused"] .work-card { --work-scroll: 0 !important; --work-hover: 0 !important; }
[data-works-motion="paused"] .tls-track::before { animation-play-state: paused !important; }
[data-works-motion="paused"] .tree-flow { opacity: 0 !important; }
[data-works-motion="paused"] .tree-flow path { animation-play-state: paused !important; }
@media (prefers-reduced-motion:reduce) {
  .work-card { --work-scroll: 0 !important; --work-hover: 0 !important; }
  .tls-track::before { animation: none !important; left: 45%; }
  .tree-flow { opacity: 0 !important; }
  .tree-flow path { animation: none !important; }
}
@media (max-width:760px) {
  .fractal-card-art img { object-position: 50% 25%; }
}

/* The cryptographic ocean — an open, luminous field with an unlit core. */
.ocean-environment { background: radial-gradient(ellipse at 75% 48%, #0a4355, #020c18 72%); }
.ocean-light { background: linear-gradient(0deg, #020c1840, transparent 40%); }
.hero { min-height: 820px; height: 100svh; max-height: 1150px; padding: clamp(175px, 23vh, 270px) 6% 90px; background: linear-gradient(0deg, #020c18 0%, transparent 20%); }
.hero h1 { font-size: clamp(46px, 4.8vw, 76px); line-height: 1.42; letter-spacing: -.055em; font-weight: 500; text-shadow: 0 3px 35px #020c18; }
.hero h1 span { color: #b2efe5; }
.hero-description { font-size: 14px; line-height: 2.1; }
.hero-identity { margin-top: 20px; font-size: 11px; }
.hero .eyebrow { font-size: 9px; letter-spacing: .16em; }
.hero-people { width: 320px; height: auto; right: 6%; bottom: 105px; gap: 24px; align-items: end; }
.hero .portrait { width: 148px; transform: none; margin: 0; }
.hero .portrait-frame { background: #72c6cf30; }
.hero .portrait-frame::before { background: linear-gradient(145deg, #123c4b, #061928); }
.hero .portrait-index { font-size: 7px; color: #91b5be; }
.hero .person-label { margin-top: 7px; }
.hero .person-label strong { font-size: 13px; }
.hero .person-label>span { font-size: 9px; margin-top: 4px; }
.hero-art-space { display: none; }
.ocean-cartography { position: absolute; inset: 0; pointer-events: none; color: #9cd5dc; font: 9px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; }
.ocean-coordinate { position: absolute; right: 6%; top: 120px; color: #779eaf; font-size: 8px; }
.ocean-depth { position: absolute; left: 73.5%; top: 48%; transform: translate(-50%, -1.4em); white-space: nowrap; font-size: 7px; text-align: center; color: #6b9cab; line-height: 2.8; }
@media (min-width: 761px) and (max-width: 1100px) {
  .hero h1 { font-size: 48px; }
  .hero-people { width: 270px; gap: 18px; }
  .hero .portrait { width: 126px; }
}
@media (max-width: 760px) {
  .hero { min-height: 0; height: auto; max-height: none; padding: 132px 7% 0; }
  .hero h1 { font-size: clamp(34px, 8.4vw, 56px); line-height: 1.48; }
  .hero .eyebrow { font-size: 7px; letter-spacing: .09em; margin-bottom: 23px; }
  .hero-description { font-size: 12px; max-width: 320px; }
  .hero-description br { display: initial; }
  .hero-identity { font-size: 10px; margin-top: 16px; }
  .hero-art-space { display: block; height: clamp(280px, 80vw, 340px); margin-top: 36px; }
  .hero-people { position: relative; width: 218px; right: auto; bottom: auto; gap: 18px; margin: 28px 0 118px auto; }
  .hero .portrait { width: 100px; }
  .hero .person-label strong { font-size: 11px; }
  .hero .person-label>span { font-size: 8px; }
  .hero .person-label small { font-size: 8px; }
  .ocean-coordinate { top: 89px; right: 7%; font-size: 6px; line-height: 1.6; }
  .ocean-depth { left: 65%; top: 49%; font-size: 6px; }
}

/* Three biomes share one continuous, world-space trunk. */
.exploration { display: block; padding: 0; background: #030f1b; }
.evolution-heading { position: relative; padding: 115px 7% 95px; border-top: 1px solid #9edbe320; background: radial-gradient(ellipse at 75% 100%, #123b3738, transparent 65%); }
.evolution-heading h2 { margin-bottom: 22px; font-size: clamp(34px, 4.4vw, 64px); }
.evolution-heading>p:not(.eyebrow) { color: var(--text-secondary); font-size: 14px; }
.evolution-journey { position: relative; display: grid; }
.evolution-stage { --world-color: #8df0cf; position: sticky; top: 0; grid-area: 1 / 1; align-self: start; height: 100svh; min-height: 0; overflow: hidden; background: #030f1b; }
/* Shared grid placement keeps the sticky canvas inside the chapter bounds. */
.evolution-stage canvas { position: absolute; inset: 0; }
.evolution-hud { position: absolute; left: 6%; right: 6%; top: 30px; display: flex; justify-content: space-between; color: var(--world-color); font-size: 8px; letter-spacing: .15em; border-top: 1px solid #9edbe327; padding-top: 17px; pointer-events: none; }
.evolution-motion { position: absolute; right: 6%; bottom: 28px; z-index: 4; font-size: 9px; }
.evolution-fallback { position: absolute; left: 65%; top: 0; bottom: 0; width: 2px; background: linear-gradient(#8df0cf, #f1cf8c, #91cfff); box-shadow: 0 0 45px 8px #91cfff25; -webkit-mask-image: linear-gradient(transparent, #000 25%); mask-image: linear-gradient(transparent, #000 25%); }
.evolution-ready .evolution-fallback { display: none; }
.exploration-chapters { position: relative; grid-area: 1 / 1; min-width: 0; pointer-events: none; }
.exploration .chapter { position: relative; min-height: max(100svh, 700px); width: 35%; margin: 0 0 0 6%; padding: 115px 0; border: 0; }
.exploration .chapter a { pointer-events: auto; align-self: flex-start; }
.exploration .chapter h2 { font-size: clamp(30px, 3.1vw, 46px); }
.exploration .chapter>p:not(.eyebrow) { font-size: 13px; }
.exploration .chapter>p br { display: none; }
.exploration .chapter::before { display: none; }
.exploration .aside-character { margin-top: 35px; }
@media(max-width:760px) {
  .evolution-heading { padding: 75px 7% 65px; }
  .evolution-heading>p:not(.eyebrow) { font-size: 12px; }
  .evolution-heading h2 { font-size: 34px; }
  .evolution-hud { top: 18px; font-size: 6px; }
  .exploration .chapter { min-height: max(100svh, 900px); width: auto; margin: 0; padding: 78px 7% 0; justify-content: flex-start; }
  .exploration .chapter h2 { font-size: 29px; margin-bottom: 16px; }
  .exploration .chapter .eyebrow { margin-bottom: 15px; font-size: 9px; }
  .exploration .chapter>p:not(.eyebrow) { font-size: 12px; max-width: 350px; margin-bottom: 13px; }
  .exploration .chapter .aside-character, .exploration .chapter .chapter-foot { display: none; }
  .exploration .chapter .text-link { font-size: 11px; }
  .evolution-motion { bottom: 18px; font-size: 8px; }
  .evolution-fallback { left: 50%; opacity: .3; }
}

/* At the end of the descent, an open horizon. The sea itself stays still. */
.contact-section { position: relative; isolation: isolate; padding: 0; background: #031321; }
.contact-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 9%; padding: 100px 8% 25px; }
.contact-intro h2 { font-size: clamp(32px, 3.6vw, 54px); margin-bottom: 0; font-weight: 500; }
.contact-intro .eyebrow { font-size: 9px; letter-spacing: .16em; }
.contact-links { grid-template-columns: 1fr 1fr; gap: 0 28px; align-content: center; margin: 0; }
.contact-links a { font-size: 14px; flex-wrap: wrap; gap: 8px; padding: 21px 0; }
.contact-links a span { font-size: 9px; }
.horizon-art { height: clamp(320px, 34vw, 500px); position: relative; overflow: hidden; contain: paint; background: linear-gradient(#031321, #123b49 22%, #071e30 35%, #031321); }
.horizon-art::before { content: ''; position: absolute; top: 22%; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, #80c9ce18, #a8e3db80 58%, #80c9ce18); }
.horizon-art.horizon-ready::before { display: none; }
.horizon-art canvas { position: absolute; inset: 0; }
.horizon-lights { position: absolute; inset: 0; pointer-events: none; }
.horizon-lights i { --drift: 24px; position: absolute; width: 4px; height: 1px; border-radius: 50%; background: #bce9dc; box-shadow: 0 0 7px 1px #99e7d655; opacity: .6; animation: horizon-drift 17s ease-in-out infinite alternate paused; }
.horizon-lights i:nth-child(1) { left: 12%; top: 22.5%; animation-delay: -4s; }
.horizon-lights i:nth-child(2) { left: 33%; top: 24%; animation-delay: -11s; }
.horizon-lights i:nth-child(3) { left: 59%; top: 22%; animation-delay: -7s; }
.horizon-lights i:nth-child(4) { left: 83%; top: 25%; animation-delay: -2s; }
.horizon-lights i:nth-child(5) { left: 22%; top: 42%; width: 8px; --drift: -35px; animation-delay: -9s; }
.horizon-lights i:nth-child(6) { left: 68%; top: 53%; width: 10px; --drift: 42px; animation-delay: -14s; }
.horizon-lights i:nth-child(7) { left: 43%; top: 72%; width: 13px; --drift: -48px; animation-delay: -5s; }
.horizon-lights i:nth-child(8) { left: 90%; top: 35%; background: #e8d6a8; --drift: -20px; animation-delay: -12s; }
.horizon-art[data-motion="running"] .horizon-lights i { animation-play-state: running; }
@keyframes horizon-drift { from { transform: translateX(0); opacity: .25; } to { transform: translateX(var(--drift)); opacity: .85; } }
.horizon-caption { padding: 0 8% 35px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #809ea9; font-size: 10px; letter-spacing: .08em; }
.horizon-caption button { font-size: 9px; }
.contact-section .footer-bottom { margin: 0 8%; }
@media(max-width:760px) {
  .contact-intro { grid-template-columns: 1fr; gap: 32px; padding: 70px 8% 10px; }
  .contact-intro h2 { font-size: 32px; }
  .contact-links { gap: 0 24px; }
  .contact-links a { flex-direction: column; align-items: flex-start; font-size: 14px; padding: 16px 0; }
  .contact-links a span { align-self: flex-start; font-size: 8px; }
  .horizon-art { height: 330px; }
  .horizon-caption { align-items: flex-start; flex-direction: column; gap: 15px; padding-bottom: 28px; font-size: 9px; }
}
@media(prefers-reduced-motion:reduce) {
  .horizon-lights i { animation: none; }
}

/* Keep the hexagonal frame separate from the portrait's transparent fade. */
.note-portrait { display: block; width: 82px; flex-shrink: 0; background: linear-gradient(145deg, #b3e9e880, #326a8266 47%, #88bdd180); }
.note-portrait::before { transform: scale(.97); background: linear-gradient(145deg, #123c4b, #061928); }
.aside-character .note-portrait img { position: relative; width: 100%; height: 100%; background: transparent; }
@media(max-width:760px) {
  .note-portrait { width: 70px; }
}