/* EROS LIN｜展覽主視覺 */
:root {
  --wall: #f2ede4;
  --ink: #1a1a1a;
  --ink-2: #4a4640;
  --ink-3: #6f6a62;
  --line: #1a1a1a;
  --hair: #cfc7b8;
  --field: #c8412b;
  --sky: #f4f1eb;
  --select: #f3c9bf;
  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --display: "Barlow Condensed", "Noto Sans TC", "Arial Narrow", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --strip: 112px;
  --gutter: clamp(16px, 3vw, 40px);
  /* 巨名字級＝展牆可用高度 ÷ 字形總長（EROS LIN 於 Barlow Condensed 800 約 3.21em，實測） */
  --name-size: clamp(88px, calc((100svh - var(--strip) - var(--gutter)) / 3.22), 360px);
  --name-col: calc(var(--name-size) * .8);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wall: #191714; --ink: #efe9de; --ink-2: #c9c2b5; --ink-3: #9d968a;
    --line: #efe9de; --hair: #3b3631; --field: #d2513a; --select: #5a2a22; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wall: #191714; --ink: #efe9de; --ink-2: #c9c2b5; --ink-3: #9d968a;
  --line: #efe9de; --hair: #3b3631; --field: #d2513a; --select: #5a2a22; color-scheme: dark;
}

@view-transition { navigation: auto; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wall); color: var(--ink); font-family: var(--font); line-height: 1.7; }
::selection { background: var(--select); color: var(--ink); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--field); outline-offset: 3px; border-radius: 2px; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 全站連結：朱紅 2px 底線 */
.ul { text-decoration: none; border-bottom: 2px solid var(--field); padding-bottom: 1px; transition: color .3s var(--ease); }
.ul:hover { color: var(--field); }
.arrow { display: inline-block; transition: transform .35s var(--ease); }
a:hover .arrow { transform: translateX(5px); }

/* ---------- 展牆（首頁第一眼） ---------- */
.wall {
  min-height: 100svh;
  display: grid;
  grid-template-columns: var(--name-col) 1fr;
  grid-template-rows: 1fr var(--strip);
  column-gap: var(--gutter);
  padding: var(--gutter) var(--gutter) 0;
}
.name {
  grid-row: 1;
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  writing-mode: vertical-rl;
  font-size: var(--name-size);
  line-height: .8;
  letter-spacing: -.005em;
  white-space: nowrap;
  view-transition-name: eros;
}
.kv { position: relative; margin: 0; background: var(--sky); overflow: hidden; min-height: 320px; }
.kv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.kv-line {
  position: absolute;
  left: clamp(12px, 2.4vw, 40px);
  top: clamp(12px, 2.6vw, 40px);
  max-width: 19em;
  margin: 0;
  color: #1a1a1a;
  font-size: clamp(22px, 2.5vw, 40px);
  font-weight: 900;
  line-height: 1.4;
  text-wrap: balance;
  padding: .5em .7em .6em;
  background: rgba(244, 241, 235, .7);
  box-shadow: 0 8px 24px rgba(26, 26, 26, .18);
}
.kv-line span { display: inline-block; }
.kv-line::after { content: ""; display: block; width: 3em; height: 5px; margin-top: .5em; background: #c8412b; }

.strip {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  display: flex;
  align-items: center;
}
.strip::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line);
  transform-origin: left;
}
.now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 22px; }
.now-label { font-size: 14px; color: var(--ink-3); letter-spacing: .12em; }
.now-title { font-size: clamp(22px, 2.1vw, 31px); font-weight: 900; text-decoration: none; }
.now-links { display: flex; gap: 18px; font-size: clamp(16px, 1.35vw, 20px); font-weight: 900; }
.nav { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; display: flex; gap: 6px 20px; font-size: 15px; z-index: 1; }
.nav a { text-decoration: none; color: var(--ink-2); display: inline-flex; align-items: center; min-height: 44px; }
.nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--field); text-underline-offset: .3em; }

/* ---------- 展出清單：沿用展牆欄寬 ---------- */
.rooms { padding: clamp(56px, 8vw, 120px) var(--gutter) 40px; }
.room {
  position: relative;
  display: grid;
  grid-template-columns: var(--name-col) 1fr;
  column-gap: var(--gutter);
  padding: 28px 0 40px;
  border-top: 2px solid var(--line);
}
.room + .room { margin-top: 24px; }
.room h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 3.3vw, 52px);
  line-height: .9;
  overflow-wrap: anywhere;
}
.room h2 span { display: block; margin-top: 10px; font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; line-height: 1.4; }
.entries { list-style: none; margin: 0; padding: 0; }
.entry { display: grid; grid-template-columns: 1fr auto; gap: 4px 28px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.entry:first-child { padding-top: 2px; }
.entry h3 { margin: 0; font-size: clamp(20px, 1.9vw, 26px); font-weight: 900; line-height: 1.35; }
.entry h3 a { text-decoration: none; }
.entry h3 a:hover { color: var(--field); }
.entry p { margin: 2px 0 0; color: var(--ink-2); max-width: 38em; }
.entry .links { display: flex; gap: 16px; align-self: center; font-weight: 900; white-space: nowrap; }
.works-note { margin: 0 0 14px; font-size: 14px; color: var(--ink-3); max-width: 46em; line-height: 1.6; }
.entry .note { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.cv { margin: 44px 0 0; max-width: 46em; }
.cv-group { border-top: 2px solid var(--line); padding: 16px 0 22px; }
.cv-group h3 { margin: 0 0 12px; font-size: 24px; font-weight: 900; }
.cv-group h3 span { margin-left: 10px; font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: .02em; color: var(--ink-3); }
.cv-item { display: grid; grid-template-columns: 8.5em 1fr; gap: 4px 20px; }
.cv-item + .cv-item { margin-top: 14px; }
.cv-when { margin: 0; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cv-what { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.5; }
.cv-en { margin: 2px 0 0; font-size: 14px; color: var(--ink-3); line-height: 1.55; }
@media (max-width: 760px) { .cv-item { grid-template-columns: 1fr; } .cv-when:empty { display: none; } }
.how { margin: 40px 0; max-width: 34em; }
.how h2 { margin: 0 0 10px; font-size: 24px; font-weight: 900; }
.how p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.85; }
.entry.is-pending h3, .entry.is-pending p { color: var(--ink-3); }
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.8; margin: 0 0 14px; max-width: 30em; }
.mail { font-size: clamp(22px, 2.4vw, 34px); font-weight: 900; text-decoration: none; border-bottom: 3px solid var(--field); overflow-wrap: anywhere; }
.after { margin: 22px 0 0; font-weight: 700; }

.foot { padding: 32px var(--gutter) 48px; color: var(--ink-3); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; border-top: 1px solid var(--hair); }

/* ---------- 展間頁（關於我等內頁） ---------- */
.mast { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding: 12px var(--gutter); border-bottom: 2px solid var(--line); }
.mast .name { writing-mode: horizontal-tb; font-size: 36px; line-height: 1; text-decoration: none; }
.mast .name { margin-right: auto; }
.mast .name:hover { color: var(--field); }
.home { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 2px solid var(--line); font-weight: 900; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease); }
.home:hover { background: var(--ink); color: var(--wall); }
.home:hover .arrow, .back a:hover .arrow { transform: translateX(-5px); }
.back { margin: 48px 0 0; font-size: 18px; font-weight: 900; }
.page { padding: clamp(40px, 6vw, 96px) var(--gutter); max-width: 960px; }
.page h1 { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: clamp(56px, 8vw, 120px); line-height: .88; }
.fullname { font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; margin: 18px 0 4px; }
.fullname span { display: block; font-size: 15px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; }

/* ---------- 動態：主視覺進場一次；展間如便條紙依序鋪成路 ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kv img { animation: settle 1.8s var(--ease) both; }
  .wall .name { animation: rise 1s .15s var(--ease) both; }
  .kv-line { animation: rise .9s .55s var(--ease) both; }
  .strip::before { animation: draw 1.1s .35s var(--ease) both; }
  /* 唯一的捲動時刻：課程展間的條目如便條紙依序鋪下 */
  .js #courses .entry { opacity: 0; transform: translate(-28px, 14px) rotate(-1.6deg); transition: opacity .6s var(--ease), transform .8s var(--ease); }
  .js #courses.in .entry { opacity: 1; transform: none; }
  .js #courses.in .entry:nth-child(2) { transition-delay: .18s; }
  ::view-transition-group(eros) { animation-duration: .6s; animation-timing-function: var(--ease); }
}
@keyframes settle { from { transform: scale(1.14); } to { transform: none; } }
@keyframes rise { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 窄螢幕：資訊條固定於視窗底 ---------- */
@media (max-width: 760px) {
  :root { --strip: auto; }
  body:has(.wall) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .wall { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: auto; row-gap: 12px; }
  .name { writing-mode: horizontal-tb; font-size: clamp(64px, 23.5vw, 140px); line-height: .85; }
  /* 手機：定位句移出插畫，置於巨名與插畫之間，插畫完整露出 */
  .kv { display: flex; flex-direction: column; min-height: 0; overflow: visible; background: none; }
  .kv img { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 5; object-position: 46% 80%; }
  .kv-line { position: static; order: -1; margin: 0 0 12px; max-width: none; font-size: clamp(16px, 4.5vw, 20px); line-height: 1.55; box-shadow: none; padding: .55em .75em .65em; }
  .strip {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--wall);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
  }
  .now { gap: 2px 14px; }
  .now-label { width: 100%; font-size: 12px; }
  .now-title { font-size: 18px; }
  .now-links { font-size: 16px; gap: 14px; }
  .nav { grid-column: 1; grid-row: auto; justify-self: start; flex-wrap: wrap; gap: 0 18px; }
  .room { grid-template-columns: 1fr; row-gap: 16px; }
  .room h2 { font-size: clamp(40px, 12vw, 56px); }
  .entry { grid-template-columns: 1fr; }
  .entry .links { align-self: start; }
}