/* ============================================================
   assets/home-layout.css — 首頁「版面參考版」比較頁（index-layout.html，2026-10-14）
   只有 index-layout.html 載入，排在 site.css、home-2b.css、home-journal.css 之後。
   spec：docs/superpowers/specs/2026-10-14-strawflower-home-layout-design.md
   沿用 home-journal.css 的：.journal-jn（內容區 gutter）、.photo > img、≥768 收掉漢堡、.ribbon-jn*（線、退淡、
   手機隱藏）、.ul-jn* 的基礎樣式、.kept-jn*、.closing-jn*。這裡只寫這版自己的版面，class 一律帶 -ly 後綴。
   ============================================================ */

/* ---- 開場（spec §5.1）----
   container-type 讓 cqw ＝ 內容寬（.page-2b 最寬 1280，扣 gutter 後內容寬最多 1152）。
   --pw 是照片寬：內容寬 46%、第一屏高扣掉 160px 後的 3:4 寬、640px 三者取小，但不小於 26%——
   字標寬 1.334 ×（內容寬 − 照片寬），照片再窄字標就會超出內容寬。不支援 svh 時只用前兩者。
   字級 (100cqw − --pw) / 4.18：「Strawflower.」寬 5.577em（Nanum Myeongjo 實測），5.577 − 1.4 ≈ 4.18，
   所以字從內容左緣起、最後 1.4em（約「er.」）壓在照片上。
   --mark-fs 是字標字級（字標、開場那支 svg、小字的位移都用它）。--mark-base：行高 1 時基線離字框頂 .798em
   （24／89／149／188px 實測都一樣），用來把基線放在區塊高 70%（2026-10-15 使用者要字標再往下；原本 56%）。 */
/* 字型被擋（Google Fonts 載不到）時字標的後備字（審查 I-1）：字級、基線、小字、底線、壓照片的寬度都照 Nanum Myeongjo
   的量值算（「Strawflower.」寬 5.577em、行高 1 時基線在 .8em），換成本機字就整套跑掉——本機的 Noto Serif TC 寬 6.05em、
   基線 .93em，字標會比 70% 低 19px、底線跑到基線上面。所以後備字是兩個調過度量的本機字：size-adjust 把字寬縮放成
   Nanum 的寬（實測字寬比 Noto Serif TC Regular／Nanum 1.0841、Georgia／Nanum 1.0054），ascent／descent 設成 Nanum 的
   .8／.2——Chrome 會把 override 再乘上 size-adjust，所以先除掉。調過後 24–400px 字寬與 Nanum 差不到 .001em、行高 1 的
   基線一樣。兩個都沒有才是不調的 serif。 */
@font-face{font-family:"Strawflower Mark Noto";src:local("NotoSerifTC-Regular"),local("Noto Serif TC");font-weight:400;
  size-adjust:92.25%;ascent-override:86.72%;descent-override:21.68%;line-gap-override:0%}
@font-face{font-family:"Strawflower Mark Georgia";src:local("Georgia");font-weight:400;
  size-adjust:99.46%;ascent-override:80.43%;descent-override:20.11%;line-gap-override:0%}
.hero-ly__mark{font-family:"Nanum Myeongjo","Strawflower Mark Noto","Strawflower Mark Georgia",serif}

.hero-ly{--pw:max(26cqw,min(46cqw,640px));--mark-fs:calc((100cqw - var(--pw)) / 4.18);--mark-base:.798;
  position:relative;container-type:inline-size;padding:40px 0 56px}
@supports (height:100svh){
  .hero-ly{--pw:max(26cqw,min(46cqw,calc((100svh - 160px) * .75),640px))}
}
.hero-ly__photo{position:relative;z-index:1;margin:0 0 0 auto;width:var(--pw);aspect-ratio:3/4}
.hero-ly__photo > img{opacity:0;transition:opacity var(--motion-duration) var(--ease-out)}
.hero-ly__photo > img.is-on{opacity:1}
/* 字標疊在照片之上（z-index 2）；緞帶線在照片之下（0），所以壓在照片上那幾個字底下的線會被照片蓋住。 */
.hero-ly__mark{position:absolute;z-index:2;left:0;top:calc(70% - var(--mark-base) * 1em);margin:0;
  font-size:var(--mark-fs);font-weight:400;line-height:1;white-space:nowrap}
/* 小字在基線下 28px：字標底線在基線下約 .08em（最多約 15px），兩者不會碰。
   左緣右移 .07 倍字標字級，對齊「S」的墨跡（墨跡從字框往右 .054em 起，圓弧中段在 .074em）：
   貼著字框左緣時，視覺上小字比「S」突出一截（2026-10-15 使用者回饋）。 */
.hero-ly__tag{position:absolute;z-index:2;left:calc(var(--mark-fs) * .07);top:calc(70% + 28px);margin:0;font-size:14px;line-height:1.4}
/* 開場那支緞帶線（spec §6.1 第 1 段）：svg 頂端放在「基線下 .08em」、底端仍是區塊底——字標底線那一筆沿 svg 頂邊走，
   離基線的距離跟著字級等比（89px 時約 7px、149px 時約 12px、188px 時約 15px），不會因為區塊高度不同忽遠忽近。
   svg 的字級設成與字標相同，em 才對得上。 */
.hero-ly > .ribbon-jn{top:calc(70% + .08em);height:calc(30% - .08em);font-size:var(--mark-fs)}

/* ---- 引言（spec §5.2）：兩行置中；上下 160px：緞帶線沿引言右側下來，在引言下方的留白裡以寬緩的 S 彎轉到中間 ---- */
.quote-ly{position:relative;padding:160px 0;text-align:center}
.quote-ly__text{position:relative;z-index:1;margin:0;font-size:clamp(22px,2vw,28px);font-weight:300;line-height:1.7}
.quote-ly__text > span{display:block}

/* ---- 週記（spec §5.3）----
   100 欄格線（一欄＝內容寬 1%），grid-column n/m ＝ 第 n 條線到第 m 條線 ＝ (n−1)%～(m−1)%。
   照片 42 欄：在左 6/48（5～47%）、在右 53/95（52～94%）；文字 34 欄：56/90（55～89%）、10/44（9～43%）。
   缺角用 clip-path 切成 L 形，多出的那塊朝文字欄（參考圖的作法）；直排淡字貼照片外側邊緣的內側。
   2026-10-15 使用者：照片稍矮（Bloom 4:5 → 8:9、Season／Light 3:4 → 5:6）、缺角不要每張都等高、圖上的字大 10%。
   缺角切的高度是 --notch：Bloom 30%、Season 19%、Light 24%。Bloom 只加高、Season 只降低：Bloom 的線藏在凸出那塊
   後面，Season 的線要等凸出那塊結束才掃進缺角，這樣調，線不用重畫。 */
.entry-ly{position:relative;container-type:inline-size;display:grid;
  grid-template-columns:repeat(100,minmax(0,1fr));align-items:center;padding:120px 0}
.entry-ly__copy{position:relative;z-index:1;grid-row:1;grid-column:56/90}
.entry-ly__photo{position:relative;z-index:1;grid-row:1;grid-column:6/48;margin:0;aspect-ratio:5/6;--notch:24%;
  clip-path:polygon(0 0,100% 0,100% var(--notch),89% var(--notch),89% 100%,0 100%)}
.entry-ly--bloom .entry-ly__photo{aspect-ratio:8/9;--notch:30%}
.entry-ly--season .entry-ly__photo{--notch:19%}
.entry-ly--right .entry-ly__copy{grid-column:10/44}
.entry-ly--right .entry-ly__photo{grid-column:53/95;
  clip-path:polygon(0 0,100% 0,100% 100%,11% 100%,11% var(--notch),0 var(--notch))}
.entry-ly__mark{position:absolute;z-index:2;top:6%;left:.12em;writing-mode:vertical-rl;
  font-size:clamp(48.4px,6.16vw,92.4px);font-weight:400;line-height:1;letter-spacing:.04em;
  color:rgba(255,255,255,.72);pointer-events:none;user-select:none}
.entry-ly--right .entry-ly__mark{left:auto;right:.12em}
.entry-ly__stamp{margin:0;font-size:12px;line-height:1.4;color:rgba(0,0,0,.6)}
.entry-ly h2{margin:12px 0 0;font-size:16px;font-weight:700;line-height:1.5}
.entry-ly__body{margin-top:16px;display:flex;flex-direction:column;gap:16px;font-size:14px;line-height:1.8}
.entry-ly__body p{margin:0}

/* ---- 手機（<768，spec §8）---- */
@media (max-width:767px){
  /* 開場一欄：字標 → 小字 → 照片滿寬；不重疊，窄螢幕上字標壓照片會切掉字。字級讓 5.9em 塞進內容寬、最大 96px。 */
  .hero-ly{--mark-fs:min(calc((100vw - 48px) / 5.9),96px);padding:24px 0 40px}
  .hero-ly__mark{position:relative;top:auto;font-size:var(--mark-fs)}
  .hero-ly__tag{position:static;margin:20px 0 0 calc(var(--mark-fs) * .07)}
  .hero-ly__photo{width:100%;margin-top:32px}
  /* 字標底線（spec §6.4）：svg 頂＝基線；起筆在「S」墨跡（.05em 起）左 8px，收筆拖過句點墨跡（5.5em 止）24px，
     所以寬 5.45em ＋ 32px。波形落在基線下約 7–9.5px，最後 5% 往上挑。 */
  .ul-jn--hero{left:calc(.05em - 8px);top:calc(var(--mark-base) * 1em);width:calc(5.45em + 32px)}
  .quote-ly{padding:96px 0}
  .quote-ly__text{font-size:clamp(20px,calc((100vw - 60px) / 13),24px)}
  .entry-ly{padding:72px 0}
  .entry-ly .entry-ly__photo{grid-column:1/-1;grid-row:1}
  .entry-ly .entry-ly__copy{grid-column:1/-1;grid-row:2;margin-top:32px}
  .entry-ly__mark{font-size:clamp(39.6px,12.1vw,61.6px)}
  /* 留住只留 finale 一張（2026-10-15 使用者：兩張疊在一起怪）：這版的週記都是單張缺角照片，home-journal.css 手機版
     「大圖滿寬＋小圖 46% 上壓 48px」只剩這裡用到，顯得突兀。小張不顯示，替它在下方留的空間也收掉。 */
  .kept-jn__small{display:none}
  .kept-jn__pics{margin-bottom:0}
}

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