/* =========================================================
   程新貿 作品集
   風格：極簡三欄固定式（參考 studiotuh.com）
   全站只有三種字級、沒有強調色、沒有圓角與陰影
   ========================================================= */

:root{
  --text:#000000;
  --muted:#999999;
  --line:#e5e5e5;
  --bg:#ffffff;
  --ph:#f2f2f2;

  --gap:14px;          /* 圖片之間的緊密間距 */
  --edge:24px;         /* 頁面外邊距 */
  --col-left:210px;
  --col-right:180px;
  --air:104px;         /* 文字區塊與圖片區塊之間的大留白 */
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:"Schibsted Grotesk","Noto Sans TC","Helvetica Neue",Arial,sans-serif;
  font-size:13px;
  line-height:1.45;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible,
button:focus-visible{ outline:1px solid var(--text); outline-offset:2px; }

img{ display:block; width:100%; height:auto; border:0; }

/* ---------------------------------------------------------
   左欄：識別與導覽（固定不捲動）
   --------------------------------------------------------- */
.sidebar{
  position:fixed;
  top:var(--edge);
  left:var(--edge);
  width:var(--col-left);
  z-index:10;
}
.sidebar .id{ font-weight:700; }
.sidebar .id .en{ font-weight:400; color:var(--muted); }
.sidebar .block{ margin-top:16px; }
.sidebar .block.nav{ margin-top:24px; }
.sidebar .nav a{ display:block; font-weight:700; }
.sidebar .nav a[aria-current="page"]{ text-decoration:underline; }

/* ---------------------------------------------------------
   中欄：唯一會捲動的內容區
   --------------------------------------------------------- */
#main{
  margin-left:calc(var(--edge) + var(--col-left) + var(--edge));
  margin-right:calc(var(--edge) + var(--col-right) + var(--edge));
  padding:var(--edge) 0 160px;
  min-height:100vh;
}

/* 文字段落 */
.prose{ max-width:640px; }
.prose p{ margin-bottom:1.45em; }
.prose p:last-child{ margin-bottom:0; }
.prose b,.prose strong{ font-weight:700; }

/* 首頁的定義式三行排列 */
.defs{ margin:1.45em 0; }
.defs div{ display:flex; gap:14px; }
.defs dt{ font-weight:700; flex:0 0 64px; }
.defs dd{ flex:1; }

/* 大留白 */
.air{ height:var(--air); }
.air.sm{ height:56px; }

/* ---------------------------------------------------------
   專案頁
   --------------------------------------------------------- */
.meta{
  display:grid;
  grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:24px var(--gap);
  align-items:start;
}
.meta .left .title{ font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.meta .left .sub{ margin-top:2px; }
.meta .left .line{ color:var(--muted); }
.tags{ margin-top:var(--gap); font-size:11px; color:var(--muted); }
.tags div + div{ margin-top:3px; }

/* 圖片流 */
.gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
}
.gallery .item.full{ grid-column:1 / -1; }
.gallery figure{ margin:0; }
.gallery figcaption{
  margin-top:6px;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
}
.gallery .pdf-reader{ max-width:none; }
.gallery figure .pdf-reader{ width:100%; }

.gallery video,
.hero video,
.rail video{
  display:block;
  width:100%;
  height:auto;
  background:var(--ph);
  vertical-align:top;
  pointer-events:none;
}
.gallery video::-webkit-media-controls,
.hero video::-webkit-media-controls,
.rail video::-webkit-media-controls,
.gallery video::-webkit-media-controls-start-playback-button,
.hero video::-webkit-media-controls-start-playback-button,
.gallery video::-webkit-media-controls-overlay-play-button,
.hero video::-webkit-media-controls-overlay-play-button{
  display:none !important;
  -webkit-appearance:none;
}

/* 圖片／影片載入淡入 */
.gallery img,
.gallery video,
.hero img,
.hero video,
.rail img,
.rail video{ opacity:0; transition:opacity .4s ease-out; }
.gallery img.on,
.gallery video.on,
.hero img.on,
.hero video.on,
.rail img.on,
.rail video.on{ opacity:1; }

/* 佔位框（尚未上傳圖片時） */
.ph{
  background:var(--ph);
  aspect-ratio:4 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  text-align:center;
  color:var(--muted);
  font-size:11px;
}
.hero .ph{ aspect-ratio:16 / 7; }
.gallery .item.full .ph{ aspect-ratio:16 / 9; }

/* ---------------------------------------------------------
   右欄：專案縮圖索引（固定不捲動）
   --------------------------------------------------------- */
.rail{
  position:fixed;
  top:var(--edge);
  right:var(--edge);
  width:var(--col-right);
  max-height:calc(100vh - var(--edge) * 2);
  overflow-y:auto;
  scrollbar-width:none;
  z-index:10;
}
.rail::-webkit-scrollbar{ display:none; }
.rail a{
  display:block;
  margin-bottom:var(--gap);
  opacity:.45;
  transition:opacity .15s ease-out;
}
.rail a:last-child{ margin-bottom:0; }
.rail a:hover,
.rail a.active{ opacity:1; text-decoration:none; }
.rail a.active .thumb{ outline:1px solid var(--text); outline-offset:-1px; }
.rail .thumb{ background:var(--ph); aspect-ratio:4 / 3; overflow:hidden; }
.rail .thumb video{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.rail .thumb .ph{ aspect-ratio:4 / 3; font-size:10px; }
.rail .cap{ font-size:11px; margin-top:4px; line-height:1.35; }

/* ---------------------------------------------------------
   資訊頁
   --------------------------------------------------------- */
.info section{ margin-bottom:80px; }
.info section:last-child{ margin-bottom:0; }
.info h2{
  font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  margin-bottom:var(--gap);
}
.info .row{
  display:grid;
  grid-template-columns:minmax(0,120px) minmax(0,1fr);
  gap:14px;
  margin-bottom:14px;
  max-width:760px;
}
.info .row:last-child{ margin-bottom:0; }
.info .row .when{ color:var(--muted); }
.info .row .what b{ font-weight:700; }
.info .row .what .plain{ font-weight:400; }
.info .row .what .note{ color:var(--muted); }
.info ul{ list-style:none; max-width:760px; }
.info ul li{ margin-bottom:4px; }

/* ---------------------------------------------------------
   響應式
   --------------------------------------------------------- */

/* 右欄索引改為內容下方的橫向列 */
@media (max-width:1200px){
  #main{ margin-right:var(--edge); padding-bottom:40px; }
  .rail{
    position:static;
    width:auto;
    max-height:none;
    overflow-x:auto;
    overflow-y:hidden;
    display:flex;
    gap:var(--gap);
    margin:0 var(--edge) 80px calc(var(--edge) + var(--col-left) + var(--edge));
    padding-bottom:8px;
  }
  .rail a{ flex:0 0 180px; margin-bottom:0; }
}

/* 左欄改為頁首，全部單欄 */
@media (max-width:900px){
  :root{ --air:64px; }
  .sidebar{
    position:static;
    width:auto;
    padding:var(--edge) var(--edge) 0;
  }
  .sidebar .block.nav{ margin-top:16px; }
  .sidebar .nav a{ display:inline-block; margin-right:16px; }
  #main{
    margin:0;
    padding:40px var(--edge) 40px;
    min-height:0;
  }
  .meta{ grid-template-columns:1fr; gap:16px; }
  .gallery{ grid-template-columns:1fr; }
  .rail{ margin:0 var(--edge) 56px; }
  .rail a{ flex:0 0 150px; }
  .info .row{ grid-template-columns:1fr; gap:2px; }
  .defs div{ flex-direction:column; gap:0; }
  .defs dt{ flex:none; }
}

.pdf-reader{ max-width:900px; }
.pdf-stage{
  background:var(--ph);
  cursor:ew-resize;
  user-select:none;
}
.pdf-stage canvas{
  display:block;
  width:100%;
  height:auto;
  opacity:0;
  transition:opacity .25s ease-out;
}
.pdf-stage canvas.on{ opacity:1; }
.pdf-bar{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:10px;
  font-weight:700;
}
.pdf-bar button{
  border:0;
  background:none;
  padding:0;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  color:inherit;
}
.pdf-bar button:disabled{ color:var(--muted); cursor:default; }
.pdf-pos{ color:var(--muted); font-weight:400; }
.pdf-dl{ margin-left:auto; font-weight:400; color:var(--muted); }
.pdf-hint{ margin-top:6px; font-size:11px; color:var(--muted); }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  .gallery img,.gallery video,.hero img,.hero video,.rail img,.rail video,.pdf-stage canvas{ opacity:1; }
}