/* ========================================================================
   begom — Visual System
   Derived from the "탈피의 기술(記述) / The Art of Shedding - A Record" poster
   for the collective 비커밍 곰팡이 (Becoming Mold).
   ======================================================================== */

@font-face {
  font-family: "Diphylleia";
  src: url("./fonts/Diphylleia-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Korean body face: Pretendard via CDN, with Noto Sans KR as fallback.
   Pretendard pairs cleanly with Diphylleia: humanist neutral + literary serif. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Gowun+Dodum&display=swap");

:root {
  /* --------------------------------------------------------------------
     COLOR — green spectrum lifted from the poster's blob/spore forms.
     Reads as moss, lichen, photosynthesis. Mostly cool greens, warm cream
     as the only off-tone. Black is true ink, used sparingly.
     -------------------------------------------------------------------- */

  /* Green scale, light → dark */
  --moss-50:  #EDF3D2;  /* palest mint, lower poster gradient */
  --moss-100: #DCE8B8;
  --moss-200: #C2DA9D;  /* soft highlight on spore blobs */
  --moss-300: #9CC982;
  --moss-400: #7DB965;
  --moss-500: #5FA34A;  /* primary brand green */
  --moss-600: #4A8B3A;
  --moss-700: #356C29;  /* deep moss, used for text on light bg */
  --moss-800: #244B1C;
  --moss-900: #15300F;

  /* Neutrals — paper-warm cream and a near-black ink */
  --cream-50:  #FBF8EC;  /* paper */
  --cream-100: #F2EDD8;
  --cream-200: #E6DEBE;
  --ink:       #1A1915;  /* body text, fine lines, arrows */
  --ink-soft:  #2A2922;
  --pill:      #15140F;  /* black pill capsules */

  /* Semantic surfaces */
  --bg:            var(--moss-50);
  --bg-elevated:   #F5F4DE;     /* slightly warmer than --moss-50 */
  --bg-deep:       var(--moss-400);
  --surface-pill:  var(--pill);

  /* Foreground */
  --fg:            var(--ink);
  --fg-muted:      var(--moss-800);
  --fg-soft:       #4A5A3E;
  --fg-on-dark:    var(--cream-50);
  --fg-on-green:   var(--ink);

  /* Lines & strokes (the hairline arrows on the poster) */
  --line:          var(--ink);
  --line-thin:     0.75px;
  --line-base:     1px;
  --line-heavy:    1.5px;

  /* Poster gradient — top-light, settling into cream below */
  --gradient-poster: linear-gradient(
    180deg,
    var(--moss-400) 0%,
    var(--moss-300) 28%,
    var(--moss-200) 55%,
    var(--moss-100) 78%,
    var(--moss-50)  100%
  );

  /* Blob radial — soft 3D spore surface */
  --gradient-spore: radial-gradient(
    circle at 30% 25%,
    var(--moss-200) 0%,
    var(--moss-400) 35%,
    var(--moss-600) 75%,
    var(--moss-700) 100%
  );

  /* --------------------------------------------------------------------
     TYPE
     Diphylleia → Latin display (serif, organic)
     Pretendard → Korean & UI body
     Gowun Dodum → soft Korean display alt
     -------------------------------------------------------------------- */

  /* Diphylleia carries both Latin and Hangul — use it for ALL display type. */
  --font-display:    "Diphylleia", "Gowun Dodum", "Pretendard", serif;
  --font-display-ko: "Diphylleia", "Gowun Dodum", "Pretendard", "Noto Sans KR", serif;
  --font-body:       "Pretendard", "Noto Sans KR", -apple-system, system-ui, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — exhibition-poster scaled, generous */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   40px;
  --fs-3xl:   56px;
  --fs-4xl:   84px;
  --fs-5xl:   120px;  /* poster-scale Korean headlines */

  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-normal: 1.45;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* --------------------------------------------------------------------
     SHAPE & SPACE
     -------------------------------------------------------------------- */

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-pill: 999px;
  --radius-blob: 50% 40% 55% 45% / 45% 55% 45% 55%;  /* organic blob */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* Shadows — used sparingly. Spore blobs use inner shadows for 3D. */
  --shadow-spore-inner:
    inset -8px -12px 20px rgba(21, 48, 15, 0.35),
    inset 6px 8px 18px rgba(237, 243, 210, 0.45);
  --shadow-soft: 0 1px 2px rgba(21, 48, 15, 0.08), 0 8px 24px rgba(21, 48, 15, 0.06);
  --shadow-pill: 0 2px 8px rgba(21, 20, 15, 0.18);

  /* Motion */
  --ease-organic: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-out:     cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast:     160ms;
  --dur-base:     280ms;
  --dur-slow:     520ms;
}

/* ========================================================================
   SEMANTIC TYPOGRAPHY
   ======================================================================== */

html { color: var(--fg); background: var(--bg); }
body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg); }

.t-display-ko {
  font-family: var(--font-display-ko);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  color: var(--ink);
}
.t-display-en {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  font-weight: 400;
  color: var(--ink);
}
.t-h1 { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: 400; }
.t-h2 { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: var(--lh-snug); font-weight: 400; }
.t-h3 { font-family: var(--font-body); font-size: var(--fs-xl); line-height: var(--lh-snug); font-weight: 600; letter-spacing: var(--tracking-tight); }
.t-h4 { font-family: var(--font-body); font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: 600; }

.t-body  { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); }
.t-body-lg { font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-normal); }
.t-small { font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-soft); }
.t-caption { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-soft); }
.t-meta-ko { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 500; line-height: 1.5; }
.t-meta-en { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.4; }

/* ========================================================================
   COMPONENT PRIMITIVES
   ======================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 22px;
  background: var(--pill);
  color: var(--cream-50);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 400;
  letter-spacing: 0;
}
.pill--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.pill--moss  { background: var(--moss-600); color: var(--cream-50); }

.crop-mark {
  /* The thin black bracket marks in the poster corners.
     Compose with ::before / ::after on a positioned wrapper. */
  position: relative;
}
.crop-mark::before,
.crop-mark::after {
  content: "";
  position: absolute;
  width: 24px; height: 24px;
  border: 1px solid var(--ink);
}
.crop-mark::before { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.crop-mark::after  { bottom: -4px; right: -4px; border-left: none; border-top: none; }

.duotone-green {
  /* Apply over an <img> to render it as the poster's green-tinted photo */
  filter: grayscale(1) contrast(1.05) brightness(0.95);
  mix-blend-mode: multiply;
  background: var(--moss-500);
}