/* ==============================
   Haneul — STYLE.CSS (SVG refraction)
   Cargo-like layout + background ripple
   ============================== */

/* ---------- Fluid variables ---------- */
:root{
  --side-w: clamp(140px, 18vw, 260px);      /* left/right columns */
  --gutter: clamp(12px, 2vw, 28px);         /* space between sides & center */
  --pad:    clamp(12px, 2vw, 24px);         /* padding from window edge */
  --max-center: clamp(640px, 60vw, 1100px); /* center column width */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Times New Roman", Times, serif;
  --fg: #111;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: transparent;                /* show BG layer */
  color: var(--fg);
  font-family: var(--serif);
  font-size: clamp(14px, 1.2vw, 18px);    /* fluid body text */
  line-height: 1.45;
}

/* ---------- Fixed side columns ---------- */
.side {
  position: fixed;
  top: var(--pad);
  width: var(--side-w);
  font-family: var(--mono);
  font-size: clamp(12px, 1vw, 15px);      /* fluid side text */
  z-index: 1;                              /* above BG */
  text-align: left;
}
.side.left  { left:  var(--pad); }
.side.right { right: var(--pad); }
.side a { color: inherit; text-decoration: underline; }

/* ---------- Center column (scrolls) ---------- */
.center {
  margin-left:  calc(var(--side-w) + var(--gutter) + var(--pad));
  margin-right: calc(var(--side-w) + var(--gutter) + var(--pad));
  max-width: var(--max-center);
  padding: 48px 0 120px;
  position: relative;
  z-index: 1;                              /* above BG */
}

/* ---------- Hero image + caption ---------- */
.hero { margin: 0 0 16px; text-align: center; }
.hero img { display: block; width: 100%; height: auto; }
.hero figcaption { margin-top: 8px; font-size: clamp(16px, 1.2vw, 21px); }

/* ---------- Responsive Vimeo ---------- */
.video-wrapper {
  position: relative;
  width: 100%;
  margin: 2rem auto;
  padding-bottom: 56.25%; /* 16:9 aspect */
  height: 0;
  overflow: hidden;
}
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Inline images ---------- */
.inline-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 24px 0;
}

/* ---------- SVG refraction background layer ---------- */
/* Requires in HTML: <div class="bg-refraction"></div> + the <svg> filter */
.bg-refraction{
  position: fixed;
  inset: 0;
  z-index: 0;                               /* behind content */
  background-image: url('144056.jpg');      /* your uploaded file */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;             /* subtle parallax */
  filter: url(#refract);                    /* apply SVG displacement */
  will-change: filter, transform;
  pointer-events: none;
}

/* Optional: soften the BG without killing the ripple */
.bg-refraction::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.18);       /* raise to fade more; 0.10–0.30 */
  pointer-events: none;
}

/* Respect reduced motion: stop the ripple (remove filter) */
@media (prefers-reduced-motion: reduce){
  .bg-refraction{ filter: none; }
}

/* ---------- Text halo for readability ---------- */
.side, .side *, .center, .center * {
  text-shadow: 0 0 1px rgba(255,255,255,0.35),
               0 0 3px rgba(255,255,255,0.25);
}

/* ---------- Responsive collapse (phones) ---------- */
@media (max-width: 820px){
  .side {
    position: static;            /* unfix side columns */
    width: auto;
    margin: 16px var(--pad) 0;
  }
  .center {
    margin: 0 var(--pad) 80px;   /* full-width center, sides above */
    padding-top: 16px;
    max-width: 100%;
  }
  .hero figcaption { font-size: 1.1rem; }
}