/* 林偉盟 個人網站 — 港風 × 現代學術
   調色盤嚴格限定：藍、紅、白（中性色一律取藍的色調以維持紀律） */

:root {
  --blue-900:#06182e;   /* 近墨藍：頁尾、深背景 */
  --blue-800:#0a2440;   /* 主深藍 */
  --blue-700:#123a6b;
  --blue-600:#1b4d8f;
  --blue-500:#2b63a8;   /* 互動藍 */
  --blue-100:#dbe6f5;   /* 淡藍邊線 */
  --mist:#eef2f8;       /* 藍調淺底 */
  --paper:#ffffff;
  --red:#c8102e;        /* 重點紅 */
  --red-600:#a50d26;

  --ink:var(--blue-900);
  --ink-60:#41598c;     /* 次要文字（藍） */

  --serif:"Noto Serif TC", Georgia, "Times New Roman", serif;
  --sans:"Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap:1160px;
  --r:4px;
  --space-section:clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --ease:cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap { width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
a { color:inherit; }

/* ── 頁首 ── */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-top:3px solid var(--red);
  border-bottom:1px solid var(--blue-100);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:baseline; gap:.6rem; text-decoration:none; }
.brand-zh { font-family:var(--serif); font-weight:700; font-size:1.25rem; color:var(--blue-800); }
.brand-en { font-size:.68rem; letter-spacing:.22em; color:var(--ink-60); }
.nav { display:flex; gap:1.6rem; }
.nav a {
  text-decoration:none; font-weight:500; font-size:.95rem; color:var(--blue-800);
  position:relative; padding:.2rem 0;
}
.nav a::after {
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--red); transition:right .3s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after { right:0; }

/* ── 主視覺 ── */
.hero { position:relative; overflow:hidden; padding:clamp(3.5rem, 3rem + 6vw, 8rem) 0 var(--space-section); }
.hero::after {           /* 巨型「林」字作為編排背景 */
  content:"林"; position:absolute; right:-2rem; top:50%; transform:translateY(-50%);
  font-family:var(--serif); font-weight:900; font-size:min(46vw, 40rem); line-height:1;
  color:var(--mist); z-index:0; pointer-events:none; user-select:none;
}
.hero-inner { position:relative; z-index:1; }
/* 復古海報：報頭 masthead */
.masthead {
  display:flex; align-items:center; gap:.8rem 1rem; flex-wrap:wrap;
  margin:0 0 2rem; padding:.5rem 0;
  border-top:3px solid var(--blue-800);
  border-bottom:3px double var(--blue-800);
  color:var(--blue-800); font-weight:700;
}
.mh-left { display:flex; align-items:center; gap:.7rem; font-family:var(--serif); font-size:1.05rem; letter-spacing:.04em; }
.mh-badge { background:var(--red); color:#fff; font-size:.7rem; letter-spacing:.2em; padding:.22rem .6rem; }
.mh-right { margin-left:auto; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60); }

/* 復古海報：印章 seal */
.hero-seal {
  position:absolute; top:clamp(4.5rem, 9vw, 7.5rem); right:.25rem; z-index:2;
  width:120px; height:120px; transform:rotate(-8deg);
  border:3px double var(--red); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--red); gap:.12rem; opacity:.92;
}
.seal-top { font-size:.62rem; font-weight:700; letter-spacing:.18em; }
.seal-big { font-family:var(--serif); font-weight:900; font-size:1.7rem; line-height:1; }
.seal-bot { font-size:.56rem; font-weight:700; letter-spacing:.1em; border-top:1px solid var(--red); padding-top:.18rem; }
.stripe {              /* 紅白藍三色條 */
  width:48px; height:14px; flex:none; border:1px solid var(--blue-100);
  background:linear-gradient(to right,
    var(--blue-700) 0 33.33%, #fff 33.33% 66.66%, var(--red) 66.66% 100%);
}
.hero-name {
  margin:0; font-family:var(--serif); font-weight:900;
  font-size:clamp(3.2rem, 1.5rem + 8vw, 8rem); line-height:.95; letter-spacing:.02em;
  color:var(--blue-800); text-shadow:.05em .05em 0 var(--red);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0 1.4rem;
}
.hero-name-en {
  font-family:var(--sans); font-weight:700;
  font-size:clamp(.85rem, .55rem + 1vw, 1.35rem); letter-spacing:.35em; color:var(--ink-60);
  text-shadow:none;
}
.hero-role { margin:1.8rem 0 0; font-size:clamp(1.3rem, 1rem + 1.2vw, 2rem); font-weight:700; color:var(--red); }
.hero-role .mark { padding:0; }
.hero-role-en { margin:.35rem 0 0; color:var(--ink-60); letter-spacing:.04em; }
.hero-tagline {
  margin:2.2rem 0 0; font-size:clamp(1rem, .85rem + .6vw, 1.4rem); font-weight:500;
  letter-spacing:.02em; color:var(--blue-800);
}
.hero-tagline .x { color:var(--red); font-weight:700; margin:0 .12em; }

/* 港風海報：hero 右側並排（文字左、海報右） */
.hero-layout { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(1.5rem, 4vw, 3.5rem); align-items:center; }
.hero-copy { min-width:0; }
.hero-poster { position:relative; margin:0; justify-self:end; }
.hero-poster img { display:block; width:auto; height:clamp(420px, 62vh, 760px); max-width:100%;
  border:3px solid var(--blue-800); box-shadow:8px 8px 0 var(--red); background:var(--paper); }
/* 印章蓋在海報左下角 */
.hero-poster .hero-seal { top:auto; right:auto; bottom:-1.3rem; left:-1.3rem; background:rgba(255,255,255,.86); }

/* ── 文件區 ── */
.docs { padding:var(--space-section) 0; background:var(--paper);
  background-image:radial-gradient(var(--blue-100) 1.1px, transparent 1.5px); background-size:11px 11px;
  border-top:3px solid var(--blue-800); }
.section-head { margin-bottom:2.5rem; }
.section-title {
  display:flex; align-items:baseline; gap:1rem; margin:0;
  font-family:var(--serif); font-weight:900; color:var(--blue-800);
  font-size:clamp(2rem, 1.4rem + 2vw, 3rem);
}
.section-title .en {
  font-family:var(--sans); font-weight:500; font-size:.42em; letter-spacing:.22em;
  text-transform:uppercase; color:var(--red);
}
.section-sub { margin:.6rem 0 0; color:var(--ink-60); }

.flash { padding:.9rem 1.1rem; border-radius:var(--r); margin-bottom:1.5rem; font-weight:500; transition:opacity .5s ease, transform .5s ease, margin-bottom .5s ease, padding .5s ease; }
.flash.is-hiding { opacity:0; transform:translateY(-6px); margin-bottom:0; padding-top:0; padding-bottom:0; pointer-events:none; }
.flash.is-gone { display:none; }
.flash-ok  { background:#eaf1fb; color:var(--blue-700); border:1px solid var(--blue-100); border-left:4px solid var(--blue-600); }
.flash-err { background:#fdeef0; color:var(--red-600); border:1px solid #f5c9d0; border-left:4px solid var(--red); }

.docs-inner { max-width:760px; }

/* 上傳卡 */
.upload-card { background:var(--paper); border:2px solid var(--blue-800); border-radius:0; padding:1.5rem; box-shadow:5px 5px 0 var(--red); }
.card-title { margin:0 0 1.2rem; font-family:var(--serif); font-size:1.25rem; color:var(--blue-800); position:relative; padding-left:.9rem; }
.card-title::before { content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px; background:var(--red); }
.field { display:block; margin-bottom:1rem; }
.field-label { display:block; font-size:.85rem; font-weight:500; margin-bottom:.4rem; color:var(--blue-800); }
.opt { color:var(--ink-60); font-weight:400; }
.field input {
  width:100%; padding:.7rem .8rem; border:1px solid var(--blue-100); border-radius:var(--r);
  font:inherit; color:var(--ink); background:#fbfcfe;
}
.field input:focus { outline:2px solid var(--blue-500); outline-offset:1px; border-color:transparent; }

.dropzone {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; text-align:center; padding:1.8rem 1rem; margin-bottom:1rem;
  border:2px dashed var(--blue-100); border-radius:var(--r); background:#fbfcfe; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.dropzone:hover { border-color:var(--blue-500); }
.dropzone.is-drag { border-color:var(--red); background:#fff5f6; }
.dropzone.has-file { border-style:solid; border-color:var(--blue-500); background:#fff; }
.dropzone input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.dz-icon { font-size:1.8rem; color:var(--blue-500); line-height:1; }
.dz-text { color:var(--blue-800); }
.dz-text strong { color:var(--red); }
.dz-hint { font-size:.78rem; color:var(--ink-60); }

.btn { display:inline-block; font:inherit; font-weight:700; border:none; border-radius:var(--r); cursor:pointer; padding:.8rem 1.6rem; transition:transform .15s var(--ease), background .2s; }
.btn-primary { background:var(--blue-800); color:#fff; width:100%; }
.btn-primary:hover { background:var(--red); }
.btn-primary:active { transform:translateY(1px); }
.btn:focus-visible { outline:2px solid var(--red); outline-offset:2px; }

/* 文件清單 */
.doc-list { list-style:none; margin:2rem 0 0; padding:0; background:var(--paper);
  border:2px solid var(--blue-800); border-radius:0; box-shadow:5px 5px 0 var(--red); }
.doc-item { position:relative; display:flex; align-items:stretch; border-bottom:1px solid var(--blue-100); background:var(--paper); }
.doc-item:last-child { border-bottom:none; }
.doc-row { flex:1; display:flex; align-items:center; gap:1rem; padding:1rem; text-decoration:none; min-width:0; }
.doc-row:hover { background:var(--mist); }
.doc-idx { flex:none; font-family:var(--serif); font-weight:900; color:var(--red); font-size:1rem; line-height:1; border:2px solid var(--red); padding:.1rem .35rem; }
.doc-main { min-width:0; flex:1; }
.doc-title { display:block; font-weight:700; color:var(--blue-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-meta { display:block; font-size:.78rem; color:var(--ink-60); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-dl-btn { flex:none; font-weight:700; font-size:.85rem; color:#fff; background:var(--blue-800); padding:.45rem .9rem; border-radius:var(--r); white-space:nowrap; transition:background .2s; }
.doc-row:hover .doc-dl-btn { background:var(--red); }
.doc-empty { padding:2rem 1rem; text-align:center; color:var(--ink-60); border:1px dashed var(--blue-100); border-radius:var(--r); background:var(--paper); }

/* 刪除：垃圾筒圖示 + 密碼小視窗 */
.doc-del { flex:none; display:flex; align-items:center; padding-right:.5rem; }
.doc-del-toggle { display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem;
  color:var(--blue-600); cursor:pointer; border-radius:var(--r); list-style:none;
  transition:color .2s, background .2s; }
.doc-del-toggle::-webkit-details-marker { display:none; }
.doc-del-toggle:hover, .doc-del[open] .doc-del-toggle { color:var(--red); background:var(--mist); }
.doc-del-toggle:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.doc-del-form { position:absolute; top:100%; right:.5rem; z-index:20; display:flex; align-items:center; gap:.5rem;
  margin-top:.4rem; padding:.6rem; background:var(--paper); border:2px solid var(--blue-800);
  box-shadow:4px 4px 0 var(--red); white-space:nowrap; }
.doc-del-input { width:9.5rem; max-width:44vw; padding:.42rem .55rem; font:inherit; font-size:.85rem; color:var(--ink);
  border:1.5px solid var(--blue-100); border-radius:var(--r); background:var(--paper); }
.doc-del-input:focus { outline:none; border-color:var(--blue-500); }
.doc-del-confirm { flex:none; font-weight:700; font-size:.85rem; color:#fff; background:var(--red); border:none;
  border-radius:var(--r); padding:.45rem .85rem; cursor:pointer; transition:background .2s; }
.doc-del-confirm:hover { background:var(--red-600); }

/* ── 頁尾 ── */
.site-footer { background:var(--blue-900); color:#fff; padding:2.5rem 0; }
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; align-items:center; }
.foot-brand { font-family:var(--serif); font-weight:700; }
.foot-meta { font-size:.82rem; color:#aebfd6; letter-spacing:.06em; }
.foot-thanks { display:flex; flex-direction:column; gap:.3rem; margin:0 0 1.2rem;
  font-family:var(--serif); font-weight:900; font-size:clamp(2rem, 1.4rem + 3vw, 3.4rem);
  letter-spacing:.06em; color:#fff; text-shadow:4px 4px 0 var(--red); }
.foot-thanks .ft-row { display:flex; align-items:baseline; gap:.6em; flex-wrap:wrap; }
.foot-thanks .ft-red { color:var(--red); text-shadow:2px 2px 0 #fff, 4px 4px 0 var(--red); }

/* 復古海報：欄目標頭與大標錯位 */
.kicker { display:flex; align-items:center; gap:.5rem; margin:0 0 .5rem;
  font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
.kicker .kdot { width:9px; height:9px; background:var(--red); }
.section-title .zh { text-shadow:3px 3px 0 var(--red); }

/* ── 響應式 ── */
@media (max-width:760px) {
  .hero-seal { display:none; }
  .hero-name { row-gap:.7rem; }
  .hero-layout { grid-template-columns:1fr; gap:2rem; }
  .hero-poster { justify-self:center; }
  .hero-poster img { width:min(300px, 72vw); height:auto; }
}
@media (max-width:520px) {
  .nav { gap:1.1rem; }
  .header-inner { height:58px; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}