/* 陳芮芮 RUIRUI · 作品頁共用樣式（2026-10-07）——跟首頁同一套黑金 */
:root { --bg:#060a16; --ink:#f4ecdc; --muted:#b9b1a0; --faint:#7d7768; --gold:#d6ad5c; --gold2:#f0d595; --teal:#3cbfb2; --line:rgba(214,173,92,.32);
        --serif:'Noto Serif TC',serif; --sans:'Noto Sans TC',-apple-system,'PingFang TC',sans-serif; --en:'Cormorant Garamond',serif; --script:'Great Vibes',cursive; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; }
/* 導覽 */
.nav { position:fixed; inset:0 0 auto 0; z-index:20; display:flex; align-items:center; gap:22px; padding:12px max(24px,4vw); background:rgba(6,10,22,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(214,173,92,.14); }
.nav .brand img { height:42px; }
.nav .back { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:18px; border:1px solid rgba(214,173,92,.45); font-family:var(--serif); font-size:14px; letter-spacing:2px; color:var(--gold2); }
.nav .back svg { width:14px; fill:none; stroke:currentColor; stroke-width:2; }
.nav .links { display:flex; gap:clamp(14px,2.4vw,36px); margin-left:auto; font-family:var(--serif); font-size:15px; letter-spacing:2px; color:#eadfca; }
.nav .links a:hover { color:var(--gold2); }
/* 作品封面 */
.whero { position:relative; height:min(78vh, 720px); min-height:460px; overflow:hidden; }
.whero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); transform:scale(1.04); animation:heroZoom 18s ease-out forwards; }
@keyframes heroZoom { to { transform:scale(1); } }
.whero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(6,10,22,.9) 0%, rgba(6,10,22,.55) 40%, rgba(6,10,22,.1) 75%), linear-gradient(0deg, var(--bg) 0%, rgba(6,10,22,0) 30%); }
.whero .tx { position:absolute; z-index:2; left:max(24px,8vw); bottom:14%; max-width:620px; }
.whero .kick { font-family:var(--en); font-size:13px; letter-spacing:6px; color:var(--gold2); text-transform:uppercase; }
.whero h1 { margin:14px 0 0; font-family:var(--serif); font-weight:700; font-size:clamp(38px,4.6vw,64px); letter-spacing:4px; line-height:1.2;
  background:linear-gradient(180deg,#fff6e2 30%,#e9cf93); -webkit-background-clip:text; background-clip:text; color:transparent; }
.whero h1 small { display:block; font-size:.42em; letter-spacing:6px; margin-top:8px; -webkit-text-fill-color:#efe5d1; }
.whero p { margin:18px 0 0; font-family:var(--serif); font-size:17px; line-height:2; letter-spacing:1.5px; color:#efe5d1; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.whero .tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } .whero .tags span { padding:5px 12px; border-radius:14px; border:1px solid rgba(232,200,130,.5); font-size:12.5px; letter-spacing:1px; color:#f3e3bd; background:rgba(10,14,28,.4); }
/* 區塊 */
.sec { max-width:1200px; margin:0 auto; padding:64px max(20px,3vw) 0; }
.sh2 { display:flex; align-items:baseline; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.sh2 h2 { margin:0; font-family:var(--serif); font-weight:700; font-size:26px; letter-spacing:6px; color:#fbf3e2; }
.sh2 small { font-family:var(--en); font-size:12px; letter-spacing:4px; color:var(--muted); } .sh2 small::before { content:"— "; }
.lead { font-family:var(--serif); font-size:18px; line-height:2.2; letter-spacing:1.5px; color:#e9dfcb; max-width:880px; }
.lead b { color:var(--gold2); font-weight:600; }
.sig { margin-top:10px; font-family:var(--script); font-size:30px; color:var(--gold2); }
.feat { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.fc { padding:22px 22px 20px; border-radius:16px; border:1px solid rgba(214,173,92,.26); background:linear-gradient(180deg, rgba(18,24,44,.78), rgba(10,14,28,.9)); transition:transform .4s, border-color .4s; }
.fc:hover { transform:translateY(-4px); border-color:rgba(240,213,149,.7); }
.fc img { width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.fc h3 { margin:12px 0 0; font-family:var(--serif); font-size:18px; letter-spacing:2px; color:#fbf3e2; } .fc p { margin:8px 0 0; font-size:14px; line-height:1.9; color:#d3c9b4; }
.gal { display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; align-items:start; }
.gal figure { margin:0; border-radius:14px; overflow:hidden; border:1px solid rgba(214,173,92,.3); background:#0b1020; cursor:zoom-in; position:relative; }
.gal figure img { width:100%; height:auto; transition:transform .8s cubic-bezier(.2,.8,.2,1); } .gal figure:hover img { transform:scale(1.03); }
.gal figcaption { padding:10px 14px 12px; font-family:var(--serif); font-size:13.5px; letter-spacing:1.5px; color:#e6dcc8; border-top:1px solid rgba(214,173,92,.18); background:rgba(12,16,32,.9); }
.g6 { grid-column:span 6; } .g4 { grid-column:span 4; } .g3 { grid-column:span 3; } .g2 { grid-column:span 2; }
.tl { position:relative; padding-left:28px; } .tl::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:linear-gradient(180deg, var(--gold), rgba(214,173,92,.1)); }
.tl li { list-style:none; position:relative; margin:0 0 20px; } .tl li::before { content:""; position:absolute; left:-26px; top:7px; width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff1c8, #c99a45); box-shadow:0 0 10px rgba(214,173,92,.6); }
.tl b { font-family:var(--en); font-size:15px; letter-spacing:2px; color:var(--gold2); font-weight:600; } .tl span { display:block; margin-top:3px; font-family:var(--serif); font-size:15.5px; line-height:1.9; color:#e3d9c4; }
.pills { display:flex; flex-wrap:wrap; gap:8px; } .pills span { padding:6px 12px; border-radius:13px; border:1px solid rgba(214,173,92,.26); font-family:var(--en); font-size:13px; letter-spacing:.5px; color:var(--muted); }
.note { margin-top:14px; font-size:12.5px; color:var(--faint); line-height:1.8; }
.pn { display:flex; justify-content:space-between; gap:16px; margin-top:56px; padding-top:22px; border-top:1px solid rgba(214,173,92,.2); }
.pn a { display:flex; flex-direction:column; gap:4px; max-width:48%; } .pn a small { font-family:var(--en); font-size:12px; letter-spacing:3px; color:var(--muted); } .pn a b { font-family:var(--serif); font-size:17px; letter-spacing:2px; color:var(--gold2); font-weight:600; }
.pn a.r { text-align:right; margin-left:auto; }
/* 頁尾 */
/* 燈箱 */
.lb { position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; background:rgba(3,5,12,.94); padding:24px; } .lb.on { display:flex; }
.lb img { max-width:96vw; max-height:88vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.6); } .lb p { position:absolute; bottom:22px; left:0; right:0; text-align:center; font-family:var(--serif); letter-spacing:2px; color:#efe5d1; }
.lb button { position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(214,173,92,.6); background:rgba(255,255,255,.06); color:var(--gold2); font-size:20px; cursor:pointer; }
.rv { opacity:0; transform:translateY(24px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1); } .rv.in { opacity:1; transform:none; }
@media (max-width:860px) {
  .nav { padding:10px 14px; gap:10px; } .nav .brand img { height:34px; } .nav .links { display:none; } .nav .back { margin-left:auto; }
  .whero { height:auto; min-height:0; aspect-ratio:4/5; } .whero::after { background:linear-gradient(0deg, var(--bg) 0%, rgba(6,10,22,.75) 35%, rgba(6,10,22,.1) 70%); }
  .whero .tx { left:18px; right:18px; bottom:6%; } .whero p { font-size:15px; } .sec { padding:46px 16px 0; } .sh2 h2 { font-size:21px; letter-spacing:4px; } .sh2 small { display:none; }
  .lead { font-size:16px; line-height:2.05; } .feat { grid-template-columns:1fr 1fr; gap:12px; } .fc { padding:16px; } .fc img { width:56px; height:56px; } .fc h3 { font-size:16px; } .fc p { font-size:13px; }
  .gal { grid-template-columns:1fr; } .g6, .g4, .g3, .g2 { grid-column:span 1; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } .rv { opacity:1; transform:none; } }
/* 封面人物在左邊時：文字改放右側（圖不能左右翻，淚痣會換邊） */
.whero.right::after { background:linear-gradient(270deg, rgba(6,10,22,.9) 0%, rgba(6,10,22,.55) 40%, rgba(6,10,22,.05) 72%), linear-gradient(0deg, var(--bg) 0%, rgba(6,10,22,0) 30%); }
.whero.right .tx { left:auto; right:max(24px,7vw); text-align:right; } .whero.right .tags { justify-content:flex-end; }
@media (max-width:860px) { .whero.right::after { background:linear-gradient(0deg, var(--bg) 0%, rgba(6,10,22,.75) 35%, rgba(6,10,22,.1) 70%); } .whero.right .tx { left:18px; right:18px; text-align:left; } .whero.right .tags { justify-content:flex-start; } }
@media (max-width:860px) { .whero .kick { font-size:11px; letter-spacing:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .whero h1 { font-size:34px; letter-spacing:2px; } }

/* 10/17 大瑞：各頁頁底統一成首頁那款（山景照片＋讓美好的事），不含展示模式 */
.foot { position:relative; margin-top:70px; height:340px; overflow:hidden; }
.foot .mt { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 70%; }
.foot::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, var(--bg) 0%, rgba(6,10,22,.2) 35%, rgba(6,10,22,.15) 65%, rgba(6,10,22,.9) 100%); }
.foot .say { position:absolute; z-index:2; left:50%; top:30%; transform:translateX(-50%); text-align:center; white-space:nowrap; }
.foot .say b { display:block; font-family:var(--serif); font-weight:600; font-size:26px; letter-spacing:6px; color:#fbf3e2; text-shadow:0 2px 16px rgba(0,0,0,.6); }
.foot .say small { display:block; margin-top:8px; font-family:var(--en); font-size:12px; letter-spacing:5px; color:#e8dcc4; }
.foot .say i { display:block; margin:12px auto 0; width:220px; height:10px; background:linear-gradient(90deg, transparent, rgba(214,173,92,.7) 40%, transparent 40% 60%, rgba(214,173,92,.7) 60%, transparent) center/100% 1px no-repeat; position:relative; }
.foot .say i::after { content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; border:1px solid var(--gold); transform:translate(-50%,-50%) rotate(45deg); }
.foot .bar { position:absolute; z-index:2; left:0; right:0; bottom:0; display:flex; align-items:center; gap:22px; padding:18px max(28px,3vw) calc(18px + env(safe-area-inset-bottom)); }
.foot .bar .fm { display:flex; align-items:center; gap:12px; font-family:var(--en); font-size:16px; letter-spacing:3px; color:#eadfca; } .foot .bar .fm img { width:34px; }
.foot .bar .cp { font-size:12px; color:var(--faint); letter-spacing:.5px; }
.foot .bar .soc { margin-left:auto; display:flex; gap:18px; } .foot .bar .soc a svg { width:22px; height:22px; fill:#eadfca; opacity:.85; transition:opacity .3s, fill .3s; } .foot .bar .soc a:hover svg { fill:var(--gold2); opacity:1; }
.foot .bar .sanc { font-family:var(--en); font-size:10.5px; letter-spacing:3px; color:var(--faint); line-height:1.6; padding-left:18px; border-left:1px solid rgba(214,173,92,.25); text-transform:uppercase; }
@media (max-width:760px) {
  .foot { height:300px; } .foot .say { top:22%; } .foot .say b { font-size:20px; letter-spacing:4px; } .foot .say small { font-size:10.5px; letter-spacing:3px; }
  .foot .bar { flex-wrap:wrap; justify-content:center; gap:10px 18px; } .foot .bar .soc { margin-left:0; } .foot .bar .sanc { display:none; } .foot .bar .cp { width:100%; text-align:center; order:3; }
}
@media (min-width:761px) { .foot .bar { padding-left:170px; } }   /* 左下「回首頁」浮鈕會蓋住 logo */

/* 10/17 大瑞：菱形線下加公司名（OS 是芮芮智能科技，其他站一律晉新電腦） */
.foot .say .co { display:block; margin-top:14px; font-family:"Noto Serif TC",serif; font-style:normal; font-weight:600; font-size:14px; letter-spacing:5px; color:#eadfca; text-shadow:0 1px 8px rgba(0,0,0,.7); }
@media (max-width:760px) { .foot { height:330px; } .foot .say .co { font-size:12.5px; letter-spacing:4px; margin-top:12px; } }