/* ============================================================
   watermark.css — Takumi Senpai · Image Watermark (UI Layer)
   Path:  /css/watermark.css
   Load from quests/ pages:
     <link rel="stylesheet" href="../css/watermark.css">

   Design intent:
     "@Takumi Senpai" appears bottom-right of every protected
     image via ::after pseudo-element.
     mix-blend-mode: overlay merges it with image tones —
     subtle on casual viewing, visible on close inspection.

   NO HTML CHANGES REQUIRED.
   watermark.js wraps inline images (.entry-content img) in
   .wm-wrap so they gain a positioned ancestor.
   Static containers (.article-hero, .gallery-item) work as-is.
   ============================================================ */

/* ── 1. Ensure stacking context on static containers ─────── */
.article-hero {
  isolation: isolate;           /* prevents blend bleeding out */
}

.gallery-item {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* .gallery-item はキャプション分だけ 250px より背が高くなる。
   親ルールの bottom: 12px だとキャプション内に透かしが落ちるため、
   top で画像下端付近に固定する。
   250px（img height） - 12px（余白） - 1rem（テキスト行高） ≒ 226px */
.gallery-item::after {
  bottom: 12px;
  top:    unset;
}

/* ── 2. .wm-wrap — injected by watermark.js around
        .entry-content img and any other inline images ─────── */
.wm-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;               /* removes ghost space under img */
  overflow: hidden;
  isolation: isolate;
  vertical-align: top;
}
.wm-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 3. The watermark sign ────────────────────────────────── */
.article-hero::after,
.gallery-item::after,
.wm-wrap::after {

  content: '@Takumi Senpai';

  /* Typography — editorial serif tone of the site */
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size:    0.70rem;
  font-weight:  400;
  font-style:   italic;
  letter-spacing: 0.22em;
  white-space:  nowrap;

  /* Gold accent, inherits CSS variable with fallback */
  color: var(--accent, #c9a84c);

  /* overlay blends into both light and dark image areas */
  opacity: 0.60;
  mix-blend-mode: overlay;

  /* Bottom-right corner */
  position: absolute;
  bottom: 12px;
  right:  14px;
  z-index: 30;

  /* Non-interactive — cannot be selected or dragged */
  pointer-events:      none;
  user-select:         none;
  -webkit-user-select: none;

  transition: opacity 0.30s ease;
}

/* Slightly more visible on hover — still refined */
.article-hero:hover::after,
.gallery-item:hover::after,
.wm-wrap:hover::after {
  opacity: 0.80;
}

/* ── 4. Responsive ────────────────────────────────────────── */
@media (max-width: 480px) {
  .article-hero::after,
  .gallery-item::after,
  .wm-wrap::after {
    font-size:      0.58rem;
    letter-spacing: 0.14em;
    bottom:  8px;
    right:  10px;
  }
}