/*
  版本更新記錄：
    20260812  建立 基礎樣式與色票：
                - 全案色票以 CSS 變數定義，禁止各處硬編碼色值
                - box-sizing 與 overflow-x 基礎重設，防手機橫向捲動
              實作 A 版溫柔典雅視覺：置中對稱單欄、西文大字日期、
              金線菱形分隔、底線式表單，段落間距統一走 --space
              實作 相簿版型：手機橫向 snap 卡片、桌機三欄網格
              實作 微動畫：逐字浮現、滾動進場、分隔線描邊、背景呼吸
              新增 導航按鈕的填色 hover／focus 狀態
              修正 option 字重外溢造成整組中文字體 subset 白載
              調整 hero 姓名字重 200 改 300，配合字體字重宣告收斂
              調整 章節間距收斂：--space 上限 6rem 改 3.5rem、
              分隔線下距 2.5rem 改 1.8rem，縮短整頁捲動距離
              修復 相簿放實照後破版：img 改 cover 填滿卡框；
              桌機網格軌道改 minmax(0, 1fr) 防內在尺寸撐爆
              新增 N. 相簿燈箱疊層樣式：圖片 contain 不裁切、關閉與左右鈕
              最小 44px 觸控區；未開啟時以 visibility 隱藏避免 Tab 掉進疊層
              修正 左右鈕改以 data-lb-frame（＝照片）為定位參照，桌機置於圖外
              側 3.4rem、手機貼內緣加淡圓底；圖片上限收 84vw 留出兩側走道
              調整 燈箱按鈕偏小：箭頭字級改 3rem／桌機 3.6rem、✕ 改 2.2rem，
              觸控區下限 44px 提高為 52px，桌機外側距離隨之改 4.4rem
              新增 燈箱切換過場：淡出時朝行進反方向位移 14px，.18s
              修正 按鈕改固定 56×56 並以 flex 置中內容：先前寬用 min-width、
              高被字級撐開，圓底被拉成橢圓且箭頭未落在中心
              修正 左鈕過場中閃爍：picture 帶 transform 會被提升為合成層，
              同層無 z-index 時依 DOM 順序蓋住排在它前面的左鈕，兩鈕補 z-index
              調整 箭頭圓底由米色 .14 改墨色 .45：米箭頭配米底看不出來
              調整 桌機箭頭判定區擴為貼齊照片外緣的垂直帶（以 1440 為基準
              取 min(10rem,12vw)、高 84%），箭頭以 flex 靠齊照片側故位置不變；
              疊層加 overflow: hidden，窄視窗外緣超出的部分裁掉不撐出捲動
              新增 RSVP 狀態列 white-space: pre-line，讓成功訊息的第二行成立
              更新 hero 日期與倒數天數改 Playfair Display——Cormorant 的 1 無底座、
              0 為正橢圓，放大後被讀成 II.OI；eyebrow 的英文斜體仍留 Cormorant
              還原 姓名維持 Noto Serif TC 300 與 .16em 字距，--f-name 變數移除
              新增 hero 底部向下捲動提示：金色細線箭頭，呼吸走 opacity 與微幅下沉，
              置中的 translateX 須寫進 keyframes 否則動畫會蓋掉而向左偏
              新增 dd 加 white-space: pre-line，content.js 的值可用 \n 自行分行
              修正 手機相簿首張無法置中：卡寬與內距改用同一把尺（--card 走 vw），
              百分比的 padding 與 flex-basis 基準不同，混用補不準；同時新增
              圓點指示器樣式，桌機三欄不受影響（指示器隱藏）
    20260813  更新 燈箱改沿用卡框的 3/4 裁切：橫式照片放大後不再變成另一個構圖，
              素材不重產（1200px 裁 3/4 仍有 600×800，大於燈箱顯示尺寸）
              新增 O. 手機專屬密度：RSVP 三個數字欄併成一列、間距收斂，
              整張表單含送出鈕原本比一屏高 226px，最後的欄位落在畫面外
*/

/* --- A. 色票與排版基準 --- 全案唯一色值來源 20260812 */
:root {
  --c-cream: #F7F2EA;
  --c-cream-2: #EFE6D9;
  --c-rose: #D9A9A0;
  --c-rose-deep: #C08B82;
  --c-ink: #4A3F3A;
  --c-gold: #B08B5E;

  --f-serif: 'Noto Serif TC', serif;
  --f-sans: 'Noto Sans TC', sans-serif;
  --f-display: 'Cormorant Garamond', serif;   /* 僅 hero eyebrow 的英文斜體在用，正體已無人使用 20260812 */
  --f-num: 'Playfair Display', serif;         /* 大字數字專用：Cormorant 的 1 無底座、0 為正橢圓，讀成 II.OI 20260812 */

  --space: clamp(2rem, 6vw, 3.5rem);       /* 留白撐氣質但捲動過長，上限收斂近半 20260812 */
  --pad-x: clamp(1.5rem, 6vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

/* --- B. 基礎重設 --- overflow-x 是手機破版的第一道防線 20260812 */
html {
  background: var(--c-cream);   /* 底色只由 html 畫，body 自畫會蓋掉呼吸層 20260812 */
}

html, body {
  margin: 0;
  overflow-x: hidden;
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: 17px;   /* 長輩也會看，內文字級不因美觀退讓 */
  line-height: 2;
  font-weight: 300;
}

img { max-width: 100%; display: block; }

section, footer {
  padding: var(--space) var(--pad-x);
  text-align: center;
}

/* --- C. 標題與分隔 --- 字距一律配對 text-indent，否則置中會被尾端字距推偏左 20260812 */
h2 {
  margin: 0 0 .5rem;
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  letter-spacing: .35em;
  text-indent: .35em;
}

/* 分隔線本體由 motion.js 於 Task 4 插入，此處只備妥靜態外觀 */
[data-divider] {
  display: block;
  width: min(180px, 55%);
  margin: 1rem auto 1.8rem;   /* 隨 --space 收斂，標題與內容距離同步縮 20260812 */
}
[data-divider] line {
  stroke: var(--c-gold);
  stroke-width: 1;
  /* dasharray 需 ≥ 線段長 86，否則收不滿會留下缺口 */
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  transition: stroke-dashoffset 1.2s ease .2s;
}
[data-divider] rect {
  fill: var(--c-rose);
  opacity: 0;
  transition: opacity .6s ease 1s;   /* 等金線畫完，菱形才亮起 */
}
[data-divider].is-visible line { stroke-dashoffset: 0; }
[data-divider].is-visible rect { opacity: 1; }

/* --- D. Hero --- 滿版首屏，西文大字日期是視覺主體 20260812 */
#hero {
  min-height: 100svh;
  position: relative;   /* 向下捲動提示以此為定位錨點 20260812 */
  display: grid;
  place-content: center;
  gap: 1.2rem;
  padding-block: var(--space);
  background:
    radial-gradient(70% 50% at 50% 22%, var(--c-cream-2), transparent 72%),
    var(--c-cream);
}
#hero .eyebrow {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: .3em;
  color: var(--c-rose-deep);
}
#hero h1 {
  margin: 0;
  /* 草稿用 200。中文字體每多宣告一組字重就多下載一整批 subset，
     而 200 與 300 在此字級下肉眼幾乎無差，故統一 300 20260812 */
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 8.4vw, 3.4rem);
  letter-spacing: .16em;
  text-indent: .16em;
  line-height: 1.5;
  text-wrap: balance;
}
#hero h1 .n { white-space: nowrap; }   /* 姓名不得被拆行，否則出現「陳小／美」 */
#hero h1 .amp { color: var(--c-rose); font-size: .62em; vertical-align: .12em; }
#hero .date {
  margin: .4rem 0 0;
  font-family: var(--f-num);
  font-weight: 400;
  font-size: clamp(3rem, 17vw, 5.5rem);
  line-height: 1;
  letter-spacing: .06em;
  color: var(--c-gold);
}
/* 中文日期用固定字級：跟著上方大數字等比縮放會掉到 12px 以下 */
#hero .date small {
  display: block;
  margin-top: 1.3rem;
  font-family: var(--f-sans);
  font-size: .95rem;
  letter-spacing: .32em;
  text-indent: .32em;
  color: var(--c-ink);
}
#hero .tagline { margin: 1.6rem 0 0; font-size: .95rem; letter-spacing: .12em; }

/* 向下捲動提示：金色沿用分隔線與大字日期的語彙；呼吸同時走 opacity 與微幅下沉，
   置中的 translateX 必須寫進 keyframes，否則動畫會把它蓋掉而向左偏 20260812 */
[data-scroll-cue] {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  width: 36px;
  height: 36px;
  color: var(--c-gold);
  transform: translateX(-50%);
  animation: cue-breathe 2.1s ease-in-out infinite;
}
@keyframes cue-breathe {
  0%, 100% { opacity: .3;  transform: translate(-50%, 0); }
  50%      { opacity: .85; transform: translate(-50%, 7px); }
}

/* --- E. 倒數 --- 次階米底與 hero 分段 20260812 */
#countdown { background: var(--c-cream-2); }
#countdown .label { margin: 0; font-size: .85rem; letter-spacing: .3em; }
#countdown .num {
  margin: .3rem 0 0;
  font-family: var(--f-num);   /* 倒數天數同為數字，與 hero 大字一起換掉 20260812 */
  font-size: clamp(3.2rem, 15vw, 5rem);
  line-height: 1.1;
  color: var(--c-rose-deep);
}
#countdown .num em { font-style: normal; font-size: .28em; letter-spacing: .2em; }

/* --- F. 相簿 --- 手機一次看一張卡、可左右滑；桌機三欄一次看完 20260812 */
[data-gallery] {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* 負邊距讓卡片列貼齊螢幕邊緣，露出下一張才知道還能滑 */
  margin-inline: calc(var(--pad-x) * -1);
  /* 內距＝(視寬 − 卡寬)/2，首張與末張才有餘裕讓 snap center 成立；固定 --pad-x
     的話首張只能貼左。兩者都必須用 vw：padding 的百分比基準是父層寬度、
     flex-basis 的是容器 content box，混用會差幾十 px 而補不準 20260812 */
  --card: 74vw;
  padding-inline: calc((100vw - var(--card)) / 2);
  scrollbar-width: none;
}
[data-gallery]::-webkit-scrollbar { display: none; }

[data-gallery] figure {
  flex: 0 0 var(--card);
  scroll-snap-align: center;
  margin: 0;
  position: relative;   /* 照片絕對定位的錨點 20260812 */
  transition: transform .5s ease, box-shadow .5s ease;
  background: var(--c-cream-2);
  border: 1px solid var(--c-rose);
  display: grid;
  place-items: center;
}
/* 實照填滿卡框、超出置中裁切；佔位框無 img 不受影響 20260812
   絕對定位跳過網格軌道計算——height:100% 在 auto 軌道內解析不穩 */
[data-gallery] picture { position: absolute; inset: 0; }
[data-gallery] img { width: 100%; height: 100%; object-fit: cover; }

/* 圓點指示器：手機橫捲一次只看得到一張，沒有它就不知道還有幾張 20260812 */
[data-gallery-dots] {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.1rem;
}
[data-gallery-dots] i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-rose-deep);
  opacity: .28;
  transition: opacity .3s ease, transform .3s ease, background-color .3s ease;
}
[data-gallery-dots] i.is-on {
  opacity: 1;
  background: var(--c-gold);
  transform: scale(1.25);
}

[data-gallery] figcaption {
  color: var(--c-rose-deep);
  font-size: .9rem;
  letter-spacing: .2em;
}
[data-gallery] figcaption small {
  display: block;
  font-size: .72rem;
  letter-spacing: .05em;
  opacity: .8;
}

/* --- G. 定義列表 --- 資訊段是全站最重要的內容，字級不縮 20260812 */
dl { max-width: 26rem; margin: 0 auto; text-align: left; }
dl div {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: .6rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(176, 139, 94, .25);
}
dt { color: var(--c-rose-deep); font-size: .9rem; letter-spacing: .2em; }
/* pre-line 讓 content.js 的值能用 \n 自行分行（如開車兩條國道），
   其餘空白與縮排照常摺疊，故不影響其他列 20260812 */
dd { margin: 0; white-space: pre-line; }
.note { margin-top: 1.6rem; font-size: .88rem; color: rgba(74, 63, 58, .75); }

#location dl { margin-top: 2rem; }

/* --- H. 地圖與導航 --- DOM 於 Task 6 產出，此處備妥外觀 20260812 */
[data-map] {
  aspect-ratio: 4 / 3;
  max-width: 40rem;
  margin: 0 auto 1.4rem;
  border: 1px solid var(--c-rose);
  overflow: hidden;
}
[data-map] iframe { width: 100%; height: 100%; border: 0; }

a[data-nav] {
  display: inline-block;
  min-height: 48px;                  /* 觸控目標，長輩點不到就等於沒有 */
  padding: .85rem 2.6rem;
  background: transparent;
  color: var(--c-gold);
  border: 1px solid var(--c-gold);
  font-size: .9rem;
  letter-spacing: .3em;
  text-indent: .3em;
  text-decoration: none;
  transition: background .3s ease, color .3s ease;
}
a[data-nav]:hover,
a[data-nav]:focus-visible { background: var(--c-gold); color: var(--c-cream); }

/* --- I. RSVP 表單 --- DOM 於 Task 7 產出，此處備妥外觀 20260812 */
form[data-rsvp] {
  display: grid;
  gap: 1.1rem;
  max-width: 26rem;
  margin: 0 auto;
  text-align: left;
}
form[data-rsvp] label {
  display: grid;
  gap: .4rem;
  font-size: .9rem;
  letter-spacing: .12em;
  color: var(--c-rose-deep);
}
form[data-rsvp] input,
form[data-rsvp] select,
form[data-rsvp] textarea {
  min-height: 46px;
  padding: .6rem .9rem;
  font: inherit;
  font-size: 16px;                   /* 低於 16px 時 iOS Safari 一聚焦就放大整頁 */
  color: var(--c-ink);
  background: var(--c-cream);
  border: 0;
  border-bottom: 1px solid var(--c-rose);
}
form[data-rsvp] textarea { min-height: 5rem; resize: vertical; }
/* option 不繼承 select 的字重，會用預設 400 而多拖一整組中文 subset；
   下拉選單的字實際由作業系統畫，載了也用不到 20260812 */
form[data-rsvp] option { font-weight: inherit; }
form[data-rsvp] button {
  min-height: 50px;
  margin-top: .6rem;
  font: inherit;
  font-size: .95rem;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--c-cream);
  background: var(--c-rose-deep);
  border: 0;
  cursor: pointer;
}
form[data-rsvp] button:disabled { opacity: .5; cursor: default; }
/* pre-line 讓 content.js 的 \n 換行成立；訊息走 textContent，不用 innerHTML 20260812 */
[data-rsvp-status] { min-height: 1.6em; color: var(--c-rose-deep); white-space: pre-line; }

/* --- J. 頁尾 --- 20260812 */
footer {
  background: var(--c-cream-2);
  font-size: .88rem;
  letter-spacing: .12em;
}
footer p { margin: .3rem 0; }

/* --- K. 桌機版型 --- 相簿改三欄網格，不再橫捲 20260812 */
@media (min-width: 641px) {
  [data-gallery] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* 1fr 最小值是 auto，會被 img 內在寬度撐爆 20260812 */
    overflow-x: visible;
    max-width: 46rem;
    margin-inline: auto;
    padding-inline: 0;
  }
  [data-gallery] figure { flex: none; }
  [data-gallery-dots] { display: none; }   /* 桌機是網格、六張全在畫面上，指示器沒有意義 20260812 */
}

/* --- O. 手機專屬密度 --- 只在手機生效，桌機版型不受影響 20260813 */
@media (max-width: 640px) {
  /* 出席／素食／兒童座椅三個數字欄併成一列：原本各佔一列共 310px，
     整張表單含送出鈕比一屏高 226px，最後的欄位落在畫面外看不到 */
  form[data-rsvp] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .72rem;
  }
  form[data-rsvp] textarea { min-height: 4.4rem; }
  form[data-rsvp] button { margin-top: .2rem; }
  form[data-rsvp] > * { grid-column: 1 / -1; }
  form[data-rsvp] > label:nth-of-type(3),
  form[data-rsvp] > label:nth-of-type(4),
  form[data-rsvp] > label:nth-of-type(5) {
    grid-column: auto;
    /* 標籤不得折行（最長的是「出席人數（含本人）」），字級因此得跟著欄寬走：
       窄機自動縮到剛好一行，寬機才吃到 .85rem 上限 20260813 */
    font-size: min(.85rem, 2.95vw);
    letter-spacing: 0;      /* 最長那欄靠取消字距才收得進欄寬，不必再犧牲字級 */
    white-space: nowrap;
    align-content: end;     /* 三個輸入框對齊底部 */
  }
  form[data-rsvp] > label:nth-of-type(3) input,
  form[data-rsvp] > label:nth-of-type(4) input,
  form[data-rsvp] > label:nth-of-type(5) input { padding-inline: .5rem; }
  [data-gallery] figure:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 32px rgba(74, 63, 58, .18);
  }
}

/* --- L. 微動畫 --- 僅動 transform 與 opacity，不觸發 reflow 20260812 */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

#hero h1 .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
#hero h1.is-visible .char { opacity: 1; transform: none; }

/* 背景光暈呼吸：週期 14s，慢到幾乎察覺不出在動才叫氛圍 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 30%, var(--c-cream-2), transparent 70%);
  animation: breathe 14s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }

/* --- M. 無障礙 --- 暈眩體質使用者一律看靜態版 20260812 */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], #hero h1 .char {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* 線畫完的靜態樣子照樣要看得到，只是不做「畫」的過程 */
  [data-divider] line { stroke-dashoffset: 0 !important; transition: none !important; }
  [data-divider] rect { opacity: 1 !important; transition: none !important; }
  body::before { animation: none; }
  /* 提示本身仍要看得見，只是不做呼吸 */
  [data-scroll-cue] { animation: none; opacity: .6; }
  [data-gallery] figure { transition: none; }
  [data-gallery] figure:hover { transform: none; }
}

/* --- N. 相簿燈箱 --- 卡框裁切過，放大時改 contain 還原完整構圖 20260812 */
[data-gallery] figure { cursor: zoom-in; }
[data-gallery] figure[data-placeholder] { cursor: default; }
[data-gallery] figure:focus-visible { outline: 2px solid var(--c-rose-deep); outline-offset: 3px; }

[data-lightbox] {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  background: rgba(74, 63, 58, .93);
  opacity: 0;
  visibility: hidden;   /* 未開啟時不可聚焦，單靠 opacity 會讓 Tab 掉進疊層 20260812 */
  transition: opacity .3s ease, visibility .3s;
}
[data-lightbox].is-open { opacity: 1; visibility: visible; }

/* frame 收縮至圖片實寬，左右鈕才有得依附；圖片上限留 84vw 給兩側走道 20260812 */
[data-lb-frame] { position: relative; display: inline-block; line-height: 0; }
/* 切換過場：淡出時朝行進反方向微移，時間須與 lightbox.js 的 FADE_MS 一致 20260812
   放大後沿用卡框的 3/4 裁切，橫式照片不會忽然變成另一個構圖；不重產素材，
   1200px 原圖裁 3/4 後仍有 600×800，大於燈箱最大顯示尺寸 20260813 */
[data-lightbox] picture {
  display: block;
  aspect-ratio: 3 / 4;
  height: min(84vh, calc(84vw * 4 / 3));
  transition: opacity .18s ease, transform .18s ease;
}
[data-lightbox] picture.is-out {
  opacity: 0;
  transform: translateX(var(--lb-shift, 0));
}
[data-lightbox] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}

/* 寬高固定成正方，圓底才是正圓；字級撐高度會把 border-radius 拉成橢圓 20260812 */
[data-lightbox] button {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;        /* 長輩用手機點得到才算數 */
  height: 56px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  opacity: .75;
  transition: opacity .2s ease;
}
[data-lightbox] button:hover, [data-lightbox] button:focus-visible { opacity: 1; }
/* 左右鈕以 frame（＝照片）為參照，不以視窗；掛視窗上會被推到螢幕邊角與照片失聯 20260812
   手機沒有外側走道，改貼圖片內緣並加淡色圓底與照片分離 */
[data-lb-frame] [data-lb-prev], [data-lb-frame] [data-lb-next] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;   /* 過場中 picture 帶 transform 會被提升，沒有 z-index 時按 DOM 順序蓋住排在它前面的左鈕 20260812 */
  border-radius: 50%;
  background: rgba(74, 63, 58, .45);   /* 米色箭頭配米色底看不出來，底改墨色才有對比 20260812 */
}
[data-lb-frame] button svg {
  width: 30px;
  height: 30px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}
[data-lb-frame] [data-lb-prev] { left: .3rem; }
[data-lb-frame] [data-lb-next] { right: .3rem; }

@media (min-width: 721px) {
  [data-lightbox] { overflow: hidden; }   /* 判定帶延伸出視窗的部分要裁掉，否則撐出橫向捲動 20260812 */
  [data-lb-frame] button svg { width: 34px; height: 34px; filter: none; }
  /* 判定區以 1440 為基準抓 160px：定位用 right/left:100% 貼住照片邊緣往外長，
     箭頭以 flex 靠齊照片側，圖形位置不隨寬度改變；窄視窗放大橫式圖時
     外側空間不足，超出的部分由疊層的 overflow: hidden 裁掉 20260812 */
  [data-lb-frame] [data-lb-prev], [data-lb-frame] [data-lb-next] {
    width: min(10rem, 12vw);
    height: 84%;
    border-radius: 0;
    background: none;
  }
  [data-lb-frame] [data-lb-prev] {
    left: auto;
    right: 100%;
    justify-content: flex-end;
    padding-right: .5rem;
  }
  [data-lb-frame] [data-lb-next] {
    right: auto;
    left: 100%;
    justify-content: flex-start;
    padding-left: .5rem;
  }
}
[data-lightbox] [data-lb-close] {
  position: absolute;
  top: .5rem;
  right: .6rem;
  font-size: 2.2rem;
}

@media (prefers-reduced-motion: reduce) {
  [data-lightbox], [data-lightbox] picture { transition: none; }
}