@font-face {
  font-family: 'Belyga';
  src: url('/assets/Belyga-Regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* The viewport is the home; only the open page can scroll. */
html:has(.overlay-site), .overlay-site { width: 100%; height: 100%; overflow: hidden; }
.overlay-site {
  --page-inset: clamp(20px, 5vw, 80px);
  --panel-width: 880px;
  --panel-gutter: clamp(12px, 2.5vw, 40px);
  --content-inset: clamp(22px, 4vw, 56px);
  --reading-width: 760px;
  --page-text: clamp(16px, 1.25vw, 18px);
  --sans: 'DM Sans', sans-serif;
  --display: var(--mono);
  --orange: var(--ink);
  --mono: 'DM Mono', monospace;
  font-family: var(--sans);
}
.overlay-site .film-grain {
  position: fixed;
  inset: -50%;
  width: 400%;
  height: 400vh;
  z-index: 2;
  background: transparent url('/assets/noise.png') repeat 0 0;
  animation: noise 1000ms infinite;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: soft-light;
}
@keyframes noise {
  0%, 100% { background-position: 0 0; }
  10% { background-position: -5% -10%; }
  20% { background-position: -15% 5%; }
  30% { background-position: 7% -25%; }
  40% { background-position: 20% 25%; }
  50% { background-position: -25% 10%; }
  60% { background-position: 15% 5%; }
  70% { background-position: 0 15%; }
  80% { background-position: 25% 35%; }
  90% { background-position: -10% 10%; }
}
.overlay-site .analog-field { display: none; }
.home-screen { position: fixed; inset: 0; z-index: 3; transition: filter .55s ease, opacity .55s ease; }
.home-header { position: absolute; top: 30px; left: var(--page-inset); right: var(--page-inset); display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.home-name { font: 500 17px var(--mono); text-decoration: none; letter-spacing: 0; }
.home-name span { opacity: .5; }
.home-header .theme-toggle { position: static; display: block; opacity: 1; visibility: visible; border: 0; background: none; color: var(--ink); font: 11px var(--mono); min-height: 44px; cursor: pointer; }
.home-menu { position: absolute; left: 19%; top: 45%; transform: translateY(-50%); width: min(430px, 68vw); padding: 0; margin: 0; }
.home-links { display: grid; gap: 9px; }
.home-links a { display: flex; align-items: center; gap: 22px; width: fit-content; min-height: 58px; text-decoration: none; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.2; letter-spacing: 0; font-weight: 400; transition: translate .25s; }
.home-links a:hover { translate: 8px 0; }
.home-webring { position: absolute; left: 19%; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 24px; font: 400 22px/1.2 'Belyga', sans-serif; }
.home-webring a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.home-webring a:hover { text-decoration: underline; text-underline-offset: 5px; }
.home-webring a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 2px; }
.home-webring .webring-brand { gap: 12px; font-size: 16px; }
.webring-brand svg { display: block; width: 28px; height: auto; flex: 0 0 28px; }
@media (max-width: 720px) {
  .home-webring { left: 10%; right: 10%; gap: 16px; justify-content: space-between; font-size: 19px; }
  .home-webring .webring-brand { gap: 8px; font-size: 14px; }
}
@media (max-height: 640px) {
  .home-screen { overflow-y: auto; }
  .overlay-site .home-menu { top: 100px; transform: none; }
  .home-webring { top: 550px; bottom: auto; padding-bottom: 24px; }
}
.guestbook-menu-item { position: relative; width: max-content; }
.music-dock { position: absolute; left: 0; top: calc(100% + 18px); width: 380px; max-width: 80vw; }
.music-dock .spotify-player { display: block; width: 100%; max-width: 100%; height: 80px; margin: 0; border: 0; border-radius: 12px; }
body:has(.page-overlay[open]) .home-screen { filter: blur(8px); opacity: .25; }
.page-overlay { position: fixed; inset: max(16px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom)); width: min(var(--panel-width), calc(100% - 2 * var(--panel-gutter))); max-width: none; height: auto; max-height: none; margin: 0 auto; padding: 0; border: 1px solid color-mix(in srgb, var(--ink) 17%, transparent); border-radius: 3px; color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent); box-shadow: 0 20px 100px #00000012; overflow: hidden; }
.page-overlay[open] { display: flex; flex-direction: column; animation: page-appear .55s cubic-bezier(.2, .75, .25, 1); }
.page-overlay::backdrop { background: #22201720; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.overlay-bar { flex: 0 0 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--content-inset); border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font: 12px var(--mono); }
.overlay-close { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; text-decoration: none; }
.overlay-close span { font: 26px var(--sans); }
.overlay-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.overlay-content { padding: clamp(28px, 3.5vw, 48px) var(--content-inset) 72px; font-size: var(--page-text); overflow-wrap: anywhere; }
.overlay-content h1 { font: 400 clamp(34px, 4.8vw, 64px)/1.1 var(--sans); letter-spacing: 0; margin: 0 0 24px; }
.overlay-content h2 { font-size: clamp(25px, 2.3vw, 30px); letter-spacing: 0; }
.overlay-content p { line-height: 1.8; }
.overlay-content .page-intro, .overlay-content .post-page, .overlay-content .post-header, .overlay-content .section { display: block; width: 100%; max-width: none; min-height: 0; padding: 0; margin: 0 0 32px; border: 0; background: none; }
.overlay-content .post-header h1 { max-width: none; }
.overlay-content .post-page .post-content { width: min(100%, var(--reading-width)); max-width: none; margin: 32px auto 0; font-size: var(--page-text); }
.overlay-content .post-content img { max-width: 100%; height: auto; }
.overlay-content .post-list { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; margin: 0; }
.overlay-content .post-card { display: grid; grid-template-columns: minmax(0, 1fr) 34%; align-items: center; gap: 32px; min-height: 0; padding: 28px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; color: var(--ink); text-decoration: none; transform: none; }
.overlay-content .post-card::before, .overlay-content .post-card::after { display: none; }
.overlay-content .post-card-image { position: static; grid-column: 2; grid-row: 1; width: 100%; height: 220px; object-fit: cover; opacity: 1; filter: none; border-radius: 2px; }
.overlay-content .post-card .post-card-content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.overlay-content .post-card .post-card-title,
.overlay-content .post-card .post-card-excerpt,
.overlay-content .post-card .post-meta,
.overlay-content .post-card .text-link { color: var(--ink); }
.overlay-content .post-card-title { font-size: 25px; line-height: 1.2; }
.overlay-content .post-card-excerpt { font-size: clamp(14px, 1.15vw, 16px); }
/* Keep the label and its highlight inside image cards' clipped bounds. */
.overlay-site .overlay-content .post-card .text-link {
  justify-self: start;
  padding: 5px 8px;
  line-height: 1.4;
  transform: none;
  box-shadow: none;
  transition: background-color .25s ease, color .25s ease;
}
.overlay-site .overlay-content .post-card:focus-visible .text-link {
  background: var(--ink);
  color: var(--paper);
}
.overlay-content .post-meta, .overlay-content .eyebrow { font: 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.overlay-content .page-back { display: inline-block; margin: 0 0 24px; }
.overlay-content .post-spotify { position: static; width: min(100%, 360px); margin: 24px 0; }
.about-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.hero-index, .panel-number { display: none; }
.overlay-content .hero-copy { max-width: none; padding: 0; margin: 0; background: none; }
.overlay-content .about-photo { display: block; width: 100%; max-width: 280px; margin: 0; padding: 0; transform: none; }
.overlay-content .about-photo img { width: 100%; height: auto; display: block; border-radius: 2px; }
.overlay-content .about-photo figcaption { font: 10px/1.6 var(--mono); }
.kicker, .panel-label { font: 10px/1.5 var(--mono); letter-spacing: .08em; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.about-panel.statement { grid-column: 1 / -1; }
.about-panel ul { list-style: none; padding: 0; font-size: 14px; }
.about-panel li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.about-panel li span { margin-right: 15px; font: 10px var(--mono); }
.coordinates dl { font-size: 14px; }
.coordinates dl div { margin-bottom: 14px; }
.coordinates dt { font: 9px var(--mono); opacity: .65; }
.coordinates dd { margin: 5px 0; }
.contact-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 32px 0; padding: 24px 0; border-block: 1px solid var(--line); }
.contact-band a { font: 12px var(--mono); }
.overlay-content .project-grid { grid-template-columns: 1fr; }
.overlay-content .project-card { padding: clamp(20px, 2.3vw, 28px); min-height: 0; }
.overlay-content .project-card p { font-size: var(--page-text); }
.guestbook-page { max-width: var(--reading-width); margin: auto; }
.guestbook-page figure { margin: 28px 0; }
.guestbook-page img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 2px; }
.guestbook-sign { display: inline-block; padding: 12px 0; text-underline-offset: 6px; }
.guestbook-note { font-size: 12px; opacity: .7; }
.overlay-content .load-message { padding: 30px 0; }
.overlay-site :focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
@keyframes page-appear { from { opacity: 0; } to { opacity: 1; } }
/* Stack the portrait before the larger heading becomes cramped on tablets. */
@media (max-width: 760px) {
  .about-hero { grid-template-columns: 1fr; gap: 24px; }
}
@media(max-width: 600px) {
  .home-header { top: 16px; }
  .home-menu { left: 10%; width: 80%; top: 43%; }
  .home-links a { font-size: 46px; }
  .page-overlay { inset: max(12px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  .overlay-bar { flex-basis: 56px; padding: 0 20px; }
  .overlay-content { padding: 28px 22px 40px; }
  .about-grid { grid-template-columns: 1fr; gap: 20px; }
  .overlay-content .about-photo { max-width: 260px; }
  .overlay-content .post-card { gap: 16px; grid-template-columns: minmax(0, 1fr) 38%; align-items: start; }
  .overlay-content .post-card-image { width: 100%; height: 160px; }
  .overlay-content .post-card-title { font-size: 21px; }
}
/* Reduced-motion override temporarily disabled.
@media(prefers-reduced-motion: reduce) {
  .overlay-site .film-grain, .page-overlay[open] { animation: none; }
  .home-screen, .home-links a { transition: none; }
}
*/

.about-keepsake { margin: 40px 0 0; }
.about-keepsake img { width: 100%; max-height: 400px; object-fit: cover; }

/* Dim the home behind the open page. */
.overlay-veil { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .55s ease, visibility .55s; position: fixed; inset: 0; z-index: 4; background: #22201720; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
body:has(.page-overlay[open]) .overlay-veil { opacity: 1; visibility: visible; pointer-events: auto; }
.page-overlay { z-index: 10; }

/* Reduced-motion override temporarily disabled.
@media (prefers-reduced-motion: reduce) { .overlay-veil { transition: none; } }
*/

.overlay-content .about-contact { margin: 32px 0; font-size: 14px; }

/* Use the dark-mode palette for text selection and the email highlight. */
.overlay-site ::selection { background: var(--ink); color: var(--paper); }
.overlay-content .about-contact a { text-decoration-color: currentColor; }
.overlay-content .about-contact a:hover,
.overlay-content .about-contact a:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

/* Display lettering for titles; original fonts for reading and controls. */
.overlay-content h1,
.overlay-content h2,
.overlay-content h3,
.overlay-content h4,
.overlay-content h5,
.overlay-content h6,
.overlay-content .post-card-title { font-family: var(--display); font-weight: 400; }

/* Cool sky light reflected softly onto the warm wall, beneath the shadows. */
.sky-reflection {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* A broad, faint sky wash that gently recedes toward the bottom-right. */
  background: linear-gradient(135deg,
    rgba(173, 214, 246, .23) 0%,
    rgba(173, 214, 246, .19) 30%,
    rgba(173, 214, 246, .13) 60%,
    rgba(173, 214, 246, .07) 82%,
    rgba(173, 214, 246, .015) 100%);
  opacity: 0;
  transition: opacity .7s ease;
}
:root[data-theme='light'] .sky-reflection { opacity: 1; }
/* Reduced-motion override temporarily disabled.
@media (prefers-reduced-motion: reduce) { .sky-reflection { transition: none; } }
*/

/* Repository names use the regular reading font. */
.overlay-content .project-card h3 { font-family: var(--sans); font-weight: 600; }

/* Match the email link's charcoal highlight on the repository directory link. */
.overlay-content #projects .section-heading > .text-link {
  padding: 5px 8px;
  text-decoration-color: currentColor;
  transition: background-color .25s ease, color .25s ease;
}
.overlay-content #projects .section-heading > .text-link:hover,
.overlay-content #projects .section-heading > .text-link:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.overlay-content .post-card:not(.has-image) { grid-template-columns: minmax(0, 1fr); }

/* Spread warm reflected light from bottom-left to top-right in dark mode. */
:root[data-theme='dark'] .overlay-site .sunlit-field::before {
  background: linear-gradient(45deg,
    rgba(231, 121, 47, .23) 0%,
    rgba(231, 121, 47, .19) 30%,
    rgba(231, 121, 47, .13) 60%,
    rgba(231, 121, 47, .07) 82%,
    rgba(231, 121, 47, .015) 100%);
  opacity: 1;
  animation: none;
}
:root[data-theme='dark'] .overlay-site .sunlit-field::after { opacity: 0; }

/* Tile highlights invert the active palette, including keyboard focus. */
.overlay-site .overlay-content :is(.text-link, .page-back, .button, .project-card, .about-contact a):is(:hover, :focus-visible) {
  background: var(--ink);
  color: var(--paper);
}
.overlay-site .overlay-content .project-card:is(:hover, :focus-visible) :is(h3, p, .project-meta) {
  color: var(--paper);
}
.overlay-site :is(.portrait-caption-tooltip, .post-caption-tooltip) {
  background: var(--ink);
  color: var(--paper);
}

.home-links a { font-family: Belyga, sans-serif; font-weight: 400; }

/* Optional rainy weather keeps the controls and content above the atmosphere. */
.home-header .rain-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 11px var(--mono);
  cursor: pointer;
}
.rain-toggle::before {
  content: '';
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.rain-toggle[aria-pressed='true']::before { background: currentColor; }
.rain-toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
.rain-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
:root[data-weather='rain'] {
  --paper: #c9d3da;
  --ink: #344653;
  --muted: #526674;
  --line: #9cabb6;
  --lime: #b5c4cf;
  --name-accent: #365c78;
  --sunlit-shadow: #3b536a;
  --sunlit-blinds-opacity: .12;
}
:root[data-weather='rain'][data-theme='dark'] {
  --paper: #25333f;
  --ink: #d9e5ed;
  --muted: #b1c2cf;
  --line: #566d7d;
  --lime: #465e70;
  --name-accent: #b9d7ec;
  --sunlit-shadow: #08131e;
  --sunlit-blinds-opacity: .3;
}
:root[data-weather='rain'] .overlay-site .sunlit-field::before {
  background: radial-gradient(ellipse at 80% 0%, #a7c3d84d, transparent 75%);
  opacity: 1;
}
:root[data-weather='rain'] .overlay-site .sunlit-field::after,
:root[data-weather='rain'] .overlay-site :is(.sunlit-glow, .sunlit-bounce, .sky-reflection) { opacity: 0; }
.rain-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  display: none;
  color: inherit;
}
:root[data-weather='rain'] .rain-field { display: block; }
.rain-row {
  position: absolute;
  inset: 0 -32vh 0 0;
}
.rain-row--back { opacity: .65; }
.raindrop {
  position: absolute;
  bottom: calc(100% + var(--rain-start));
  left: var(--rain-x);
  width: 15px;
  height: 240px;
  animation: rainfall var(--rain-duration) var(--rain-delay) linear infinite;
}
.raindrop[hidden] { display: none; }
.rain-stem {
  display: block;
  width: 4px;
  height: 60%;
  margin-left: 7px;
  background: linear-gradient(to bottom, transparent, currentColor);
  transform: rotate(14deg);
  transform-origin: bottom;
  animation: rain-stem var(--rain-duration) var(--rain-delay) linear infinite;
}
@keyframes rainfall {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-25vh - 90px), calc(100vh + 360px), 0); }
}
@keyframes rain-stem {
  0%, 80% { opacity: .8; }
  100% { opacity: 0; }
}
.rain-lightning {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 78% 12%, #d9edff99, #b5d4f029 40%, transparent 75%);
}

/* Composite rain behind opaque blinds, then blur and fade the shared shadow once. */
.overlay-site .sunlit-shadows { z-index: 2; }
.overlay-site .sunlit-perspective { z-index: 3; }
:root[data-weather='rain'][data-theme='dark'] .rain-lightning {
  animation: rain-lightning 13s linear infinite;
}
/* Two distant, single flashes per cycle, several seconds apart. */
@keyframes rain-lightning {
  0%, 5%, 10%, 63%, 69%, 100% { opacity: 0; }
  5.6% { opacity: .65; }
  6.8% { opacity: .16; }
  63.6% { opacity: .45; }
  65% { opacity: .1; }
}
.rain-field.is-paused *, .rain-field.is-paused *::before { animation-play-state: paused !important; }
/* Droplet silhouettes inherit the shared background shadow color and blur. */
.rain-glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  pointer-events: none;
  color: inherit;
  overflow: hidden;
}
:root[data-weather='rain'] .rain-glass { display: block; }
.rain-glass svg { display: block; width: 100%; height: 100%; }
.glass-rivulet { animation: glass-cycle var(--glass-duration) var(--glass-delay) linear infinite; }
.glass-trail {
  stroke-dasharray: 1;
  animation: glass-trace var(--glass-duration) var(--glass-delay) linear infinite;
}
.glass-runner {
  offset-position: 0 0;
  offset-anchor: 0 0;
  offset-rotate: 0deg;
  animation: glass-run var(--glass-duration) var(--glass-delay) linear infinite;
}
/* The head and trail share timing: gather, creep, pause, then run. */
@keyframes glass-run {
  0%, 18% { offset-distance: 0%; }
  36% { offset-distance: 12%; }
  43% { offset-distance: 14%; }
  63% { offset-distance: 58%; }
  69% { offset-distance: 60%; }
  86%, 100% { offset-distance: 100%; }
}
@keyframes glass-trace {
  0%, 18% { stroke-dashoffset: 1; }
  36% { stroke-dashoffset: .88; }
  43% { stroke-dashoffset: .86; }
  63% { stroke-dashoffset: .42; }
  69% { stroke-dashoffset: .4; }
  86%, 100% { stroke-dashoffset: 0; }
}
@keyframes glass-cycle {
  0%, 100% { opacity: 0; }
  8%, 86% { opacity: 1; }
}
.glass-droplet { animation: glass-creep var(--glass-duration) var(--glass-delay) linear infinite; }
@keyframes glass-creep {
  0% { transform: translate(0, 0); opacity: 0; }
  9%, 30% { transform: translate(0, 0); opacity: 1; }
  48% { transform: translate(1px, 9px); }
  58% { transform: translate(1px, 11px); }
  78% { transform: translate(-2px, 55px); opacity: 1; }
  94%, 100% { transform: translate(1px, 125px); opacity: 0; }
}
/* Keep the glass image steady while its shared palette changes. */
.theme-is-transitioning .rain-glass * { animation-play-state: paused !important; }
.rain-glass.is-paused * { animation-play-state: paused !important; }
@media (max-width: 600px) {
  .raindrop:nth-child(2n) { display: none; }
}
/* Reduced-motion override temporarily disabled.
@media (prefers-reduced-motion: reduce) {
  .glass-rivulet, .glass-trail, .glass-runner, .glass-droplet { animation: none; }
  .glass-runner { offset-distance: 100%; }
  .rain-field .raindrop, .rain-field .rain-stem,
  :root[data-weather='rain'][data-theme='dark'] .rain-lightning { animation: none; }
  .rain-field .raindrop { bottom: auto; top: var(--rain-x); opacity: .1; }
}
*/

/* Blog layout and Belyga titles. */
.overlay-content .journal-page h1 { font-family:'Belyga',sans-serif; font-size:clamp(44px,6vw,84px); max-width:760px; letter-spacing:-.055em; }
.overlay-content .journal-page .post-card-title { font-family:'Belyga',sans-serif; font-size:clamp(42px,5vw,72px); letter-spacing:-.035em; }
.overlay-content .journal-page .post-card:first-child { padding:30px 0 38px; grid-template-columns:minmax(0,1fr) 42%; border-top:0; }
.overlay-content .journal-page .post-card:first-child:not(.has-image) { grid-template-columns:1fr; }
.overlay-content .journal-page .post-card:first-child .post-card-image { height:320px; filter:sepia(.15); }
.overlay-content .journal-page .post-card:not(:first-child) .post-card-image { height:160px; }
.overlay-content .post-page .post-header { border-bottom:1px solid var(--line); padding-bottom:28px; }
.overlay-content .post-page .post-header h1 { font-family:'Belyga',sans-serif; font-size:clamp(44px,6vw,84px); letter-spacing:-.04em; }
.overlay-content .post-page .post-content blockquote { margin:34px 0; padding:20px 24px; border:0; border-block:1px solid var(--line); background:color-mix(in srgb,var(--ink) 3%,transparent); color:var(--ink); font:italic 22px/1.65 Georgia,serif; }
.overlay-content .post-page .post-content blockquote p { font:inherit; }
@media (max-width:650px) {
  .overlay-content .journal-page .post-card:first-child { grid-template-columns:1fr; gap:20px; }
  .overlay-content .journal-page .post-card:first-child .post-card-image { grid-column:1; grid-row:2; height:200px; }
}