/* ==========================================================================
   ABOUT PAGE STYLESHEET
   ==========================================================================
   This stylesheet controls the visual presentation of the About page. All
   styles are scoped under the `body.about-page` class to prevent collisions
   with the shared site-wide `styles.css`.

   The design creates an immersive rainy night cityscape scene. The viewer
   stands under an awning on a quiet urban street at night. Visual layers
   include: a dark gradient sky with a hazy moon and drifting storm clouds,
   animated falling rain, drifting fog, periodic lightning flashes, a
   silhouetted rooftop skyline with tiny lit windows, hanging street lanterns
   with warm glow halos, a string of decorative lights, rising steam wisps
   from the ground, and puddles with rain-ripple reflections. Content is
   presented on frosted-glass cards that feel like windows into the scene.

   The atmosphere is built entirely with CSS — no images or JavaScript —
   using layered gradients, pseudo-elements, and keyframe animations.
   ========================================================================== */


/* --------------------------------------------------------------------------
   COLOR PALETTE & BASE STYLES
   --------------------------------------------------------------------------
   Custom properties define the entire color vocabulary for the scene.
   This makes it easy to tweak the mood (e.g., warmer lamplight, denser fog)
   from a single location. The three sky tones create the dark-to-lighter
   vertical gradient. Glass variables control the frosted-card translucency.
   Lamp variables range from the warm bulb color to its diffuse glow halo.
   Rain and fog use cool blue-gray tones at very low opacity so they read
   as atmospheric layers rather than solid shapes.
   -------------------------------------------------------------------------- */

.about-page {
  --sky-dark: #0a1118;
  --sky-mid: #121f2d;
  --sky-light: #1a2d3f;
  --glass: rgba(16, 28, 42, 0.65);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-highlight: rgba(255, 255, 255, 0.03);
  --fog: rgba(174, 194, 224, 0.04);
  --lamp: #e8c47c;
  --lamp-bright: #f2d48c;
  --lamp-glow: rgba(232, 196, 124, 0.15);
  --lamp-glow-soft: rgba(232, 196, 124, 0.06);
  --rain-streak: rgba(174, 194, 224, 0.10);
  --rain-streak-bright: rgba(200, 216, 240, 0.16);
  --accent: #6889a8;
  --accent-bright: #8aacc8;
  --text: #d4d0c8;
  --text-dim: #8a9aaa;
  --text-faint: #5a6a7a;
  --drop: rgba(174, 194, 224, 0.35);
  --silhouette: #080e14;
  --puddle: rgba(20, 40, 65, 0.6);

  color: var(--text);
  font-family: "Libre Caslon Text", "Georgia", serif;

  /* Prevent horizontal scroll caused by the rain overlay extending
     beyond the viewport edges (the rain pseudo-elements use negative
     left/right values to avoid visible edge gaps as streaks animate). */
  overflow-x: hidden;

  /* Three-layer background simulating ambient light in the night sky:
     1) A warm elliptical glow at upper-left — the spill of lantern light
        hitting the "street" and walls near the viewer.
     2) A cool blue elliptical glow at upper-right — moonlight or ambient
        city light bouncing off clouds.
     3) The base vertical gradient transitioning from near-black at the top
        (deep night sky) through mid-navy to a slightly lighter horizon. */
  background:
    radial-gradient(ellipse 500px 600px at 8% 35%, rgba(232, 196, 124, 0.04), transparent 60%),
    radial-gradient(ellipse 700px 500px at 80% 15%, rgba(40, 65, 95, 0.2), transparent 55%),
    linear-gradient(180deg, var(--sky-dark) 0%, var(--sky-mid) 50%, var(--sky-light) 100%);

  /* Fixed attachment keeps the sky gradient stationary while content scrolls,
     so the "sky" feels like a real backdrop rather than a texture on the page. */
  background-attachment: fixed;
}


/* ==========================================================================
   KEYFRAME ANIMATIONS
   ==========================================================================
   All animations for the scene are defined here. Each one drives a specific
   atmospheric effect — rain, fog, lightning, lantern behavior, string-light
   glow, rising steam, puddle reflections, moon breathing, and cloud drift.
   ========================================================================== */

/* rainFall: Translates the rain pseudo-element from above the viewport
   to below it. Because the element is 300% tall and starts at top: -100%,
   sliding it by 100% of its own height makes the repeating-linear-gradient
   rain streaks scroll continuously downward. Used on .about-page::before
   for the primary (faster, brighter) rain layer. */
@keyframes rainFall {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* rainFallSlow: Identical motion to rainFall but applied with a longer
   duration on .about-page::after. The slower speed + different angle +
   lower opacity creates a parallax-like depth illusion, as though some
   rain is falling farther from the viewer. */
@keyframes rainFallSlow {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* fogDrift: Gently slides the fog layer left and right while subtly
   scaling it wider at the midpoint and pulsing its opacity. This makes
   the fog feel alive — slowly rolling through the street rather than
   sitting static. Used on .about-fog. */
@keyframes fogDrift {
  0%   { transform: translateX(-8%) scaleX(1); opacity: 0.3; }
  50%  { transform: translateX(8%) scaleX(1.1); opacity: 0.6; }
  100% { transform: translateX(-8%) scaleX(1); opacity: 0.3; }
}

/* dropSlide: Animates the decorative raindrop icon in the section dividers.
   The drop slides down 10px while fading out, simulating a water droplet
   sliding down a surface before disappearing. Used on .about-drop. */
@keyframes dropSlide {
  0%   { transform: translateY(0); opacity: 0.6; }
  80%  { transform: translateY(8px); opacity: 0.3; }
  100% { transform: translateY(10px); opacity: 0; }
}

/* lightningFlash: Creates a brief double-pulse flash effect. The element
   goes from invisible to 12% opacity at 1%, drops to 0% at 2%, flickers
   back to 6% at 3%, then stays invisible for the remaining 96% of the
   cycle. With a 14-second duration, this produces realistic sporadic
   lightning — a quick flash, a fainter echo, then a long dark pause.
   Used on .about-lightning. */
@keyframes lightningFlash {
  0%, 100% { opacity: 0; }
  1%       { opacity: 0.12; }
  2%       { opacity: 0; }
  3%       { opacity: 0.06; }
  4%       { opacity: 0; }
}

/* lanternSway: Simulates a hanging lantern rocking gently in the wind.
   Tiny horizontal translations and rotations at 25% and 75% create a
   pendulum-like motion. The movement is subtle (1px / 0.5deg) so it
   reads as a breeze rather than a storm. Used on .about-lantern. */
@keyframes lanternSway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(1px) rotate(0.5deg); }
  75%      { transform: translateX(-1px) rotate(-0.5deg); }
}

/* lanternFlicker: Pulses the opacity of the lantern's warm glow halo
   through irregular values (0.6–0.8) to simulate the uneven light output
   of an old gas or candle lantern being buffeted by wind. The asymmetric
   keyframe stops prevent it from looking like a smooth sine wave.
   Used on .about-lantern-glow. */
@keyframes lanternFlicker {
  0%, 100% { opacity: 0.7; }
  20%      { opacity: 0.8; }
  40%      { opacity: 0.65; }
  60%      { opacity: 0.75; }
  80%      { opacity: 0.6; }
}

/* bulbGlow: Smoothly pulses a string-light bulb's opacity and blur radius,
   making the warm glow breathe in and out. The increased blur at 50%
   makes the light appear to swell outward. Used on .about-bulb (default
   animation for most bulbs). */
@keyframes bulbGlow {
  0%, 100% { opacity: 0.6; filter: blur(2px); }
  50%      { opacity: 0.85; filter: blur(3px); }
}

/* bulbFlicker: A more erratic animation for select string-light bulbs,
   simulating a loose connection. The bulb dims sharply to 0.3 at the
   20% mark for a single frame, then returns to normal. This brief dip
   creates a convincing electrical-flicker effect. Used on .about-bulb--3
   and .about-bulb--6 as an override. */
@keyframes bulbFlicker {
  0%, 18%, 22%, 100% { opacity: 0.7; }
  20%                { opacity: 0.3; }
}

/* steamRise: Drives the steam wisps upward from ground level. The wisp
   starts invisible, fades in to 0.3 at 10%, then drifts upward 120px
   while widening (scaleX grows from 1 to 2) and fading out — mimicking
   how real steam disperses as it rises. Used on .about-wisp elements. */
@keyframes steamRise {
  0%   { transform: translateY(0) scaleX(1); opacity: 0; }
  10%  { opacity: 0.3; }
  50%  { transform: translateY(-60px) scaleX(1.4); opacity: 0.15; }
  100% { transform: translateY(-120px) scaleX(2); opacity: 0; }
}

/* puddleShimmer: Gently oscillates opacity on the puddle and its ripple
   rings, simulating the shifting reflections on a wet surface as rain
   disturbs it. Used on .about-puddle and its pseudo-elements. */
@keyframes puddleShimmer {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.6; }
}

/* condensation: Pulses the faint highlight line on the top edge of
   glass cards, simulating moisture condensing and catching light on a
   cold glass surface. Used on .about-card::before. */
@keyframes condensation {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.45; }
}

/* moonPulse: Slowly breathes the moon's glow between 60% and 85%
   opacity over 10 seconds. This simulates thin cloud cover periodically
   dimming and revealing the moon. Used on .about-moon. */
@keyframes moonPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.85; }
}

/* cloudDrift1: Translates the first (largest) cloud 60px to the right
   over its cycle. With `alternate` direction, the cloud slides right
   then back left, creating a slow horizontal drift. Used on
   .about-cloud--1. */
@keyframes cloudDrift1 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(60px); }
}

/* cloudDrift2: Drifts the second cloud 50px to the LEFT — the opposite
   direction from cloud 1. Having clouds move in different directions
   creates a more realistic, layered sky. Used on .about-cloud--2. */
@keyframes cloudDrift2 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50px); }
}

/* cloudDrift3: Drifts the third (smallest, highest) cloud 40px right.
   Its shorter travel distance combined with a faster cycle gives this
   wispy cloud a lighter, quicker movement. Used on .about-cloud--3. */
@keyframes cloudDrift3 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(40px); }
}


/* ==========================================================================
   RAIN OVERLAY
   ==========================================================================
   Rain is created using two full-viewport pseudo-elements on .about-page.
   Each one is a tall (300% height) panel filled with repeating-linear-gradient
   diagonal lines. Animating translateY makes those thin lines scroll downward
   continuously, producing the illusion of falling rain.

   Two layers are used for depth: the ::before layer has brighter, steeper-
   angled streaks moving faster (foreground rain), while the ::after layer
   has fainter, slightly different-angled streaks moving slower (background
   rain). The different angles (105deg vs 108deg vs 102deg) prevent the
   streaks from lining up, which would break the illusion.

   Negative left/right values (-50px) extend the rain beyond the viewport
   edges so streaks don't visibly appear/disappear at the sides.
   ========================================================================== */

/* Primary rain layer — brighter, faster streaks in the foreground.
   Uses two repeating-linear-gradients at slightly different angles and
   spacings to create an organic, non-uniform rain pattern. The first
   gradient at 105deg produces wider-spaced bright streaks; the second
   at 102deg adds thinner, dimmer streaks between them. */
.about-page::before {
  content: "";
  position: fixed;
  top: -100%;
  left: -50px;
  right: -50px;
  bottom: 0;
  height: 300%;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      105deg,
      transparent 0,
      transparent 18px,
      var(--rain-streak-bright) 18px,
      var(--rain-streak-bright) 18.7px,
      transparent 18.7px,
      transparent 44px
    ),
    repeating-linear-gradient(
      102deg,
      transparent 0,
      transparent 32px,
      var(--rain-streak) 32px,
      var(--rain-streak) 32.5px,
      transparent 32.5px,
      transparent 60px
    );
  animation: rainFall 0.7s linear infinite;
}

/* Secondary rain layer — fainter, slower streaks suggesting distant rain.
   The reduced opacity (0.45), wider spacing (68px repeat), and slower
   animation (1.1s vs 0.7s) make these streaks feel farther away, adding
   depth to the rainfall. */
.about-page::after {
  content: "";
  position: fixed;
  top: -100%;
  left: -50px;
  right: -50px;
  bottom: 0;
  height: 300%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.45;
  background:
    repeating-linear-gradient(
      108deg,
      transparent 0,
      transparent 26px,
      var(--rain-streak) 26px,
      var(--rain-streak) 26.3px,
      transparent 26.3px,
      transparent 68px
    );
  animation: rainFallSlow 1.1s linear infinite;
}


/* ==========================================================================
   SHARED OVERRIDES
   ==========================================================================
   The site-wide styles.css applies decorative treatments to section
   containers (background fills, clip-paths, drop-cap first letters).
   These overrides neutralize those treatments for the About page so
   the rainy-night scene's glass cards and transparent backgrounds can
   take over without interference.
   ========================================================================== */

/* Strip the default container background, box-shadow, clip-path, and
   padding so sections are transparent and the night sky shows through. */
.about-page main:not(.home-rooms) > section .container {
  background: none;
  box-shadow: none;
  clip-path: none;
  padding: 0;
}

/* Disable the decorative drop-cap first-letter styling that the shared
   stylesheet applies to paragraphs inside containers. The About page
   uses a different typographic approach for its glass cards. */
.about-page main:not(.home-rooms) > section .container p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  padding-right: 0;
  color: inherit;
  font-family: inherit;
}

/* Ensure the navigation bar sits above all atmospheric layers (rain,
   fog, lightning, clouds) so it remains clickable and visible. */
.about-page .study-nav {
  position: relative;
  z-index: 10;
}

/* Footer is styled to blend into the scene: no background fill, just a
   subtle top border separating it from content, and elevated above the
   rain overlay (z-index: 2) so the text remains readable. */
.about-page footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--glass-border);
  margin-top: 0;
  background: none;
}

.about-page footer .container {
  color: var(--text-faint);
  font-family: "Libre Caslon Text", "Georgia", serif;
  font-size: 0.72rem;
}


/* ==========================================================================
   FOG LAYER
   ==========================================================================
   A fixed full-screen overlay containing three soft radial gradients that
   simulate patches of fog drifting through the street. The gradients are
   positioned at different locations to avoid uniformity:
   1) Upper-left — a large, faint fog bank.
   2) Right side, slightly lower — a secondary wisp.
   3) Bottom center — low-hanging ground mist pooling at street level.
   The entire element drifts left/right via the fogDrift animation,
   creating the sensation of fog slowly rolling through the scene.
   ========================================================================== */

.about-fog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 40% at 15% 40%, rgba(174, 194, 224, 0.05), transparent),
    radial-gradient(ellipse 70% 35% at 85% 60%, rgba(174, 194, 224, 0.04), transparent),
    radial-gradient(ellipse 100% 20% at 50% 95%, rgba(174, 194, 224, 0.08), transparent);
  animation: fogDrift 22s ease-in-out infinite alternate;
}


/* ==========================================================================
   LIGHTNING
   ==========================================================================
   A fixed full-screen overlay with a single large radial gradient positioned
   near the top-right of the sky. Normally invisible (opacity: 0), the
   lightningFlash animation briefly pulses it to low opacity twice in quick
   succession — simulating a distant lightning strike illuminating the clouds.
   The 14-second cycle means flashes are infrequent and startling, matching
   the rhythm of a real thunderstorm.
   ========================================================================== */

.about-lightning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 140% 60% at 65% 5%, rgba(200, 220, 255, 0.25), transparent 50%);
  animation: lightningFlash 14s ease-in-out infinite;
}


/* ==========================================================================
   MOON
   ==========================================================================
   The moon is rendered as a 180px circular element with a multi-stop radial
   gradient. The gradient is brightest at the center (cool blue-white at 12%
   opacity), fades through two intermediate rings (6% and 2%), and becomes
   fully transparent at 70%. This creates a soft, hazy moon partially
   obscured by clouds/rain rather than a sharp bright disc. The moonPulse
   animation gently breathes its opacity, simulating thin clouds drifting
   across. Positioned in the upper-right sky at z-index: 0 so clouds
   (z-index: 1) can pass in front of it.
   ========================================================================== */

.about-moon {
  position: fixed;
  top: 3%;
  right: 12%;
  width: 180px;
  height: 180px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(200, 216, 240, 0.12) 0%,
    rgba(200, 216, 240, 0.06) 30%,
    rgba(200, 216, 240, 0.02) 55%,
    transparent 70%
  );
  animation: moonPulse 10s ease-in-out infinite;
}


/* ==========================================================================
   STORM CLOUDS
   ==========================================================================
   Three absolutely-positioned elliptical elements within a fixed container
   at the top of the viewport. Each cloud is a radial-gradient blob — opaque
   dark blue-gray at center, fading to transparent at the edges — creating
   soft, amorphous cloud shapes without any images. They drift horizontally
   via separate cloudDrift animations at different speeds and directions,
   producing a layered, parallax-like sky. The clouds sit at z-index: 1,
   above the moon (z-index: 0), so they occasionally obscure it as they pass.
   ========================================================================== */

.about-clouds {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  z-index: 1;
  pointer-events: none;
}

/* Base cloud shape: a rounded ellipse with a dark radial gradient that
   fades to transparent, producing a soft-edged dark mass against the sky. */
.about-cloud {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(30, 45, 65, 0.7) 0%,
    rgba(20, 35, 55, 0.4) 40%,
    transparent 70%
  );
}

/* Cloud 1 — the largest cloud, positioned upper-right near the moon.
   Its rightward drift (cloudDrift1) causes it to periodically pass across
   the moon, dimming it. 320px wide and relatively opaque (0.7). */
.about-cloud--1 {
  top: -20px;
  right: 8%;
  width: 320px;
  height: 120px;
  opacity: 0.7;
  animation: cloudDrift1 30s ease-in-out infinite alternate;
}

/* Cloud 2 — a mid-sized cloud on the left side with a slightly different
   gradient (lighter center) and lower opacity. Drifts leftward via
   cloudDrift2 to contrast cloud 1's rightward motion. */
.about-cloud--2 {
  top: 30px;
  left: 5%;
  width: 260px;
  height: 90px;
  opacity: 0.5;
  background: radial-gradient(
    ellipse at center,
    rgba(25, 40, 60, 0.6) 0%,
    rgba(18, 30, 48, 0.3) 45%,
    transparent 70%
  );
  animation: cloudDrift2 36s ease-in-out infinite alternate;
}

/* Cloud 3 — the smallest, highest, faintest wisp. Positioned center-sky
   at only 0.4 opacity with a lighter gradient. Its faster 25-second cycle
   and shorter drift distance give it a lighter, wispier feel compared to
   the heavier clouds below. */
.about-cloud--3 {
  top: 10px;
  left: 40%;
  width: 200px;
  height: 70px;
  opacity: 0.4;
  background: radial-gradient(
    ellipse at center,
    rgba(35, 50, 70, 0.5) 0%,
    rgba(25, 40, 60, 0.2) 50%,
    transparent 70%
  );
  animation: cloudDrift3 25s ease-in-out infinite alternate;
}


/* ==========================================================================
   ROOFTOP SKYLINE SILHOUETTE
   ==========================================================================
   A city skyline rendered entirely with layered CSS gradients — no images.
   Each "building" is a linear-gradient from the silhouette color up to a
   specific height, then transparent above that. The `no-repeat` background
   with explicit `background-size` and `background-position` places each
   rectangle independently, creating a jagged rooftop profile.

   Buildings are grouped into five clusters:
   - Distant left cluster (shorter, grouped)
   - Center-left tall structures
   - Center gap (shorter/sparser, leaving room for content above)
   - Center-right tall cluster
   - Right edge buildings
   A full-width 18px ground strip at the bottom connects them all.

   The ::before pseudo-element adds tiny glowing dots (1.5px radial gradients)
   positioned inside the building rectangles, simulating lit windows — some
   warm amber (interior lights), some cool blue-white (TV/monitor glow).

   The ::after pseudo-element adds a faint amber haze above the ground,
   simulating light pollution and lamplight reflecting off wet surfaces.
   ========================================================================== */

.about-skyline {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  z-index: 1;
  pointer-events: none;

  background:
    /* Distant building cluster — left side: three buildings of varying height
       (55px, 72px, 48px) creating an uneven roofline at the far left. */
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 55px, transparent 55px) no-repeat 2% bottom / 40px 55px,
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 72px, transparent 72px) no-repeat 5% bottom / 28px 72px,
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 48px, transparent 48px) no-repeat 8% bottom / 35px 48px,

    /* Taller structures — center-left: includes the tallest building in this
       cluster (90px) flanked by shorter ones, creating dramatic height variation. */
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 90px, transparent 90px) no-repeat 18% bottom / 22px 90px,
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 65px, transparent 65px) no-repeat 21% bottom / 38px 65px,
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 50px, transparent 50px) no-repeat 25% bottom / 30px 50px,

    /* Center gap — lower, sparser buildings so the main content area above
       has a clear visual channel without tall silhouettes competing for attention. */
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 35px, transparent 35px) no-repeat 38% bottom / 25px 35px,
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 42px, transparent 42px) no-repeat 45% bottom / 20px 42px,
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 30px, transparent 30px) no-repeat 55% bottom / 30px 30px,

    /* Taller cluster — center-right: includes the tallest building overall
       (95px, a narrow tower at 76%) to create an asymmetric skyline. */
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 80px, transparent 80px) no-repeat 68% bottom / 26px 80px,
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 58px, transparent 58px) no-repeat 72% bottom / 32px 58px,
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 95px, transparent 95px) no-repeat 76% bottom / 18px 95px,

    /* Right edge buildings: three buildings framing the right side,
       their heights (62px, 45px, 70px) mirror the left cluster loosely. */
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 62px, transparent 62px) no-repeat 88% bottom / 35px 62px,
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 45px, transparent 45px) no-repeat 92% bottom / 28px 45px,
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 70px, transparent 70px) no-repeat 96% bottom / 30px 70px,

    /* Base ground strip — a full-width 18px-tall dark bar that connects all
       the buildings at the bottom, representing the street surface. */
    linear-gradient(to top, var(--silhouette) 0%, var(--silhouette) 18px, transparent 18px) no-repeat 0% bottom / 100% 18px;
}

/* Tiny lit windows scattered across the building silhouettes. Each window
   is a 1.5px radial-gradient circle positioned at a specific percentage
   and pixel offset to land inside the building rectangles defined above.
   Warm amber dots (rgba 232,196,124) represent interior tungsten lighting;
   cool blue-white dots (rgba 200,220,255) represent screens or fluorescent
   light. The mix of colors and varying opacities makes the skyline feel
   lived-in and realistic. */
.about-skyline::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  pointer-events: none;
  background:
    /* Left cluster windows — positioned within the 2%-8% horizontal range */
    radial-gradient(circle 1.5px at 3% calc(100% - 38px), rgba(232, 196, 124, 0.5), transparent 3px),
    radial-gradient(circle 1.5px at 4% calc(100% - 30px), rgba(232, 196, 124, 0.3), transparent 3px),
    radial-gradient(circle 1.5px at 6% calc(100% - 52px), rgba(232, 196, 124, 0.4), transparent 3px),
    radial-gradient(circle 1.5px at 7% calc(100% - 28px), rgba(200, 220, 255, 0.3), transparent 3px),

    /* Center-left windows — positioned within the 18%-25% range */
    radial-gradient(circle 1.5px at 19% calc(100% - 65px), rgba(232, 196, 124, 0.5), transparent 3px),
    radial-gradient(circle 1.5px at 19% calc(100% - 50px), rgba(232, 196, 124, 0.3), transparent 3px),
    radial-gradient(circle 1.5px at 22% calc(100% - 40px), rgba(200, 220, 255, 0.4), transparent 3px),
    radial-gradient(circle 1.5px at 24% calc(100% - 32px), rgba(232, 196, 124, 0.35), transparent 3px),

    /* Center-right windows — positioned within the 68%-77% range */
    radial-gradient(circle 1.5px at 69% calc(100% - 55px), rgba(232, 196, 124, 0.4), transparent 3px),
    radial-gradient(circle 1.5px at 70% calc(100% - 38px), rgba(200, 220, 255, 0.3), transparent 3px),
    radial-gradient(circle 1.5px at 77% calc(100% - 70px), rgba(232, 196, 124, 0.5), transparent 3px),
    radial-gradient(circle 1.5px at 77% calc(100% - 55px), rgba(232, 196, 124, 0.3), transparent 3px),

    /* Right cluster windows — positioned within the 88%-97% range */
    radial-gradient(circle 1.5px at 89% calc(100% - 42px), rgba(200, 220, 255, 0.35), transparent 3px),
    radial-gradient(circle 1.5px at 90% calc(100% - 30px), rgba(232, 196, 124, 0.4), transparent 3px),
    radial-gradient(circle 1.5px at 97% calc(100% - 48px), rgba(232, 196, 124, 0.45), transparent 3px),
    radial-gradient(circle 1.5px at 96% calc(100% - 35px), rgba(200, 220, 255, 0.3), transparent 3px);
}

/* Light pollution haze — a faint amber-to-transparent gradient above the
   ground line, simulating the warm glow that streetlamps and lit windows
   cast upward into the rain and fog. Subtle at 3% opacity so it tints
   the lower sky without overpowering the scene. */
.about-skyline::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(232, 196, 124, 0.03), transparent);
}


/* ==========================================================================
   STREET LANTERNS
   ==========================================================================
   Two fixed-position lanterns flanking the content area, simulating hanging
   Chinese/paper lanterns or old gas street lamps. Each lantern consists of
   three visual parts:

   1) The lantern body (.about-lantern) — a small rounded rectangle with a
      red-to-dark gradient simulating a traditional paper or painted-metal
      casing. The box-shadow produces the immediate warm glow halo.
   2) The hanging wire (::before) — a 1px semi-transparent line extending
      upward from the top of the lantern body.
   3) The glow pool (.about-lantern-glow) — a large, soft elliptical
      radial gradient centered on the lantern, simulating the wider pool
      of warm light it casts. This element has the lanternFlicker animation
      for irregular brightness variation.

   The lanternSway animation makes the entire lantern rock gently as if
   buffeted by wind. The right lantern's animation-delay offsets its sway
   so the two don't swing in sync.
   ========================================================================== */

.about-lantern {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  width: 16px;
  height: 24px;
  top: 22%;
  /* Slightly rounded top, flat bottom — lantern casing shape */
  border-radius: 3px 3px 1px 1px;
  /* Vertical gradient simulating a reddish-brown lantern body with
     a slightly brighter middle (light shining through the material). */
  background: linear-gradient(
    180deg,
    rgba(180, 60, 40, 0.7) 0%,
    rgba(200, 80, 50, 0.6) 40%,
    rgba(180, 60, 40, 0.7) 100%
  );
  border: 1px solid rgba(120, 40, 30, 0.5);
  /* Two-layer box-shadow: inner bright glow (12px) for the immediate halo,
     and a larger soft glow (40px) for ambient light spill into the scene. */
  box-shadow:
    0 0 12px rgba(232, 196, 124, 0.15),
    0 0 40px rgba(232, 196, 124, 0.06);
  animation: lanternSway 6s ease-in-out infinite;
}

/* The thin wire from which the lantern hangs, extending 30px upward.
   Barely visible (6% white opacity) to suggest the support without
   drawing attention away from the glowing body. */
.about-lantern::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.06);
}

/* The warm light pool radiating outward from the lantern. This large
   ellipse (120x160px) is centered on the lantern body and uses a radial
   gradient that fades from warm amber to transparent over 70%. The
   lanternFlicker animation irregularly pulses its opacity so the light
   pool appears to waver as if from a live flame. */
.about-lantern-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(232, 196, 124, 0.08) 0%,
    rgba(232, 196, 124, 0.03) 40%,
    transparent 70%
  );
  animation: lanternFlicker 5s ease-in-out infinite;
}

/* Left lantern — positioned 440px left of center, aligning it
   just outside the 720px max-width content area. */
.about-lantern--left {
  left: calc(50% - 440px);
}

/* Right lantern — positioned 440px right of center, placed lower
   (top: 40%) and with a -2s animation delay so its sway is out
   of phase with the left lantern for natural asymmetry. */
.about-lantern--right {
  right: calc(50% - 440px);
  top: 40%;
  animation-delay: -2s;
}


/* ==========================================================================
   STRING LIGHTS
   ==========================================================================
   A decorative string of small colored bulbs stretched horizontally across
   the upper portion of the viewport. The container (.about-string-lights)
   spans from 10% to 10% inset from each edge. The wire itself is drawn
   with ::before as a 1px barely-visible line.

   Individual bulbs (.about-bulb) are tiny teardrop-shaped elements (4x5px)
   with a warm amber color and a two-layer box-shadow that creates both a
   tight bright glow (6px) and a soft ambient halo (20px). They're spaced
   at irregular percentages along the wire. Each has a staggered animation-
   delay so the glow pulses ripple along the string rather than all pulsing
   in unison. Bulbs 3 and 6 use the bulbFlicker animation instead of
   bulbGlow to simulate a faulty connection — they briefly dim sharply.
   ========================================================================== */

.about-string-lights {
  position: fixed;
  top: 110px;
  left: 10%;
  right: 10%;
  height: 40px;
  z-index: 2;
  pointer-events: none;
}

/* The wire/string itself — a single-pixel horizontal line at near-invisible
   opacity. Kept extremely subtle so it suggests a physical wire without
   competing with the glowing bulbs. */
.about-string-lights::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.04);
}

/* Individual string-light bulb. The border-radius uses the shorthand
   "50% 50% 50% 50% / 40% 40% 60% 60%" to create a slight teardrop shape
   (wider at the bottom) mimicking real mini-bulbs. The box-shadow creates
   a warm glow halo in two layers: a tight bright ring and a wider soft one. */
.about-bulb {
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: var(--lamp);
  box-shadow:
    0 0 6px rgba(232, 196, 124, 0.4),
    0 0 20px rgba(232, 196, 124, 0.1);
  top: 6px;
  animation: bulbGlow 4s ease-in-out infinite;
}

/* Bulb positions and animation offsets. Each is placed at a different
   percentage along the wire with a staggered negative delay so their
   glow pulses are out of phase. Bulbs 3 and 6 override to the
   bulbFlicker animation with different durations for a "bad bulb" effect. */
.about-bulb--1 { left: 5%;  animation-delay: 0s; }
.about-bulb--2 { left: 18%; animation-delay: -0.6s; }
.about-bulb--3 { left: 34%; animation-delay: -1.2s; animation-name: bulbFlicker; animation-duration: 8s; }
.about-bulb--4 { left: 50%; animation-delay: -1.8s; }
.about-bulb--5 { left: 66%; animation-delay: -2.4s; }
.about-bulb--6 { left: 82%; animation-delay: -3.0s; animation-name: bulbFlicker; animation-duration: 6s; }
.about-bulb--7 { left: 95%; animation-delay: -3.6s; }


/* ==========================================================================
   STEAM WISPS
   ==========================================================================
   Three small radial-gradient blobs positioned near the bottom of the
   viewport, above the skyline. Each wisp is animated with steamRise:
   it fades in at ground level, drifts upward 120px while widening, then
   fades out — simulating steam or warm air rising from sewer grates,
   manholes, or vents on a cold rainy night.

   The three wisps have different sizes, horizontal positions, durations,
   and animation delays so they appear to rise independently from different
   points along the street rather than in unison.
   ========================================================================== */

.about-steam {
  position: fixed;
  bottom: 140px;
  left: 0;
  right: 0;
  height: 200px;
  z-index: 2;
  pointer-events: none;
}

/* Base wisp shape — a small, soft elliptical gradient blob. The gradient
   fades from a faint cool gray at center to transparent, so each wisp
   looks like a thin puff of vapor rather than a solid object. */
.about-wisp {
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(200, 210, 225, 0.06) 0%,
    transparent 70%
  );
}

/* Wisp 1 — left quarter of the street, 7-second cycle, no delay. */
.about-wisp--1 {
  left: 25%;
  animation: steamRise 7s ease-out 0s infinite;
}

/* Wisp 2 — center of the street, slightly larger (50x70px), slower
   9-second cycle with a 3-second delay so it starts mid-way through
   wisp 1's cycle. */
.about-wisp--2 {
  left: 50%;
  width: 50px;
  height: 70px;
  animation: steamRise 9s ease-out 3s infinite;
}

/* Wisp 3 — right side of the street, smallest (35x50px), 8-second
   cycle with a 5-second delay. The staggered timing ensures all three
   wisps are rarely at the same phase simultaneously. */
.about-wisp--3 {
  left: 72%;
  width: 35px;
  height: 50px;
  animation: steamRise 8s ease-out 5s infinite;
}


/* ==========================================================================
   PUDDLE / WET GROUND REFLECTION
   ==========================================================================
   A subtle elliptical element below the content that simulates a rain puddle
   on the street. The puddle's background is built from four gradient layers:
   1) A wide surface shimmer — a cool blue ellipse at the top edge suggesting
      reflected sky light on the water surface.
   2-3) Two smaller warm amber ellipses at different positions — reflections
      of the nearby lanterns bouncing in the water.
   4) A base wet-surface gradient giving the whole puddle a slight sheen.

   The ::before and ::after pseudo-elements add tiny oval outlines (14x6px
   and 10x4px) simulating concentric ripple rings from individual raindrops
   hitting the puddle surface. Each ripple has its own shimmer animation
   cycle and delay so they pulse independently.
   ========================================================================== */

.about-puddle {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 3rem auto 0;
  height: 24px;
  background:
    /* Water surface shimmer — cool reflected sky light */
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(174, 194, 224, 0.08), transparent),
    /* Left-side lantern reflection — warm amber glow in the water */
    radial-gradient(ellipse 30% 100% at 30% 50%, rgba(232, 196, 124, 0.05), transparent),
    /* Right-side lantern reflection — fainter, more distant */
    radial-gradient(ellipse 20% 100% at 70% 50%, rgba(232, 196, 124, 0.03), transparent),
    /* Base wet surface — a slight linear gradient for overall moisture sheen */
    linear-gradient(180deg, rgba(174, 194, 224, 0.04), rgba(174, 194, 224, 0.01));
  border-radius: 50%;
  animation: puddleShimmer 5s ease-in-out infinite;
}

/* First ripple ring — a small oval outline positioned at 35% from the left.
   The 1px border with very low opacity creates a delicate concentric ring
   effect, pulsing on a 3-second cycle with a 1-second delay. */
.about-puddle::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 35%;
  width: 14px;
  height: 6px;
  border: 1px solid rgba(174, 194, 224, 0.1);
  border-radius: 50%;
  animation: puddleShimmer 3s ease-in-out 1s infinite;
}

/* Second ripple ring — smaller and fainter than the first, positioned
   at 30% from the right. Its longer 4-second cycle and 2.5-second delay
   ensure it pulses out of sync with the first ripple. */
.about-puddle::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 30%;
  width: 10px;
  height: 4px;
  border: 1px solid rgba(174, 194, 224, 0.07);
  border-radius: 50%;
  animation: puddleShimmer 4s ease-in-out 2.5s infinite;
}


/* ==========================================================================
   CONTENT WRAPPER
   ==========================================================================
   The main content container that holds all the glass cards, hero, dividers,
   and puddle. Centered at 720px max-width with z-index: 2 to sit above the
   atmospheric layers (rain, fog, lightning at z-index: 1) but below the
   navigation (z-index: 10). Horizontal padding ensures content doesn't touch
   viewport edges on narrow screens.
   ========================================================================== */

.about-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.4rem;
}


/* ==========================================================================
   HERO SECTION
   ==========================================================================
   The page title and tagline area. The heading uses Cormorant Garamond at
   a large size with light weight and wide letter-spacing for an elegant,
   understated look. The text-shadow adds a faint dual-color glow: warm
   amber (lantern-like) and cool blue (moonlight), blending the two light
   sources of the scene onto the typography. The tagline is set in italic
   serif at a smaller size with muted color.
   ========================================================================== */

.about-hero {
  text-align: center;
  padding: 4rem 0 2.5rem;
}

.about-hero h1 {
  font-family: "Cormorant Garamond", "Libre Caslon Display", "Georgia", serif;
  font-size: 3.2rem;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--text);
  /* Dual text-shadow: a warm 40px amber glow and a cooler 80px blue glow,
     simulating the heading being lit by both a nearby lantern and distant
     moonlight simultaneously. */
  text-shadow:
    0 0 40px rgba(232, 196, 124, 0.1),
    0 0 80px rgba(174, 194, 224, 0.06);
  margin: 0 0 0.6rem;
}

.about-hero .about-tagline {
  font-family: "Libre Caslon Text", "Georgia", serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin: 0;
}


/* ==========================================================================
   RAIN DIVIDER
   ==========================================================================
   A decorative horizontal rule used between content sections. Built with
   flexbox: two gradient lines (::before and ::after) extend from the edges
   and fade to transparent at their ends, flanking a central raindrop icon.

   The raindrop (.about-drop) is an 8x12px teardrop shape created with
   border-radius and a two-layer gradient: a small warm highlight at upper-
   left (simulating a lantern reflection on the drop's surface) over the
   base blue-gray drop color. The inset shadow adds a dark lower edge for
   dimension. The dropSlide animation makes it slowly slide downward and
   fade, as though it's sliding off a surface.
   ========================================================================== */

.about-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 2rem 0;
}

/* The horizontal line segments — each uses a gradient that's transparent
   at the outer edge and transitions to the glass-border color, creating
   lines that fade gracefully into nothing at both ends. */
.about-divider::before,
.about-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--glass-border) 20%,
    var(--glass-border) 80%,
    transparent
  );
}

/* The central raindrop ornament. The border-radius shorthand creates
   a teardrop (wider top, narrower bottom). The background layers a small
   warm highlight over the base blue drop color. Box-shadow adds a blue
   halo below and a dark inset crescent at the bottom for 3D depth. */
.about-drop {
  width: 8px;
  height: 12px;
  margin: 0 16px;
  background:
    radial-gradient(circle at 40% 30%, rgba(232, 196, 124, 0.2), transparent 50%),
    var(--drop);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow:
    0 2px 8px rgba(174, 194, 224, 0.2),
    inset 0 -1px 2px rgba(0, 0, 0, 0.15);
  animation: dropSlide 4s ease-in infinite;
}


/* ==========================================================================
   FROSTED GLASS CARDS
   ==========================================================================
   The primary content containers. These cards use the glassmorphism technique:
   a semi-transparent dark background (--glass at 65% opacity) combined with
   a backdrop-filter blur, making the rain and atmospheric effects behind
   them appear softly diffused rather than sharply visible.

   Visual details that sell the "glass in rain" effect:
   - The top border is slightly brighter (10% white) simulating a light-
     catching edge, while other borders use the standard 7% white.
   - The box-shadow has three layers: a deep outer shadow for depth, an
     inset top highlight for the glass edge, and a faint warm inset glow
     on the left edge from the nearby lantern.
   - The ::before pseudo-element draws a thin animated shimmer line across
     the top edge, simulating moisture condensation catching and releasing
     light as the glass surface shifts.

   Card typography uses Cormorant Garamond for headings (warm lamp color
   with a subtle text-shadow glow) and the body serif for paragraph text.
   ========================================================================== */

.about-card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  /* Brighter top border — light catches the upper edge of the glass card */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  /* Three-layer shadow:
     1) 8px/32px outer shadow — depth/float effect
     2) Inset top highlight — simulates light hitting the upper glass surface
     3) Inset left warm glow — lantern light spilling onto the card's edge */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 var(--glass-highlight),
    inset 3px 0 16px rgba(232, 196, 124, 0.02);
  padding: 2rem 2.2rem;
  margin-bottom: 0;
  overflow: hidden;
}

/* Condensation shimmer — a thin gradient line across the card's top edge
   that pulses in opacity via the condensation animation. The gradient fades
   from transparent at the sides through cool blue to a bright white center
   and back, mimicking moisture beading along the glass and catching light. */
.about-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(174, 194, 224, 0.15) 30%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(174, 194, 224, 0.15) 70%,
    transparent
  );
  animation: condensation 8s ease-in-out infinite;
}

/* Card headings — warm lamp-colored text with a subtle amber glow shadow
   to echo the lantern light. The display serif font at light weight keeps
   the elegance consistent with the hero heading. */
.about-card h2 {
  font-family: "Cormorant Garamond", "Libre Caslon Display", "Georgia", serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--lamp-bright);
  letter-spacing: 1px;
  margin: 0 0 1rem;
  text-shadow: 0 0 24px rgba(232, 196, 124, 0.12);
}

/* Card paragraph text — slightly smaller than base, with generous line-
   height (1.75) for readability against the busy atmospheric background. */
.about-card p {
  position: relative;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 0.8rem;
}

.about-card p:last-child {
  margin-bottom: 0;
}

/* Unstyled list used for structured content within cards. Items are
   separated by the subtle glass-border color, maintaining the frosted
   glass aesthetic. */
.about-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-list li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text);
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--glass-border);
}

.about-list li:last-child {
  border-bottom: none;
}

/* Card links use the cool blue accent color with a faint underline.
   On hover, they warm to lantern amber — as though the user's attention
   is a lantern illuminating the link. */
.about-card a {
  color: var(--accent-bright);
  text-decoration: underline;
  text-decoration-color: rgba(138, 172, 200, 0.3);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.about-card a:hover {
  color: var(--lamp);
  text-decoration-color: rgba(232, 196, 124, 0.4);
}


/* ==========================================================================
   CONTACT ROW
   ==========================================================================
   A centered horizontal row of contact/social links within a card. Uses
   flexbox with wrapping so links reflow on narrow screens. Links are styled
   in a display serif with lowercase text-transform and a bottom border
   underline (rather than text-decoration) for precise visual control. The
   hover transition mirrors the card links: cool blue to warm amber.
   ========================================================================== */

.about-contact-links {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 0.4rem 0;
}

.about-contact-links a {
  font-family: "Libre Caslon Display", "Georgia", serif;
  font-size: 0.95rem;
  color: var(--accent-bright);
  text-decoration: none;
  letter-spacing: 0.8px;
  text-transform: lowercase;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(138, 172, 200, 0.2);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.about-contact-links a:hover {
  color: var(--lamp);
  border-color: rgba(232, 196, 124, 0.4);
}


/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ==========================================================================
   Three breakpoints progressively adapt the scene for smaller screens:

   1080px (tablet): Narrows the content area and pulls lanterns to fixed
     positions near the viewport edges instead of calculated offsets from
     center, since the wider calc() positioning would push them offscreen.

   760px (mobile): Reduces hero padding and heading size, tightens card
     padding and contact link spacing, tucks lanterns to the very edge,
     widens string lights to fill more of the narrower viewport, and
     shortens the skyline silhouette so it doesn't dominate the view.

   420px (small mobile): Further reduces all typography and spacing,
     stacks contact links vertically, completely hides the lanterns
     (they would overlap content at this width), hides the outermost
     string-light bulbs, and minimizes the skyline to just 80px.
   ========================================================================== */

/* Tablet breakpoint (1080px and below): Narrow the content column and
   reposition the lanterns to fixed pixel offsets from the viewport edges
   rather than calculated offsets from center. */
@media (max-width: 1080px) {
  .about-content {
    max-width: 640px;
  }

  .about-lantern--left { left: 20px; }
  .about-lantern--right { right: 20px; }
}

/* Mobile breakpoint (760px and below): Reduce whitespace and font sizes
   across the board. Lanterns tuck to 8px from edges. String lights expand
   to 4% inset (from 10%) to fill more of the narrow screen. The skyline
   height drops from 180px to 120px so buildings don't crowd the content. */
@media (max-width: 760px) {
  .about-hero {
    padding: 3rem 0 2rem;
  }

  .about-hero h1 {
    font-size: 2.4rem;
  }

  .about-card {
    padding: 1.6rem 1.4rem;
  }

  .about-contact-links {
    gap: 1.4rem;
  }

  .about-lantern--left { left: 8px; }
  .about-lantern--right { right: 8px; }

  /* Hide individual bulb dots — without wide-set lanterns as anchors they
     read as random floating specks. Replace with a diffuse ambient glow. */
  .about-string-lights {
    left: 0;
    right: 0;
    top: 100px;
  }

  .about-bulb {
    display: none;
  }

  .about-string-lights::before {
    top: 0;
    height: 40px;
    background: radial-gradient(
      ellipse 70% 100% at 50% 0%,
      rgba(232, 196, 124, 0.09) 0%,
      rgba(232, 196, 124, 0.04) 50%,
      transparent 100%
    );
  }

  .about-skyline {
    height: 120px;
  }
}

/* Small mobile breakpoint (420px and below): Aggressive size reductions.
   Contact links stack vertically. Lanterns are hidden entirely since they
   would overlap the narrow content column. The outermost string-light bulbs
   (1 and 7) are hidden to prevent them from sitting at the very edge of the
   screen. The skyline is reduced to a minimal 80px strip. */
@media (max-width: 420px) {
  .about-hero {
    padding: 2.2rem 0 1.6rem;
  }

  .about-hero h1 {
    font-size: 1.9rem;
    letter-spacing: 1px;
  }

  .about-hero .about-tagline {
    font-size: 0.9rem;
  }

  .about-card {
    padding: 1.3rem 1.1rem;
  }

  .about-card h2 {
    font-size: 1.35rem;
  }

  .about-contact-links {
    flex-direction: column;
    gap: 0.8rem;
  }

  .about-lantern { display: none; }

  .about-bulb--1,
  .about-bulb--7 { display: none; }

  .about-skyline { height: 80px; }
}