@charset "UTF-8";

/* =========================================================
   Cindy Feng — Digital Portfolio
   THEME LAYER: three floral palettes, switched live.
   Loaded after style.css and overrides its colour tokens.
     1. Peony   — dusty rose on warm ivory
     2. Lilac   — muted violet on cool porcelain
     3. Sage    — sage green on cream
   ========================================================= */

/* ---------- 1. Defaults = Peony ---------- */
:root {
  --paper: #fbf6f3;
  --paper-2: #f4eae4;
  --paper-3: #ebdcd4;
  --paper-rgb: 251, 246, 243;
  --card: #fffcfb;
  --card-2: #fdf6f4;

  --ink: #241a1e;
  --ink-soft: #57474d;
  --ink-faint: #7d6a71;

  --line: #e4d3cb;
  --line-soft: #efe2db;

  --accent: #b4586f;
  --accent-deep: #8a3d53;
  --accent-wash: #f7e9ec;
  --accent-line: rgba(180, 88, 111, .32);
  --accent-line-strong: rgba(180, 88, 111, .45);

  --num: #c9aeb6;
  --dark: #2a1b21;
  --dark-soft: #d9c7cd;
  --dark-faint: #a9949c;

  --bloom: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20270%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M112%20264c-3-32-10-55-8-80%202-26%2013-45%2011-66-2-19-9-36-7-56%22%2F%3E%3Cpath%20d%3D%22M106%20196c-16-9-28-22-34-38%22%2F%3E%3Cpath%20d%3D%22M104%20186c-13-1-24-7-31-17%2012-4%2024%200%2032%209%22%2F%3E%3Cpath%20d%3D%22M116%20154c13-3%2023-11%2027-22-12-2-23%203-29%2013%22%2F%3E%3Cpath%20d%3D%22M108%20124c-12-2-21-8-26-17%2011-3%2021%201%2027%209%22%2F%3E%3Cpath%20d%3D%22M119%2096c11-4%2019-12%2021-22-11-1-20%205-24%2014%22%2F%3E%3Ccircle%20cx%3D%2270.0%22%20cy%3D%22149.8%22%20r%3D%226.0%22%2F%3E%3Ccircle%20cx%3D%2277.8%22%20cy%3D%22155.5%22%20r%3D%226.0%22%2F%3E%3Ccircle%20cx%3D%2274.8%22%20cy%3D%22164.6%22%20r%3D%226.0%22%2F%3E%3Ccircle%20cx%3D%2265.2%22%20cy%3D%22164.6%22%20r%3D%226.0%22%2F%3E%3Ccircle%20cx%3D%2262.2%22%20cy%3D%22155.5%22%20r%3D%226.0%22%2F%3E%3Ccircle%20cx%3D%2270.0%22%20cy%3D%22158.0%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22146.0%22%20cy%3D%22124.6%22%20r%3D%225.4%22%2F%3E%3Ccircle%20cx%3D%22153.0%22%20cy%3D%22129.7%22%20r%3D%225.4%22%2F%3E%3Ccircle%20cx%3D%22150.3%22%20cy%3D%22138.0%22%20r%3D%225.4%22%2F%3E%3Ccircle%20cx%3D%22141.7%22%20cy%3D%22138.0%22%20r%3D%225.4%22%2F%3E%3Ccircle%20cx%3D%22139.0%22%20cy%3D%22129.7%22%20r%3D%225.4%22%2F%3E%3Ccircle%20cx%3D%22146.0%22%20cy%3D%22132.0%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22101.0%22%20cy%3D%2262.6%22%20r%3D%227.0%22%2F%3E%3Ccircle%20cx%3D%22109.9%22%20cy%3D%2269.1%22%20r%3D%227.0%22%2F%3E%3Ccircle%20cx%3D%22106.5%22%20cy%3D%2279.6%22%20r%3D%227.0%22%2F%3E%3Ccircle%20cx%3D%2295.5%22%20cy%3D%2279.6%22%20r%3D%227.0%22%2F%3E%3Ccircle%20cx%3D%2292.1%22%20cy%3D%2269.1%22%20r%3D%227.0%22%2F%3E%3Ccircle%20cx%3D%22101.0%22%20cy%3D%2272.0%22%20r%3D%222.6%22%2F%3E%3C%2Fsvg%3E");
}

/* ---------- 2. Lilac ---------- */
[data-theme="lilac"] {
  --paper: #f7f5fa;
  --paper-2: #efebf5;
  --paper-3: #e5dfef;
  --paper-rgb: 247, 245, 250;
  --card: #fefdff;
  --card-2: #f9f6fd;

  --ink: #1e1a26;
  --ink-soft: #4e485c;
  --ink-faint: #756e86;

  --line: #dcd4e8;
  --line-soft: #e9e3f2;

  --accent: #7a67b0;
  --accent-deep: #584487;
  --accent-wash: #f0ebf9;
  --accent-line: rgba(122, 103, 176, .32);
  --accent-line-strong: rgba(122, 103, 176, .45);

  --num: #bdb2d1;
  --dark: #221c2e;
  --dark-soft: #d6cde4;
  --dark-faint: #a396b8;
}

/* ---------- 3. Sage ---------- */
[data-theme="sage"] {
  --paper: #f6f7f2;
  --paper-2: #edf0e7;
  --paper-3: #e1e7d9;
  --paper-rgb: 246, 247, 242;
  --card: #fdfefa;
  --card-2: #f8faf4;

  --ink: #1b231d;
  --ink-soft: #4a554c;
  --ink-faint: #6f7b70;

  --line: #d6dece;
  --line-soft: #e4eadd;

  --accent: #5b8a6e;
  --accent-deep: #3d6852;
  --accent-wash: #eaf1ea;
  --accent-line: rgba(91, 138, 110, .32);
  --accent-line-strong: rgba(91, 138, 110, .45);

  --num: #b2bfae;
  --dark: #1e2a22;
  --dark-soft: #cbd8ce;
  --dark-faint: #9dab9f;
}

/* ---------- 4. Floral ornaments ---------- */
/* Page header: a botanical sprig masked with the accent colour, so each
   theme tints it automatically. */
.page-head { position: relative; overflow: hidden; }
.page-head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(-40px, -2vw, 0px);
  width: clamp(170px, 23vw, 300px);
  height: clamp(220px, 30vw, 390px);
  transform: translateY(-50%) rotate(-3deg);
  background: var(--accent);
  -webkit-mask-image: var(--bloom);
  mask-image: var(--bloom);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: .125;
  pointer-events: none;
  z-index: 0;
}

/* Home: a pale sprig watermark inside the dark statement band, where it
   reads as printed texture rather than a mark on the photograph. */
.statement { position: relative; overflow: hidden; }
.statement::after {
  content: "";
  position: absolute;
  right: clamp(6px, 3vw, 40px);
  bottom: calc(-1 * clamp(20px, 4vw, 46px));
  width: clamp(140px, 17vw, 210px);
  height: clamp(180px, 22vw, 280px);
  background: #fff;
  -webkit-mask-image: var(--bloom);
  mask-image: var(--bloom);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
  opacity: .09;
  pointer-events: none;
  z-index: 0;
}
.statement > * { position: relative; z-index: 1; }

/* Footer: a pale watermark tucked into the corner. */
.site-footer::before {
  content: "";
  position: absolute;
  right: 3%;
  bottom: -12%;
  width: clamp(180px, 24vw, 300px);
  height: clamp(230px, 30vw, 380px);
  background: #fff;
  -webkit-mask-image: var(--bloom);
  mask-image: var(--bloom);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: .055;
  pointer-events: none;
}

/* Petal bullet in front of every caption: a soft leaf instead of a rule. */
figcaption::before {
  width: 9px;
  height: 9px;
  top: .52em;
  border-radius: 9px 0 9px 0;
  background: var(--accent);
  opacity: .55;
  transform: rotate(-12deg);
}

/* Entry numbers pick up the theme's quiet metallic tone. */
.entry__num { color: var(--num); }

/* ---------- 5. Theme switcher ---------- */
.theme-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  flex: 0 0 auto;
}
.theme-pick__dot {
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sw, #ccc);
  cursor: pointer;
  position: relative;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.theme-pick__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.theme-pick__dot:hover { transform: scale(1.14); }
.theme-pick__dot[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--sw, #999);
}
.theme-pick__dot[data-theme-value="peony"] { --sw: #b4586f; }
.theme-pick__dot[data-theme-value="lilac"] { --sw: #7a67b0; }
.theme-pick__dot[data-theme-value="sage"]  { --sw: #5b8a6e; }

@media (max-width: 900px) {
  .theme-pick { margin-left: 6px; padding-left: 10px; gap: 6px; }
  .theme-pick__dot { width: 15px; height: 15px; }
}