/* ============================================================
   assets/home-journal.css — 首頁（花藝手記，2026-10-13 選型定案）
   只有 index.html 載入，排在 site.css、home-2b.css 之後（同 specificity 的覆寫靠來源順序）。
   spec：docs/superpowers/specs/2026-10-13-strawflower-home-identity-design.md §6
   class 一律帶 -jn 後綴：比照 -2b，定案後它就是命名空間，刻意不重命名。
   緞帶線的樣式在檔尾（實作計畫 Task 4 加入）。
   ============================================================ */

/* 照片定位不靠 Tailwind：HTML 上的 absolute inset-0 w-full h-full object-cover 來自 CDN，
   CDN 被擋時 <img> 會以原尺寸撐開父層（BACKEND-HANDOFF §2.1 的實測）。本頁每個 .photo
   都是單張滿版圖，所以在這裡明寫一次；CDN 有載入時兩者等價。 */
.photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 內容區：左右 gutter 與 2b 三幕同值（--gutter-2b 來自 home-2b.css）。
   gutter 必須放在這一層而不是各區塊上：緞帶線的 SVG 以區塊的盒子為座標系，
   區塊沒有左右 padding，x% 才會等於「內容寬的百分比」。 */
.journal-jn{padding:0 var(--gutter-2b)}

/* ---- 頂欄選單（2026-10-14 細修）----
   本頁拿掉了 2b 的右側垂直選單（.side-nav），右上改用頂欄的水平選單，與 8 個內頁一致：
   site.js 偵測到本頁沒有 .side-nav，就給 [data-topnav] 加 .is-shown（≥768 顯示，見 site.css）。
   home-2b.css 在 768–1279 把漢堡強制顯示（給仍有 .side-nav 的 index-2b.html 用），這裡收回去：
   同為 (0,2,0)、本檔排在 home-2b.css 之後，靠來源順序勝出。<768 照舊是漢堡＋cart。 */
@media (min-width:768px){
  .nav-2b [data-open="menu"]{display:none}
}

/* ---- 開場（spec §6.1）---- */
.open-jn{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;padding:48px 0}
/* 底緣比照片底高 72px：flex-end 對齊的是 margin box，所以用 margin-bottom 表達。
   font-weight 明寫：h1 的 UA 預設是 bold，只有 Tailwind preflight 會把它歸零，CDN 掉了就變粗。
   字級上限 28px（2026-10-13 細修，原本 40px；使用者要小一點），2vw 在 1400 寬到頂。 */
.open-jn__quote{position:relative;z-index:1;flex:1 1 auto;min-width:0;margin:0 0 72px;
  font-size:clamp(22px,2vw,28px);font-weight:300;line-height:1.7}
.open-jn__quote > span{display:block}
/* 照片寬取三者最小：內容寬的一半／視窗高扣掉頂欄 80 與上下 48 之後的 3:4 寬／560px。
   560 由 1920×1080 那一格反推（spec §6.1 的表）：再寬，左欄就裝不下 40px 的第二行。
   字級降到 28px 之後左欄更有餘裕，上限沿用不動（照片大小是另一回事，不跟著字級改）。
   第一行是 svh 不支援時的退路 —— 整條 min() 失效的話 width 會變 auto，而 <img> 是 absolute、
   撐不開它，照片會變成 0 寬。 */
.open-jn__photo{position:relative;z-index:1;flex:none;margin:0;aspect-ratio:3/4;
  width:min(50%,560px);
  width:min(50%,calc((100svh - 176px) * .75),560px)}
.open-jn__photo > img{opacity:0;transition:opacity var(--motion-duration) var(--ease-out)}
.open-jn__photo > img.is-on{opacity:1}

/* ---- 週記（spec §6.2）----
   每則是 100 欄的格線：一欄＝內容寬的 1%，spec 表裡的百分比直接對應到欄線（n% → 第 n+1 條線）。
   container-type 讓裡面可以用 cqw 表達「內容寬的百分比」——小圖的高與壓入量都要用到它。 */
.entry-jn{position:relative;container-type:inline-size;display:grid;
  grid-template-columns:repeat(100,minmax(0,1fr));align-items:start;padding:120px 0}
.entry-jn__copy{position:relative;z-index:1;grid-row:1}
.entry-jn__pics{position:relative;z-index:1;grid-row:1}
.entry-jn__big{margin:0;aspect-ratio:3/4}
.entry-jn--bloom .entry-jn__big{aspect-ratio:4/5}
/* 小圖：19% 寬、3:4（高 ＝ 19 × 4/3 ＝ 25.333cqw），absolute 疊在大圖上，不加陰影、不加框。
   absolute 不佔版面，伸出大圖底下的那一截要由外框的 margin-bottom 補回來，否則會壓進下一則。 */
.entry-jn__small{position:absolute;z-index:2;margin:0;width:19cqw;aspect-ratio:3/4}

/* Bloom：大圖 0–42%；小圖 36–55%，比大圖底高 80px 開始；文字 57–87%，頂端 +120px */
.entry-jn--bloom .entry-jn__pics{grid-column:1/43;margin-bottom:calc(25.333cqw - 80px)}
.entry-jn--bloom .entry-jn__small{left:calc(100% - 6cqw);top:calc(100% - 80px)}
.entry-jn--bloom .entry-jn__copy{grid-column:58/88;margin-top:120px}
/* Season：文字 6–37%，頂端 +160px；大圖 58–100%（≥1280 時從右側選單底下經過，允許）；小圖 44–63% */
.entry-jn--season .entry-jn__copy{grid-column:7/38;margin-top:160px}
.entry-jn--season .entry-jn__pics{grid-column:59/101;margin-bottom:calc(25.333cqw - 80px)}
.entry-jn--season .entry-jn__small{left:-14cqw;top:calc(100% - 80px)}
/* Light：大圖 8–50%；小圖 45–64%，上緣比大圖高 48px；文字 56–87%，頂端＝小圖底緣＋32px */
.entry-jn--light .entry-jn__pics{grid-column:9/51}
.entry-jn--light .entry-jn__small{left:calc(100% - 5cqw);top:-48px}
.entry-jn--light .entry-jn__copy{grid-column:57/88;margin-top:calc(25.333cqw - 16px)}

.entry-jn__stamp{margin:0;font-size:12px;line-height:1.4;color:rgba(0,0,0,.6)}
.entry-jn h2{margin:12px 0 0;font-size:16px;font-weight:700;line-height:1.5}
.entry-jn__body{margin-top:16px;display:flex;flex-direction:column;gap:16px;font-size:14px;line-height:1.8}
.entry-jn__body p{margin:0}

/* ---- 留住（spec §6.3）：finale 置中 42%，dried-scene 壓左上（15–34%），無文字 ---- */
.kept-jn{position:relative;container-type:inline-size;padding:120px 0}
.kept-jn__pics{position:relative;z-index:1;width:42cqw;margin:0 auto}
.kept-jn__big{margin:0;aspect-ratio:3/4}
.kept-jn__small{position:absolute;z-index:2;margin:0;width:19cqw;aspect-ratio:3/4;left:-14cqw;top:-48px}

/* ---- 收尾（spec §6.4）：文字疊在緞帶線（z-index 0）之上 ---- */
.closing-jn{position:relative;padding:96px 0 120px;text-align:center}
.closing-jn p{position:relative;z-index:1;margin:0}
.closing-jn p:first-of-type{font-size:20px;line-height:1.7}
.closing-jn p + p{margin-top:12px;font-size:24px}

/* ---- 緞帶線（spec §6.5–6.6）----
   每個區塊（開場、三則週記、留住、收尾）的第一個子元素是一支 svg.ribbon-jn，疊滿該區塊。
   viewBox 0–100 × 0–100 配 preserveAspectRatio="none"：path 的座標就是區塊寬／高的百分比，
   與 .entry-jn 的 100 欄格線同一個座標系。相鄰區塊的 path 在交界處 x 相同、y 為 100／0，連成一條。
   z-index 0：照片與文字都是 1，線從照片背後穿過；path 本身繞開所有文字盒（實作計畫 Task 4 的取樣檢查）。
   這裡不給任何 dash：無 JS、或 reduce 時 home-journal.js 不啟動，線就是一整條實線（完成態）。
   描線的 dash 由 home-journal.js 以「螢幕 px」設定，**不能**沿用 .pen-ul 的 pathLength="1"＋dasharray 1 2：
   Chrome 對 non-scaling-stroke 的 dash 以螢幕 px 計算，pathLength 卻以 user space 長度換算，
   這裡一個 user 單位約 8–11px（.pen-ul 約 1px，所以那邊看不出來），線會碎成一截一截的虛線
   （2026-10-13 實測：開場那段 268px 的線只畫出 4 小截）。
   #pen-ink 掛在 svg 上、不掛在 path 上：濾鏡的位移量（scale 1.1）以「引用它的元素的座標系」計，
   掛在 path 上是 viewBox 單位（約 10px），線會被扯成毛邊；掛在 svg 上是 CSS px，
   手感與 .pen-ul 的鋼筆底線相同（那邊一個 user 單位約 1px）。實測捲動仍是 60fps（mean 16.7ms）。 */
.ribbon-jn{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none;
  filter:url(#pen-ink)}
.ribbon-jn path{fill:none;stroke:var(--color-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
/* 退淡（2026-10-14 細修，借 Lemonade Giveback 2019）：描線接管後，畫過的線降成 25% 的淡墨（底色上 ≈ #B5B3B3），
   home-journal.js 在筆尖往回 400px 內疊上幾條同一條 d 的線（.ribbon-jn__ink），把那一截補回全墨、再一階一階退淡。
   只掛在 .ribbon-scrub 底下：無 JS、reduce 都不加這個 class，照舊是整條全墨的完成態。
   線在照片與文字底下（z-index 0），看得到的地方底色都是 --color-surface，所以用不透明度與用混色等價。
   疊線用 butt 端點：每條都從筆尖往回算、一層套一層，圓頭會在每階的起點多疊出一個深一點的半圓；
   只有最深的那條（--tip，不透明度 1）留圓頭，蓋住筆尖。 */
.ribbon-scrub .ribbon-jn__d{stroke-opacity:.25}
.ribbon-jn .ribbon-jn__ink{stroke-linecap:butt}
.ribbon-jn .ribbon-jn__ink--tip{stroke-linecap:round}
/* 手機（<768）不畫緞帶線（2026-10-14 細修）：窄螢幕上它只能貼著左側 24px 邊欄從頭垂直走到尾，
   離文字與照片只有 11px，加上手寫起伏後看起來像一條歪掉的邊框。改成只在引言第二行下、字標下各留一筆
   底線（.ul-jn）—— 與連結 hover 的鋼筆底線同一套：同一種波形、1.6px、#pen-ink 掛在 path 上，
   進入畫面時由 home-journal.js 由左往右畫出來，只畫一次。 */
.ul-jn{display:none}
@media (max-width:767px){
  .ribbon-jn__d,.ribbon-jn__ink{display:none}
  .ul-jn{display:block;position:absolute;height:13px;overflow:visible;pointer-events:none}
  .ul-jn path{fill:none;stroke:var(--color-ink);stroke-width:1.6;stroke-linecap:butt;
    vector-effect:non-scaling-stroke;filter:url(#pen-ink)}
  /* 兩筆底線都不剛好貼著字（2026-10-14 細修，借 Envisioning Justice）：起筆比字早一點、收筆拖過字一點。
     path 從 x 0 畫到 x 100，所以 svg 的左緣與寬度就是起筆與收筆的位置。 */
  /* 引言那筆在 h1 底（第二行的行盒底）下 4px：波形落在西文基線下約 11–13px。中文字身會伸到基線下 3–4px，
     所以離字底其實約 7–10px，與字標那筆（西文，字底就是基線）看起來同一種距離；再往上提就會貼到字。
     劃在「都有一個感人的故事」下：起筆在第一字左 6px，收筆拖過「事」10px。寬度跟著字級走 ——
     9 字 ＝ 9em ＋ 9 × 字距 .7（6.3px），再加前後的 6 與 10，所以 calc(9em + 22px)；svg 在 h1 裡，em 就是 h1 的字級。
     （原本是 h1 寬的 62%：320 寬停在「故」、390 寬停在「事」的正中間、767 寬超出整行 118px。） */
  .ul-jn--quote{left:-6px;bottom:-4px;width:calc(9em + 22px)}
  /* 字標基線在收尾區塊頂下 168px（實測，各寬度相同）；svg 頂也放在 168px，波形落在基線下約 7–9px，
     與桌機那筆（基線下約 8px）同高；收筆往上挑到基線下約 3px。字標 24px 寬 134px、置中：
     起筆在字左 8px（50% − 67 − 8），收筆拖過句點 30px（寬 8 ＋ 134 ＋ 30 ＝ 172）。 */
  .ul-jn--mark{left:calc(50% - 75px);top:168px;width:172px}
}
/* 畫之前先藏起來（home-journal.js 啟動時才加 .ul-draw；無 JS 或 reduce 時是實線） */
.ul-draw .ul-jn path{opacity:0}

@media (max-width:767px){
  .journal-jn{padding:0 24px}
  .open-jn{flex-direction:column;align-items:stretch;gap:32px;padding:32px 0 48px}
  /* 第二行 13 字要單行：13 ×（字級＋字距 .7）≤ 視窗寬 − 48。24px 時第二行 321px，要 370 寬的視窗，
     360 的手機會把「福」擠到下一行。(100vw − 60px) / 13 留約 3px 餘裕：375 起是 24px，320 時 20px。 */
  .open-jn__quote{margin:0;font-size:clamp(20px,calc((100vw - 60px) / 13),24px)}
  .open-jn__photo{width:100%}
  /* 一欄：大圖滿寬 → 小圖 46% 靠右、上壓 48px → 文字。三則一致，不再鏡像。 */
  .entry-jn{padding:80px 0}
  .entry-jn .entry-jn__pics{grid-column:1/-1;grid-row:1;margin-bottom:calc(46cqw * 4 / 3 - 48px)}
  .entry-jn .entry-jn__small{left:auto;right:0;top:calc(100% - 48px);width:46cqw}
  .entry-jn .entry-jn__copy{grid-column:1/-1;grid-row:2;margin-top:32px}
  .kept-jn{padding:80px 0}
  .kept-jn__pics{width:100%;margin-bottom:calc(46cqw * 4 / 3 - 48px)}
  .kept-jn__small{left:auto;right:0;top:calc(100% - 48px);width:46cqw}
}

@media (prefers-reduced-motion:reduce){
  .open-jn__photo > img{transition:none}
}