@charset "UTF-8";

/*
 * Goal: For custom styling on a special contribution page, it is recommended to use both of the following selectors:
 *
 * 1. `.civicrm-contribute-sp`
 *    Although this selector is more intuitive and concise, it has two drawbacks due to its reliance on JavaScript:
 *    a. There is a gap period before this class is added.
 *    b. The selector may fail if JavaScript does not function properly.
 *
 * 2. `body:has(script[data-contribution-page-type="special"])`
 *    This selector is purely CSS-based, thus it does not have the drawbacks of `.civicrm-contribute-sp`.
 *    The `:has()` pseudo-class is supported by modern browsers. For compatibility, check https://caniuse.com/css-has.
 *
 * The reason for recommending the use of both selectors is to enhance user experience on modern browsers.
 *
 * Usage Example:
 * Hiding the main menu in the header of a special contribution page.
 *
 * CSS Code:
 *
 * .civicrm-contribute-sp .header .main-menu,
 * body:has(script[data-contribution-page-type="special"]) .header .main-menu {
 *   display: none;
 * }
 *
 */

/*SECTION - 全域排版 */

/*ANCHOR - Fixed */

.clearfix::after{
  content: unset;
}

/*ANCHOR - body 基底
  overflow-x：100vw 滿版技巧的水平溢出防護（如 .full-width）
  font-family：base theme 給 body 的 PingFang/微軟正黑串會讓未指定字型的元素落到系統字型（#46350 退件 1） */
body {
  overflow-x: clip;
  font-family: var(--ob-font-sans);
}

/*ANCHOR - 上方間隔全站歸零（base .main padding-top 24＋.node__content margin-top 10；頁頂間距一律由各頁頂部元件自理：頁標區塊/hero/KV 皆自帶） */
.main { padding-top: 0; }
.node__content { margin-top: 0; }

/*ANCHOR - 英文不拆字（neticrm_base .node a/p/div 寫 word-break:break-all，英文單字與 h1 被逐字母拆行；#48119）
  normal：中文照常逐字換行；anywhere：超長網址仍可斷 */
.node :is(a, p, div) {
  word-break: normal;
  overflow-wrap: anywhere;
}

/*ANCHOR - container */

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 3rem;  /* 手機邊距 24(fig 393 稿)；走 BS gutter 機制(padding = gutter×.5)，.row 自宣告 gutter 不受影響 */
  @media (min-width: 768px) { --bs-gutter-x: 1.5rem; }  /* ≥768 恢復 BS 預設 12 */
}

@media (min-width: 1624px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1624px;
  }
}

/*ANCHOR - Node 內容區塊寬度 */
.node:not(.node--type-landing):not(.node--type-article):not(.node--type-year):not(.node--type-reviewer):not(.node--type-photographer):not(.node--view-mode-embed){
  & > .node__content {
    max-width: clamp(345px, 37.23vw + 198.7px, 842px);
    margin-inline: auto;
    padding-inline: 24px;
  }
}

/*ANCHOR - Node 頁面標題 */
body.path-node .block-page-title-block {
  text-align: center;
  padding-bottom: 40px;
  margin: 0 0 40px;
  border-bottom: 1px solid var(--ob-border);
  & h1.title {
    font-family: var(--ob-font-serif);
    font-size: var(--ob-fs-hero);
    font-weight: 700;
    line-height: var(--ob-lh-snug);
    color: var(--ob-ink);
    text-align: center;
    margin: 0;
    padding: 0;
    & > .field--name-title { display: inline; }
  }
}

/*!SECTION */

/*SECTION - 導覽列（Bootstrap 5 / Barrio）*/
/* DOM（block_classes 佈局後）：
   #header.header > .header-inner > nav#navbar-main
     桌機上排：#block-slogan.desktop（標語）/ a#site-logo（logo）/ #block-header-secondary.desktop（輔助選單 訂閱·贊助.cta·登入·搜尋.search）
     button.navbar-toggler（漢堡，桌機隱藏）
     #CollapsingNavbar：#block-search.mobile / #block-main-menu（主選單 8 項）/ #block-secondary-mobile.mobile / #block-slogan-mobile.mobile / #block-header-social.mobile
   .desktop / .mobile 由 block_classes 控顯示。設計桌機 1728：header 上排 136、menu 下排 56、內容邊距 64/68。 */

.header {
  /*ANCHOR - 懸浮選單（fig 794:4764 首頁-選單置頂＝整個 header 原樣釘頂；#48119）
     top 讓開登入者的 admin toolbar（core displace.js 寫在 html 的變數） */
  position: sticky;
  top: var(--drupal-displace-offset-top, 0px);
  z-index: 1030;
  background: var(--ob-bg);
  font-family: var(--ob-font-sans);
  color: var(--ob-ink);

  /*ANCHOR - 內容容器（覆蓋 bootstrap .container 的 max-width）*/
  & .header-inner {
    max-width: 1728px;
    margin-inline: auto;
    padding-inline: clamp(20px, 10.19vw - 58.2px, 64px);   /* 手機 20 → 桌機 64 */
    padding-block: 0;                                       /* 覆蓋 base theme 12+12 → header 高 = navbar-main 高，對齊 fig 手機 80 / 桌機 112；也讓 overlay inset 80 正確貼齊 header 底 */
  }

  /*ANCHOR - desktop/mobile 顯示切換（base=手機：隱藏 .desktop；桌機反轉）*/
  & .desktop { display: none; }

  @media (min-width: 768px) {
    & .desktop { display: block; }
    & .mobile { display: none; }
    & .navbar-toggler { display: none; }
    & #CollapsingNavbar { display: flex !important; }   /* Barrio navbar-expand-xl 到 1200 才展開，768–1199 會連漢堡都沒有（#47943） */
  }

  /*ANCHOR - navbar 主容器：頂欄 grid 三欄（手機 關閉/logo/贊助｜桌機 標語/logo/輔助）+ 主選單下排 */
  & #navbar-main {
    /* base=手機頂欄：三欄 grid（關閉X 左／logo 中／贊助位 右），高 80 */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-block: 10px;
    @media (min-width: 768px) {
      column-gap: 24px;
      padding-block: 16px 0;   /* 下 0：menu 列底緣即 header 底（fig section-top 192 = header-v1 136 + menu 56） */
    }
  }

  /*ANCHOR - 標語（桌機左）*/
  & #block-slogan {
    @media (min-width: 768px) { grid-column: 1; justify-self: start; }
    & .block-inner, & .block-content, & .field__item { margin: 0; }
    & p {
      margin: 0;
      font-family: var(--ob-font-serif);    /* fig 標語為思源宋粗體（#46350 二輪退件 1）*/
      font-size: 12px;
      font-weight: 700;
      letter-spacing: var(--ob-ls-wider);   /* 0.08em */
      line-height: 1;
      color: var(--ob-ink);
      white-space: nowrap;
    }
  }

  /*ANCHOR - logo（置中，手機桌機共用）*/
  & #site-logo {
    grid-column: 2;
    justify-self: center;
    padding: 0;
    margin: 0;
    & img {
      display: block;
      width: 89px;                                    /* 手機頂欄 logo（高 60 → 頂欄 80）*/
      height: auto;
      @media (min-width: 768px) {
        width: clamp(112px, 9.72vw + 37.4px, 154px); /* 桌機 112 → 154 */
      }
    }
  }

  /*ANCHOR - 手機頂欄贊助按鈕（#block-cta-donate.mobile，grid 右上；桌機用 header-secondary 的 .cta）*/
  & #block-cta-donate {
    grid-column: 3;
    justify-self: end;
    & .block-inner, & .block-content, & .field__item, & p { margin: 0; }
    & a {
      display: inline-block;
      padding: 8px 12px;               /* 設計約 50×32 */
      background: var(--ob-primary);
      color: var(--ob-white);
      border-radius: 4px;
      font-size: 13px;
      line-height: 16px;               /* 8+16+8 = 32 高（對設計）*/
      text-decoration: none;
      white-space: nowrap;
      &:hover { background: var(--ob-primary-light); color: var(--ob-white); }
    }
  }

  /*ANCHOR - 輔助選單（桌機右）desktop*/
  & #block-header-secondary {
    @media (min-width: 768px) { grid-column: 3; justify-self: end; }
    & ul.nav {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 0;
      padding: 0;
    }
    & li.nav-item { list-style: none; }
    & a.nav-link {
      display: inline-flex;
      align-items: center;
      padding: 6px 4px;
      font-size: 12px;
      letter-spacing: var(--ob-ls-base);
      color: var(--ob-ink);
      text-decoration: none;
      &:hover { color: var(--ob-primary); }
    }

    /*ANCHOR - 贊助 = primary 按鈕（.cta）*/
    & a.cta {
      padding: 8px 16px;
      background: var(--ob-primary);
      color: var(--ob-white);
      border-radius: 4px;
      &:hover { background: var(--ob-primary-light); color: var(--ob-white); }
    }

    /*ANCHOR - 搜尋 = icon button（.search，route:<button> → <button>）*/
    & .search {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      margin-left: -4px;               /* 登入→搜尋 間距 16→12 */
      background: transparent;
      border: 0;
      font-size: 0;                    /* 隱藏 <button> 內「搜尋」文字，只留 icon（保留螢幕報讀）*/
      color: transparent;
      cursor: pointer;
      &::before {
        content: "";
        width: 23px;
        height: 23px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191C1B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.5 20.5l-4.2-4.2'/%3E%3C/svg%3E") center/contain no-repeat;
      }
      &:hover { opacity: 0.6; }
    }
  }

  /*ANCHOR - 漢堡鈕 / 關閉X（手機，grid 左；展開時圖示變 ✕、疊在 overlay 之上）*/
  & .navbar-toggler {
    grid-column: 1;
    grid-row: 1;                        /* 與 logo 同排（防 grid auto-flow 因 source order 跳到第二行）*/
    justify-self: start;
    position: relative;
    z-index: 1040;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    &:focus { box-shadow: none; }
    & .navbar-toggler-icon {
      width: 40px;
      height: 40px;
      background: url("images/icon-ham.svg") center / contain no-repeat;  /* 收合態＝漢堡 */
    }
    /* 展開態（bootstrap 移除 .collapsed）→ 關閉 ✕ */
    &:not(.collapsed) .navbar-toggler-icon {
      background-image: url("images/icon-close.svg");
    }
  }

  /*ANCHOR - 選單容器（手機=展開全螢幕 overlay；桌機=主選單下排）*/
  & #CollapsingNavbar {
    /* base=手機：展開時 fixed 全螢幕覆蓋（頂欄 80 以下到底），內容 flex 直排、標語+社群貼底 */
    &.show,
    &.collapsing {
      position: fixed;
      inset: 80px 0 0 0;
      z-index: 1035;
      background: var(--ob-bg);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;            /* 覆蓋 bootstrap .navbar 的 center，子項撐滿寬 */
      padding: 16px 24px 24px;
    }
    @media (min-width: 768px) {
      grid-column: 1 / -1;             /* 跨全寬換到第二行 */
      margin-top: 16px;
      border-top: 1px solid var(--ob-border);
      min-height: 56px;                /* fig menu 786:1052 h=56（舊值 86 為誤量）；固定兩態高 → 主選單/搜尋切換零跳動 */
      align-items: center;             /* 兩態內容垂直居中（justify-content 走 bootstrap flex-end + 子元素自置中）*/
    }
  }

  & #block-main-menu {
    /* 桌機置中：#CollapsingNavbar 帶 bootstrap .justify-content-end !important，用 auto margin 蓋過 */
    @media (min-width: 768px) { margin-inline: auto; }
    & ul.navbar-nav {
      /* base=手機：兩欄 grid（漫畫/年度好書 滿寬），列欄距 24 */
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 24px;
      row-gap: 24px;
      margin: 0;
      padding: 0;
      @media (min-width: 768px) {
        display: flex;                 /* 桌機：橫排置中單行 */
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 32px;
      }
    }
    & li.nav-item { list-style: none; }
    & a.nav-link {
      /* base=手機：粗體 17，列距靠 grid row-gap */
      padding: 0;
      font-family: var(--ob-font-serif);   /* fig 主選單為思源宋；覆寫 .header 的 sans（#46350 退件 1） */
      font-size: 17px;
      font-weight: 700;
      line-height: 25px;
      letter-spacing: var(--ob-ls-base);
      color: var(--ob-ink);
      text-decoration: none;
      &:hover { color: var(--ob-primary); }
      @media (min-width: 768px) {
        padding: 0 4px;                    /* fig nav-text h=25；垂直置中交給 #CollapsingNavbar 的 align-items */
        font-size: var(--ob-fs-label); /* clamp 16→17 */
      }
    }

    /*ANCHOR - 手機：漫畫(5)、年度好書(8) 滿寬 + 後分隔線 */
    & li.nav-item:nth-child(5),
    & li.nav-item:nth-child(8) {
      grid-column: 1 / -1;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--ob-border);
    }

    /*ANCHOR - 漫畫(5) 後短分隔線（桌機，覆蓋手機的滿寬橫線）*/
    @media (min-width: 768px) {
      & li.nav-item:nth-child(5),
      & li.nav-item:nth-child(8) {
        padding-bottom: 0;
        border-bottom: 0;
      }
      & li.nav-item:nth-child(5) {
        position: relative;
        margin-right: 32px;
        &::after {
          content: "";
          position: absolute;
          right: -32px;                     /* margin-right 32 + flex gap 32 的正中間（#46350 10/5） */
          top: 50%;
          width: 1px;
          height: 14px;
          background: var(--ob-gray-blue);
          transform: translate(50%, -50%);
        }
      }
    }
  }

  /*ANCHOR - 手機 overlay：搜尋框（第一項）*/
  & #block-search {
    margin-bottom: 32px;                 /* 搜尋框底 → 主選單 */
    & .container-inline { display: block; }  /* 取消 Drupal inline-block，讓層層撐滿 */
    & form { width: 100%; margin: 0; padding: 0; }  /* 清 bootstrap .form-row 的 15px padding */
    & .form-item { width: 100%; margin: 0; padding: 0; }
    & .form-search {
      width: 100%;
      height: 46px;
      padding: 0 16px 0 44px;            /* 左留放大鏡空間 */
      border: 1px solid var(--ob-border);
      border-radius: var(--ob-radius);
      background: url("images/icon-search.svg") transparent left 12px center / 24px no-repeat;
    }
    & .form-actions { display: none; }   /* 隱藏送出鈕，Enter 送出 */
  }

  /*ANCHOR - 手機 overlay：輔助選單（贊助/訂閱/登入，細字單欄）*/
  & #block-secondary-mobile {
    margin-top: 24px;                    /* 年度好書分隔線後 24 */
    & ul.nav {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin: 0;
      padding: 0;
    }
    & li.nav-item { list-style: none; }
    & li.nav-item:nth-child(2) { order: -1; }     /* 贊助 li 排最前（設計序 贊助/訂閱/登入）*/
    & li.nav-item:nth-child(4) { display: none; } /* 搜尋 li 隱藏（overlay 已有搜尋框）*/
    & a.nav-link {
      padding: 0;
      font-size: 17px;
      font-weight: 400;                  /* 細字（比主選單細）*/
      line-height: 25px;
      letter-spacing: var(--ob-ls-base);
      color: var(--ob-ink);
      text-decoration: none;
      &:hover { color: var(--ob-primary); }
    }
    & a.cta {                            /* 贊助：列表內為純文字（去頂欄按鈕樣式）*/
      padding: 0;
      background: transparent;
      color: var(--ob-ink);
      border-radius: 0;
      &:hover { background: transparent; color: var(--ob-primary); }
    }
  }

  /*ANCHOR - 手機 overlay：標語 + 社群（貼底）*/
  & #block-slogan-mobile {
    margin-top: auto;                    /* 推到 overlay 底 */
    padding-top: 20px;
    & p {
      margin: 0;
      font-size: 13px;
      letter-spacing: var(--ob-ls-wider);
      line-height: 1;
      color: var(--ob-ink);
    }
  }
  & #block-header-social {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--ob-border);
    & ul.nav {
      display: flex;
      gap: 20px;                         /* icon 20 + 間距 20 = 設計節距 40 */
      margin: 0;
      padding: 0;
    }
    & li.nav-item { list-style: none; }
    & a {
      display: block;
      width: 20px;
      height: 20px;
      padding: 0;                        /* 清 bootstrap .nav-link padding（border-box 下會把 20 撐成 32）*/
      font-size: 0;
      color: transparent;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      /* 手機 overlay 淺底 → 深色社群 icon（-b 版；頁尾是淺色 #F3F5F5 版）*/
      &.social-facebook  { background-image: url(images/social-facebook-b.svg); }
      &.social-instagram { background-image: url(images/social-ig-b.svg); }
      &.social-youtube   { background-image: url(images/social-yt-b.svg); }
      &.social-plurk     { background-image: url(images/social-plurk-b.svg); }
      &.social-threads   { background-image: url(images/social-threads-b.svg); }
      &:hover { opacity: 0.65; }
    }
  }

  /*ANCHOR - 桌機搜尋展開態（.is-search-open）：主選單換成搜尋框；頂欄放大鏡換 ✕
     fig 1068:8509 首頁-搜尋：menu bar w=1728 h=86；搜尋框 w=590 h=46 置中；
     內 icon-search 32×32 x=8 y=7；placeholder x=44 y=17（padding-left=44）色 #191C1B/op0.4 */
  @media (min-width: 768px) {
    &.is-search-open {
      & #block-main-menu { display: none; }

      & #block-search {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;                              /* 撐滿 #CollapsingNavbar 剩餘寬度（Bootstrap .navbar flex item）*/
        margin: 0;
        & .container-inline, & form, & .form-item { width: 100%; margin: 0; padding: 0; }
        & .form-item { max-width: 590px; margin-inline: auto; }
        & .form-search {
          width: 100%;
          height: 46px;
          padding: 0 16px 0 44px;
          background: url("images/icon-search.svg") transparent 8px center / 32px no-repeat;
          border: 1px solid var(--ob-border);
          border-radius: 8px;
          font-size: 14px;
          color: var(--ob-ink);
          &::placeholder { color: rgba(25, 28, 27, 0.4); }   /* fig #191C1B op0.40 */
          &:focus { outline: none; border-color: var(--ob-ink); box-shadow: none; }   /* 蓋 Bootstrap .form-control:focus 藍光暈 */
        }
        & .form-actions { display: none; }
      }

      & #block-header-secondary .search::before {
        background-image: url("images/icon-close.svg");
        background-size: 24px;
      }
    }
  }
}
/*!SECTION */

/*SECTION - 頁尾 */

/*SECTION - CTA 捐款（頁尾之上） */
/* fig 參考: SYMBOL 912:1668 桌機 1728×180 / FRAME 786:2223 手機 393×180
   字型 --ob-font-brand（金萱付費 fallback Noto Serif TC）；標點全形 */
#pre-footer {
  /*ANCHOR - 滿版容器 + 背景（斷點改 1200：手機/平板走簡版、桌機才切精緻版） */
  width: 100%;
  height: 180px;
  background: url(images/cta-bg-mobile.svg) center/cover no-repeat;
  overflow: hidden;
  @media (min-width: 1200px) {
    background-image: url(images/cta-bg-desktop.svg);
  }

  /*ANCHOR - region：max 1728 中央 */
  & .region-pre-footer {
    margin: 0;
    padding: 0;
    max-width: 1728px;
    margin-inline: auto;
    height: 100%;
    position: relative;
  }

  /*ANCHOR - block：撐 100% + pseudo 定位參考 */
  & #block-openbook-donation-cta {
    height: 100%;
    position: relative;

    & .block-inner,
    & .block-content,
    & .field--name-body,
    & .field__item {
      height: 100%;
    }

    /*ANCHOR - field__item：手機/平板直排左對齊，按鈕 in-flow 落 h2 下方；桌機置中橫排 */
    & .field__item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 32px;
      color: #191C1B;
      @media (min-width: 1200px) {
        align-items: center;
        justify-content: center;
        padding: 0;
      }
    }

    /*ANCHOR - 標題 h2：serif + 字距，桌機置中 inline-block */
    & h2 {
      font-family: var(--ob-font-brand);
      font-size: clamp(24px, 2.5vw, 30px);
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.5;
      margin: 0 0 12px 0;
      color: #191C1B;
      text-align: left;
      position: relative;
      @media (min-width: 1200px) {
        line-height: 1;
        margin: 0;
        text-align: center;
        display: inline-block;
      }

      /*ANCHOR - 標題前半 <span>（客戶加）：桌機 span::after 承載波浪底線於文字下方（不覆蓋字） */
      & span {
        @media (min-width: 1200px) {
          position: relative;
          display: inline-block;

          &::after {
            content: "";
            position: absolute;
            left: 0;
            top: calc(100% + 6px);
            width: 100%;
            aspect-ratio: 315 / 35;
            background: url(images/cta-line.svg) center / contain no-repeat;
          }
        }
      }

      /*ANCHOR - 粉筆組（h2::before）左上 */
      &::before {
        content: "";
        position: absolute;
        background: url(images/cta-light-mobile.svg) center/contain no-repeat;
        width: 32px;
        height: 28px;
        top: -30px;
        left: -20px;
        @media (min-width: 1200px) {
          background-image: url(images/cta-light-desktop.svg);
          width: 46px;
          height: 62px;
          top: -55px;
          left: -30px;
        }
      }

      /*ANCHOR - 黃圓點（h2::after）貼 h2 右邊 + baseline（對齊設計稿 x=1070 y=100/1525×175） */
      &::after {
        content: "";
        position: absolute;
        background: url(images/cta-circle.svg) center/contain no-repeat;
        width: 20px;
        height: 20px;
        bottom: 0;
        right: -25px;
        @media (min-width: 1200px) {
          width: 24px;
          height: 24px;
          right: -30px;
        }
      }
    }

    /*ANCHOR - CKEditor wrap 的 <p>：消預設 margin */
    & p { margin: 0; }

    /*ANCHOR - 按鈕 a：手機/平板 in-flow 落 h2 下方；桌機 absolute 右邊 */
    & a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: clamp(116px, 12vw, 144px);
      height: clamp(32px, 4vw, 46px);
      background: #191C1B;
      color: #FFFFFF;
      text-decoration: none;
      font-size: clamp(10px, 1vw + 2px, 12px);
      letter-spacing: 0.08em;
      border-radius: 4px;
      @media (min-width: 1200px) {
        position: absolute;
        top: 67px;
        right: 128px;
      }
    }
  }
}
/*!SECTION */

.site-footer {
  /*ANCHOR - 容器 */
  background: var(--ob-dark);
  color: var(--ob-white);
  font-family: var(--ob-font-sans);

  /*ANCHOR - inner */
  & .site-footer-inner {
    max-width: 1728px;
    margin-inline: auto;
    padding-inline: clamp(24px, 9.26vw - 47.1px, 64px);
  }

  /*ANCHOR - region */
  & .region { margin: 0; --bs-gutter-x: 0; }
  & .block { margin: 0; border: 0; padding: 0; }
  & .nav { flex-wrap: nowrap; }

  /*ANCHOR - top */
  & .site-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: center;
    text-align: center;
    column-gap: 64px;
    row-gap: 32px;
    padding-block: 48px 40px;

    @media (min-width: 768px) {
      & { 
        grid-template-columns: 1fr auto; 
        justify-items: stretch; 
        text-align: left; 
      }
    }

    & .region-footer-second { 
      justify-self: stretch; 
    }   /* 選單 region 撐滿，供三等欄 */

    /*ANCHOR - logo + 標語 */
    & #block-brand-footer {
      & .field__item { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 20px; 
        @media (min-width: 768px) {
          align-items: flex-start; 
        }
      }
      & img { 
        width: clamp(180px, 13.89vw + 73.3px, 240px); 
        height: auto; 
        display: block; 
      }
      & p { 
        margin: 0; 
        &:not(:has(img)) {
          max-width: 15em;
          font-family: var(--ob-font-serif);      /* 覆寫 footer 的 sans；fig: Noto Serif TC Medium */
          font-size: 17px;
          font-weight: 500;
          line-height: 1.5;
          letter-spacing: 0.05em;                 /* fig 5% = 0.85px */
          color: var(--ob-white);
        }
      }

    }

    /*ANCHOR - social menu（class 套版，不綁 nth-child）*/
    & #block-social-menu {
      & ul.nav { 
        display: flex; 
        justify-content: center; 
        gap: 20px; 
        margin: 0; 
        padding: 0; 
        @media (min-width: 768px) {
          justify-content: flex-start; 
        }
        & .nav-item { 
          list-style: none; 
          a {
            display: block;
            width: 22px;
            height: 22px;
            padding: 0;
            font-size: 0;
            color: transparent;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            opacity: 1;
            transition: opacity 0.2s ease;
            &:hover { opacity: 0.65; }
            &.social-facebook  { background-image: url(images/social-facebook.svg); }
            &.social-instagram { background-image: url(images/social-instagram.svg); }
            &.social-youtube   { background-image: url(images/social-youtube.svg); }
            &.social-plurk     { background-image: url(images/social-plurk.svg); }
            &.social-threads   { background-image: url(images/social-threads.svg); }
          }
        }
      }
    }

    /*ANCHOR - footer menu */
    & #block-footer-menu {
      & > ul.nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin: 0;
        padding: 0;
        text-align: center;
        @media (min-width: 768px) {
          display: flex; 
          grid-template-columns: none; 
          gap: 30px; 
          text-align: right; 
        }
      }
      & > ul > li { 
        list-style: none; 
        & > .nav-link {
          display: block;
          margin: 0 0 24px;
          padding: 0;
          font-family: var(--ob-font-serif);      /* 覆寫 footer 的 sans；fig: Noto Serif TC SemiBold */
          font-size: var(--ob-fs-label);          /* clamp 16→17 */
          font-weight: 600;
          letter-spacing: var(--ob-ls-wider);     /* 0.08em = fig 1.36px */
          color: var(--ob-white);
        }
      }
      & .flex-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin: 0;
        padding: 0;
        @media (min-width: 768px) {
          align-items: stretch; 
        }
        & li { list-style: none; }
        & a {
          padding: 0;
          font-size: var(--ob-fs-body);         /* 16px */
          letter-spacing: var(--ob-ls-wider);
          color: var(--ob-white);
          text-decoration: none;
          &:hover { color: var(--ob-primary-light); }
        }
      }

    }
  }

  /*ANCHOR - bottom */
  & .site-footer__bottom {
    padding-block: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);

    & > .region {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
      @media (min-width: 768px) {
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center; 
        flex-wrap: wrap; 
        text-align: left; 
        gap: 12px 24px; 
      }
      & > * { 
        width: auto; 
      }
    }

    & #block-copyright {
      font-size: var(--ob-fs-xs);             /* 13px */
      letter-spacing: var(--ob-ls-wider);     /* 0.08em */
      color: var(--ob-gray-mid);
    }

    & .menu--footer-legal-menu {
      & ul.nav {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin: 0;
        padding: 0;
        & li { 
          list-style: none; 
        }
        & a {
          padding: 0;
          font-size: var(--ob-fs-small);        /* 14px */
          letter-spacing: var(--ob-ls-wider);
          color: var(--ob-gray-mid);
          text-decoration: none;
          &:hover { color: var(--ob-white); }
        }
      }
    }
  }
}
/*!SECTION */

/*SECTION - Front 首頁 */

/*ANCHOR - KV 大圖輪播：已挖至「SECTION - Slick」作 .ob-kv 變體 */

/*ANCHOR - 最新文章 */
/*ANCHOR - 首頁貼合頁尾（末段 #12 深色帶直接接 pre_footer，覆寫 base .main 下內距） */
body.path-frontpage .main { padding-bottom: 0; }

#recent {
  margin-top: clamp(32px, 2.5vw + 12.8px, 56px);
  margin-bottom: clamp(48px, 5.52vw + 5.6px, 101px);  /* fig 手機 48(1137-1089) / 桌機 101(1446-1345) */
  & .view-content { --bs-gutter-x: 0; }
}

/*ANCHOR - 輪播區塊間距
  fig 手機/桌機實測：#focus/#child 有底色取內距（上 32→56、下 40→64）；
  #report 前後留白 32→56 / 40→64；#child 外距 40→64 / 32→56；
  漫畫無專屬 section → 掛 view 的 name-comic */
#focus,
#child { padding-block: clamp(32px, 5.56vw - 10.7px, 56px) clamp(40px, 5.56vw - 2.7px, 64px); }

#report { margin-block: clamp(32px, 5.56vw - 10.7px, 56px) clamp(40px, 5.56vw - 2.7px, 64px); }

#child { margin-block: clamp(40px, 5.56vw - 2.7px, 64px) clamp(32px, 5.56vw - 10.7px, 56px); }

.name-comic { margin-bottom: clamp(40px, 5.56vw - 2.7px, 64px); }

/*ANCHOR - 三區內容寬 1472
  fig 評論 786:1237／專欄 786:1436／議題 786:1527 皆 x=128 w=1472；
  container 的 1576 會讓卡片整體放大 7~10%（評論 447/專欄圖 358/議題圖 212→229），限寬後各卡自動回設計值 */
.name-review,
.name-column,
.name-topic {
  max-width: 1472px;
  margin-inline: auto;
}

/*ANCHOR - #review 評論區 fig section 內距 頂 145 底 81 */
#review {
  padding-block: clamp(56px, 8.24vw - 7.3px, 145px) clamp(40px, 3.8vw + 10.4px, 81px);
}

/*ANCHOR - name-review 卡片
  桌機 3 欄 × 3 rows,大卡 405×540 span 2 rows / 矮卡 405×304 span 1;
  排列(nth 1~6):Col1 大 / Col2 矮上 / Col3 大 / Col1 矮下 / Col2 大下 / Col3 矮下;
  手機統一 3:4 254 寬單列橫捲;
  文字塊 405×180 疊卡底,漸層 stops #263238 0→70%,顯示 logomark(fig xy=24,75)+ 標題(fig xy=24,98 兩行);
  分隔線 / Read more / tag 皆隱藏不做 */
.name-review {
  position: relative;

  & .more-link {
    margin-top: 32px;
    margin-inline: max(0px, calc(24px - (100vw - 100%) / 2));
    font-family: var(--ob-font-sans);
    font-size: clamp(14px, 0.23vw + 12.2px, 15px);
    font-weight: 700;
    line-height: 1;

    @media (min-width: 768px) {
      position: absolute;
      bottom: calc(100% + clamp(24px, 1.67vw + 11.2px, 40px));   /* 對齊 h2 底線;offset = h2 margin-bottom */
      right: calc((100% - min(100%, 1728px)) / 2);
      margin: 0;
      font-weight: 500;
    }

    & a {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      text-decoration: none;
      &::after {
        content: '';
        width: 26px;
        height: 16px;
        background: url(images/icon-more.svg) no-repeat center;
        filter: invert(1);   /* icon-more.svg 黑 → 白（深底可讀）*/
      }
    }
  }

  /* 桌機 3×3 stagger + rows auto;li 各自 aspect + align-self:start 讓 grid 依卡片 intrinsic 撐開 tracks */
  & ul.d-grid {
    @media (min-width: 768px) {
      grid-template-rows: repeat(3, auto);
    }
  }

  & ul.d-grid > li {
    position: relative;
    aspect-ratio: 405/540;
    overflow: hidden;

    & .views-field-field-image,   /* views 欄位外框：缺了它 height:100% 斷鏈，img 照自身比例、cover 不生效（#46350 10/14） */
    & .entity-image,
    & .entity-image a {
      display: block;
      width: 100%;
      height: 100%;
    }
    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    & .entity-title {
      position: absolute;
      inset: auto 0 0 0;
      height: 180px;
      margin: 0;
      padding: 0 24px 24px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      /* 上段半透明讓底圖透出（#46350 退件 5）；70% 起收在不透明 --ob-gray-dark＝section 底色，
         卡片下緣才淡出融進背景、不留硬邊（設計稿卡底取樣 #263238，#46350 二輪退件 2）*/
      background: linear-gradient(to bottom, transparent 0%, var(--ob-gray-dark) 70%);

      &::before {
        content: '';
        display: block;
        width: 22px;
        height: 15px;
        margin: 0 0 8px;
        background: url(images/icon-logomark.svg) no-repeat center / contain;
      }

      /* clamp 給 <a>（container 是 flex,-webkit-box 只能給內層） */
      & > a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

    @media (min-width: 768px) {
      align-self: start;

      &:nth-child(2),
      &:nth-child(4),
      &:nth-child(6) { aspect-ratio: 405/304; }

      &:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
      &:nth-child(2) { grid-column: 2; grid-row: 1; }
      &:nth-child(3) { grid-column: 3; grid-row: 1 / span 2; }
      &:nth-child(4) { grid-column: 1; grid-row: 3; }
      &:nth-child(5) { grid-column: 2; grid-row: 2 / span 2; }
      &:nth-child(6) { grid-column: 3; grid-row: 3; }
    }
  }

  @media (max-width: 767px) {
    & ul.d-grid { grid-auto-columns: 254px; }
  }
}

/*ANCHOR - #column 專欄區 fig section 內距 頂 32→56 底 40→80 */
#column {
  padding-block: clamp(32px, 5.56vw - 10.7px, 56px) clamp(40px, 9.26vw - 31.1px, 80px);
}

/*ANCHOR - name-column 卡片
  桌機 2×2：卡=方圖＋右文字欄（title 3 行／摘要／by 作者+頭像貼底），tag 標頭跨兩欄；
  手機直排：圖 100 方＋title＋by（無摘要、無頭像）；
  li > .views-field 攤平（display:contents），grid 定位全用 entity-* */
.name-column {
  position: relative;

  & .more-link {
    margin-top: 32px;
    font-family: var(--ob-font-sans);
    font-size: clamp(14px, 0.23vw + 12.2px, 15px);
    font-weight: 700;
    line-height: 1;

    @media (min-width: 768px) {
      position: absolute;
      bottom: calc(100% + clamp(24px, 1.67vw + 11.2px, 40px));   /* 對齊 h2 下緣;offset = h2 margin-bottom */
      right: 0;
      margin: 0;
      font-weight: 500;
    }

    & a {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--ob-ink);
      text-decoration: none;

      &:hover,
      &:focus { color: var(--ob-primary); }

      &::after {
        content: '';
        width: 26px;
        height: 16px;
        background: url(images/icon-more.svg) no-repeat center;
      }
    }
  }

  & ul.d-grid > li {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto auto 1fr auto;   /* header / title / 摘要 / 填充 / 作者貼底 */
    column-gap: clamp(24px, 3.7vw - 4.4px, 40px);

    @media (min-width: 768px) { grid-template-columns: 1fr 1fr; }

    & > .views-field { display: contents; }

    & .entity-tag-header {
      grid-column: 1 / -1;
      margin-bottom: clamp(12px, 2.78vw - 9.3px, 24px);
    }

    & .entity-image {
      grid-row: 2 / 6;
      grid-column: 1;

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

    & .entity-title {
      grid-row: 2;
      grid-column: 2;
      margin: 0;
      font-size: clamp(16px, 1.85vw + 1.78px, 24px);
      @media (min-width: 768px) { line-height: var(--ob-lh-snug); }
    }

    & .entity-summary {
      grid-row: 3;
      grid-column: 2;
      display: none;

      /* fig 摘要 786:1445 h=63 ÷ 21 = 3 行（display 蓋掉通用 trim-* 的 -webkit-box，這裡自帶；
        body 輸出包 <p>，block 子元素會讓 clamp 剪不到行 → p 攤平成 contents） */
      @media (min-width: 768px) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
      }

      & p { display: contents; }
    }

    & .entity-author {
      grid-row: 5;
      grid-column: 2;
    }
  }
}

/*ANCHOR - name-topic 議題卡
  桌機 3×2:格=tag 標頭＋方圖左/標題右＋更多{tag};手機 2×3:標頭＋標題(無圖無更多);
  views_field_view 內嵌 view 的包裝鏈攤平(display:contents),卡片 grid 只認 entity-*;
  rewrite 的「更多」文字在 <a> 外 → stretched-link 讓整條可點 */
.name-topic {
  margin-top: clamp(40px, 5.56vw - 2.7px, 64px);

  & .view-content { --bs-gutter-x: 0; }

  & ul.d-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 5.56vw - 10.7px, 56px) clamp(32px, 1.85vw + 17.8px, 40px);

    @media (min-width: 768px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  & .entity-tag-header { margin-bottom: clamp(8px, 1.85vw - 6.2px, 16px); }

  & .views-field-view {
    & > .field-content,
    & .view,
    & .view-inner,
    & .view-content,
    & .entity-row,
    & .entity-row-inner,
    & .views-field { display: contents; }

    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: 212fr 228fr;    /* fig 圖 212 / 文 228 / gap 24,等比縮放 */
      column-gap: 24px;
      align-items: center;
    }
  }

  & .entity-image {
    display: none;

    @media (min-width: 768px) { display: block; }

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

  & .entity-title {
    margin: 0;
    font-size: var(--ob-fs-card-sm);   /* clamp 16→18；fig 786:1578 三行 h=75 ÷ 1.4 ≈ 18（#46350 退件 7） */
    line-height: var(--ob-lh-base);
  }

  & .entity-more {
    display: none;

    @media (min-width: 768px) {
      display: block;
      position: relative;
      margin-top: 24px;
      font-family: var(--ob-font-sans);
      font-size: var(--ob-fs-meta);
      font-weight: 500;
      line-height: 1;
      color: var(--ob-ink);

      &:hover { color: var(--ob-primary); }

      & a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: inherit;
        text-decoration: none;

        &::before {
          content: '';
          position: absolute;
          inset: 0;
        }

        &::after {
          content: '';
          width: 26px;
          height: 16px;
          background: url(images/icon-more.svg) no-repeat center;
        }
      }
    }
  }
}

/*!SECTION */

/*SECTION - Entity Reusable Components */

/*ANCHOR - full-width 滿版出血（LB section class；搭配 body overflow-x hidden） */
.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

/*ANCHOR - bg-* 背景變體（LB section class；色=fig 各區實測 token）
  bg-dark / bg-primary 與 Bootstrap utility 同名且 BS 帶 !important → 這裡也要 !important（theme 層較晚載入而勝出） */
.bg-dark { background-color: var(--ob-gray-dark) !important; }     /* 評論區 786:1238 #263238 */
.bg-border { background-color: var(--ob-gray-light); }             /* 焦點作家 786:1150 #E5E7EB(專欄快取 #E1E4E8 極近，統一 token) */
.bg-primary { background-color: var(--ob-primary) !important; }    /* 童書區基礎色，紋理疊圖做到該區再補 */
.bg-blue {                                                         /* 漸層藍（fig bg-top：primary-light 10%→0 垂直 120；備用 utility） */
  background: linear-gradient(180deg, rgb(0 185 200 / 0.1), rgb(0 185 200 / 0) 120px);
}

/*ANCHOR - 頁標區塊（#block-page-title.full-width：有 H1 的頁面頂部裝飾。滿版漸層＋fig 上70/標題40/下70/線2px 內容寬；
  banner（年度）與 term-hero（分類/tag 列表）頁自帶主視覺 → 不鋪漸層 */
#block-page-title.full-width {
  border-bottom: 0;                /* 蓋掉 base 1px 全寬線，改下方 ::after fig 2px 線 */
  margin-bottom: 0;
  margin-inline: -50vw;            /* base 以 id 設 margin 蓋掉 .full-width 的 bleed → id 層補回 */
  padding-top: clamp(40px, 3.13vw + 16px, 70px);
  padding-bottom: 0;

  body:not(:has(#banner)):not(:has(.name-term-hero)) & {
    background: linear-gradient(180deg, rgb(0 185 200 / 0.1), rgb(0 185 200 / 0) 120px);
  }

  & h1 {
    margin: 0;
    font-family: var(--ob-font-serif);
    font-size: clamp(28px, 1.25vw + 18.4px, 40px);
    font-weight: 700;
    letter-spacing: var(--ob-ls-base);
    line-height: var(--ob-lh-tight);
    text-align: center;
  }

  &::after {
    content: '';
    display: block;
    max-width: 1474px;
    margin: clamp(40px, 3.13vw + 16px, 70px) auto 0;
    border-top: 2px solid var(--ob-border);
  }
}

/*ANCHOR - bg-dark 深色底通用變體
  block-title 白字＋無底線；<a> 白字，hover/focus 轉 primary
  用 !important 覆蓋 base theme 高特異性規則（首頁 h2 是 body.path-frontpage .layout .block-inner > h2 = 0-3-1；.entity-title a 是 0-1-1 後於此規則宣告） */
.bg-dark {
  & .block-title {
    color: var(--ob-white) !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
  & a,
  & a:link,
  & a:visited {
    color: var(--ob-white) !important;
  }
  & a:hover,
  & a:focus {
    color: var(--ob-primary) !important;
  }
}

/*ANCHOR - refs #46372 文末結束符號 */
.end-of-text-marker {
  display: inline-block;
  block-size: 1em;
  aspect-ratio: 3 / 2;
  margin-inline-start: 0.25em;
  vertical-align: -0.125em;
  background: url("images/logomark.svg") center / contain no-repeat;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  color: transparent;
  user-select: none;
  print-color-adjust: exact;
}

/*ANCHOR - trim-N 文字截斷 */
[class*="trim-"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trim-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.trim-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.trim-4 { -webkit-line-clamp: 4; line-clamp: 4; }

/*ANCHOR - scroll-x 手機水平捲動（出血到 --pad 外；桌機由 grid--N-columns 接管）
  Bootstrap .d-grid = display:grid !important → 用 grid-auto-flow:column 做橫捲、不與 BS 打架 */
.scroll-x ul.d-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
  gap: 32px;
  margin-block: 0;
  margin-inline: calc((100% - 100vw) / 2);   /* 出血到螢幕邊：100%=container 內容寬、100vw=視窗寬，差值/2=內容起點到螢幕邊的距離（不論 BS container 斷到哪一階都成立） */
  padding-block: 0;
  padding-inline: calc((100vw - 100%) / 2);  /* 補回同距，卡片起點對齊 container 內容 */
  overflow-x: auto;
  list-style: none;
}

/*ANCHOR - grid--6-columns 卡片格線（fig 卡 242、gap 30、內容寬 1600） */
.grid--6-columns ul.d-grid {
  @media (min-width: 768px) {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;

    /* fig 手機標題 4 行(786:1914 h=88)、桌機 3 行(786:1830 h=84) */
    & .trim-4 { -webkit-line-clamp: 3; line-clamp: 3; }
  }
}

/*ANCHOR - grid--3-columns 卡片格線
  fig 3 欄、內容寬 1472、卡 405、水平 gap 128、垂直 64（斜率取 768→1728 內插，讓 1728 剛好落在設計值；
  舊係數在 1728 只到 117/58.7，卡片因此偏大）；rows 由使用者按需在深層 override（如 .name-review 3×3 stagger）*/
.grid--3-columns ul.d-grid {
  @media (min-width: 768px) {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(24px, 10.83vw - 59.2px, 128px);
    row-gap: clamp(32px, 3.33vw + 6.4px, 64px);
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
  }
}

/*ANCHOR - grid--4-columns 卡片格線（fig 文末 4 欄：內容寬 1472、卡 338、gap 40；
  768–1199 降 2 欄（無設計稿，比照 article_list 漸進）；手機單欄、無 scroll-x → ul reset 自帶 */
.grid--4-columns ul.d-grid {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;

  @media (min-width: 768px) {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 1.67vw + 11.2px, 40px);
    row-gap: clamp(32px, 3.33vw + 6.4px, 64px);
    overflow-x: visible;
  }
  @media (min-width: 1200px) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*ANCHOR - grid--2-columns 卡片格線（fig 卡 704、gap 64/48；手機直排卡間 24；
  無 scroll-x 搭配 → ul reset 自帶（list padding／margin），單欄 minmax 讓卡 stretch 滿容器 */
.grid--2-columns ul.d-grid {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
  margin-block: 0;
  margin-inline: 0;
  padding-inline: 0;
  list-style: none;

  @media (min-width: 768px) {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(24px, 9.26vw - 47.1px, 64px);
    row-gap: clamp(24px, 5.56vw - 18.7px, 48px);
    overflow-x: visible;
  }
}

/*ANCHOR - entity-badge 分類徽章（青藍描邊；字級 fig tag 母版 31×21 量測值，非 token） */
.entity-badge {
  width: fit-content;
  padding: 3px 4px;
  border: 1px solid var(--ob-primary);
  color: var(--ob-primary);
  font-family: var(--ob-font-sans);
  font-size: 12px;
  line-height: 1;

  &:empty { display: none; }

  & a {
    color: inherit;
    text-decoration: none;
  }
}

/*ANCHOR - entity-cat 分類（青字無框；有別於描邊的 .entity-badge。fig 1549:3554 卡頂「報導」實測 #00A0B4／字身 15px） */
.entity-cat {
  font-family: var(--ob-font-sans);
  font-size: var(--ob-fs-body);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ob-primary);

  &:empty { display: none; }

  & a {
    color: inherit;
    text-decoration: none;

    &:hover,
    &:focus { color: var(--ob-primary-light); }
  }
}

/*ANCHOR - entity-tags 標籤列（多 tag 單行；右緣白淡出蓋截斷；#46353 列表卡） */
.entity-tags {
  position: relative;
  display: flex;
  gap: 12px;
  overflow: hidden;
  font-family: var(--ob-font-sans);

  &::after {
    content: '';
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 32px;
    background: linear-gradient(90deg, rgb(255 255 255 / 0), var(--ob-white));
    pointer-events: none;
  }

  & a {
    flex: none;
    padding: 5px 8px;
    border: 1px solid var(--ob-primary);
    color: var(--ob-primary);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;

    &:hover,
    &:focus {
      color: var(--ob-white);
      background: var(--ob-primary);
    }
  }
}

/*ANCHOR - entity-title 卡片標題 */
.entity-title {
  margin: 8px 0 0;
  font-family: var(--ob-font-serif);
  font-size: var(--ob-fs-card);
  font-weight: 700;                /* fig RAW 實測 Noto Serif TC Bold（786:1156 等），2026-07-16 客戶拍板由 500 改 700 */
  line-height: var(--ob-lh-base);
  color: var(--ob-ink);

  & a {
    color: inherit;
    text-decoration: none;

    &:hover,
    &:focus { color: var(--ob-primary); }
  }
}

/*ANCHOR - entity-tag-header tag 標頭（tag-sp 元件：青字＋小 chevron＋細線補滿整寬；專欄/議題共用） */
.entity-tag-header {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--ob-font-sans);
  font-size: var(--ob-fs-card-sm);
  font-weight: 500;
  line-height: 1;

  & a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ob-primary);
    text-decoration: none;

    &:hover,
    &:focus { color: var(--ob-primary-light); }

    &::after {
      content: '';
      width: 24px;
      height: 24px;
      background: url(images/icon-chevron-right.svg) no-repeat center / contain;  /* 40×40 檔縮 24（客戶指示重用） */
    }
  }

  &::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ob-gray-mid);   /* fig 實測 #9E9E9E（--ob-border 與灰底同色會隱形） */
  }
}

/*ANCHOR - entity-summary 卡片摘要（body trim；fig 摘要灰 #424242 tokens 無對應） */
.entity-summary {
  margin-top: 12px;
  font-family: var(--ob-font-sans);
  font-size: var(--ob-fs-small);
  line-height: 1.5;
  color: #424242;
}

/*ANCHOR - entity-author 作者列（by＋名字＋32 圓頭像；手機 fig 無頭像） */
.entity-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ob-font-serif);
  font-size: var(--ob-fs-meta);
  font-weight: 500;
  line-height: 1;
  color: var(--ob-ink);

  &::before {
    content: 'by';
    font-family: var(--ob-font-serif-en);
  }

  & a {
    color: inherit;
    text-decoration: none;

    &:hover,
    &:focus { color: var(--ob-primary); }
  }

  & img {
    display: none;

    @media (min-width: 768px) {
      display: block;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
    }
  }
}

/*ANCHOR - 首頁區塊標題（logomark＋置中＋全寬底線；12 區塊共用＋文末三區（#46355；:where 讓 id 不抬升 specificity，維持 bg-primary 等後續 override 生效）） */
:is(body.path-frontpage .layout, :where(#article-more-column, #article-readmore, #article-picks)) .block-inner > h2 {
  margin: 0 0 clamp(24px, 1.67vw + 11.2px, 40px);
  padding-bottom: clamp(24px, 1.67vw + 11.2px, 40px);
  border-bottom: 1px solid var(--ob-border);
  font-family: var(--ob-font-serif);
  font-size: var(--ob-fs-title);
  font-weight: 700;
  letter-spacing: var(--ob-ls-wide);
  line-height: var(--ob-lh-tight);
  text-align: center;
  color: var(--ob-ink);

  &::before {
    content: '';
    display: block;
    width: clamp(20px, 0.21vw + 18.4px, 22px);
    height: clamp(13px, 0.21vw + 11.4px, 15px);
    margin: 0 auto 8px;
    background: url(images/icon-logomark.svg) no-repeat center / contain;
  }
}

/*ANCHOR - 首頁區塊標題：無底線款（fig 輪播區、專欄 h2 無底線） */
body.path-frontpage .layout .block-inner:has(.ob-carousel, .name-column) > h2 {
  padding-bottom: 0;
  border-bottom: none;
}

/*ANCHOR - Views Pager 通用（全站 views full pager；fig pagination-46/40 母版：
  圓 46(手機 40)、字 14 sans、僅當前頁青描邊圈、prev/next=chevron+文字、首末跳頁鈕藏）

  分頁區外框（上方 2px 線＋上下間距）＝全站一致，故放通用；
  選 nav[aria-label] 而非 .pagination，範圍才精準限在 views pager（.pagination 是 BS 通用 class，
  netiCRM 等模組頁面也會用到）。各頁 fig 值不同者只覆寫差額，不重述 border。 */
nav[aria-label='pagination-heading'] {
  margin-top: clamp(40px, 2.08vw + 24px, 60px);
  border-top: 2px solid var(--ob-border);
  padding-top: clamp(32px, 1.67vw + 19.2px, 48px);
}

.pagination {
  --bs-pagination-focus-box-shadow: none;

  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-family: var(--ob-font-sans);
  font-size: var(--ob-fs-small);

  /* 首末頁跳頁鈕：箭頭鈕（含 aria-hidden span）但無 rel 者＝first/last，設計稿隱藏 */
  & .page-item:has(.page-link > span[aria-hidden]):not(:has([rel='prev'], [rel='next'])) {
    display: none;
  }

  & .page-item .page-link {   /* 0-2-1：贏過 BS .page-item:first-child .page-link 的角半徑 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 0.63vw + 35.2px, 46px);
    height: clamp(40px, 0.63vw + 35.2px, 46px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--ob-ink);
  }

  & a.page-link {
    &:hover,
    &:focus {
      background: none;
      color: var(--ob-primary);
    }
  }

  & .page-item.active .page-link {
    border: 2px solid var(--ob-primary);
  }

  /* prev/next：chevron＋顯示被 sr 藏的「上一頁/下一頁」標籤；next 文字在前 chevron 在後
     0-3-1 才贏過上面圓圈的 width clamp */
  & .page-item :is([rel='prev'], [rel='next']).page-link {
    width: auto;
    gap: 8px;

    & > span[aria-hidden] { font-size: 20px; }

    & .visually-hidden {
      position: static !important;
      width: auto !important;
      height: auto !important;
      margin: 0 !important;
      overflow: visible !important;
      clip: auto !important;
      clip-path: none !important;
      white-space: nowrap !important;
    }
  }

  & .page-item [rel='next'].page-link { flex-direction: row-reverse; }
}

/*ANCHOR - CTA 橫幅(block_content type cta:插圖+標題+內文+連結;#5 電子報/#11 好書獎)
  桌機置中無分隔線;手機頂細線;圖 @2x 由 grid 欄寬 80→100 拘束 */
.block-content-cta {
  margin-block: clamp(40px, 5.56vw - 2.7px, 64px);
  border-top: 1px solid var(--ob-border);
  padding-top: 20px;

  @media (min-width: 768px) {
    border-top: 0;
    padding-top: 0;
  }

  & .block-content {
    display: grid;
    grid-template-columns: clamp(80px, 4.63vw + 44.4px, 100px) auto;
    column-gap: 24px;
    row-gap: 8px;
    width: fit-content;
    margin-inline: auto;

    & .field--name-field-image {
      grid-row: 1 / 4;
      align-self: center;

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

    & .field--name-field-title {
      font-family: var(--ob-font-serif);
      font-size: var(--ob-fs-card-lg);
      font-weight: 700;
      line-height: var(--ob-lh-snug);
      color: var(--ob-ink);
    }

    & .field--name-body {
      font-family: var(--ob-font-sans);
      font-size: clamp(14px, 0.46vw + 10.4px, 16px);
      line-height: var(--ob-lh-base);
      color: #424242;

      & p { margin: 0; }
    }

    & .field--name-field-link a {
      display: inline-flex;
      align-items: center;
      font-family: var(--ob-font-sans);
      font-size: clamp(14px, 0.23vw + 12.2px, 15px);
      font-weight: 500;
      line-height: 1;
      color: var(--ob-ink);
      text-decoration: none;

      &:hover,
      &:focus { color: var(--ob-primary); }

      &::after {
        content: '';
        width: clamp(20px, 0.93vw + 12.9px, 24px);
        height: clamp(20px, 0.93vw + 12.9px, 24px);
        background: url(images/icon-chevron-right.svg) no-repeat center / contain;
      }
    }
  }
}

/*!SECTION */

/*SECTION - Slick 輪播 */
/* .ob-carousel 基底（views css_class）＋三變體：
   ob_cards_lg / ob_cards_sm（slick 自帶 optionset class 區分幾何）、.ob-kv（首頁 KV）。
   進度線粗細/配色開放 --track-* / --bar-* 變數，變體與 #child 只覆寫變數。 */

/*ANCHOR - ob-carousel 基底 */
.ob-carousel {
  --track-h: 1.5px;                 /* 進度線軌（fig 790:2665） */
  --track-c: var(--ob-gray-mid);
  --bar-h: 3px;                     /* 進度線高亮段 */
  --bar-c: var(--ob-primary-light);
  position: relative;               /* 更多連結錨點＝view 本體（登入態 block 內多出 admin div 也不影響）；KV 變體本就 relative */

  & .view-content { --bs-gutter-x: 0; }

  /*ANCHOR - 進度線（slick dots 排成分段線；li=段 flex:1 均分、button 藏字外擴點擊區；定位歸各變體） */
  & .slick-dots {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      position: relative;
      flex: 1;
      height: var(--track-h);
      margin: 0;
      background: var(--track-c);

      &.slick-active {
        height: var(--bar-h);
        border-radius: calc(var(--bar-h) / 2);
        background: var(--bar-c);
      }

      & button {
        position: absolute;
        inset: -8px 0;
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 0;
        color: transparent;
        cursor: pointer;
        &::before { content: none; }
      }
    }
  }

  /*ANCHOR - chevron 箭頭（KV 變體整組隱藏；unslick 後殘留的 server-side nav 一併藏） */
  & .slick__arrow button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent no-repeat center;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    &.slick-prev { background-image: url(images/icon-chevron-left.svg); }
    &.slick-next { background-image: url(images/icon-chevron-right.svg); }
  }
  & .slick__slider:not(.slick-initialized) + .slick__arrow { display: none; }

  /*ANCHOR - 卡圖 + 卡標題間距（fig 圖下 16→24） */
  & .views-field-field-image img {
    display: block;
    width: 100%;
    height: auto;
  }
  & .entity-title { margin-top: clamp(16px, 1.85vw + 1.78px, 24px); }

  /*ANCHOR - 更多連結（views「建立更多連結」+自訂網址）：手機=卡下左向；桌機=右上與 h2 同排
    垂直錨定 view 本體頂上 32（fig 卡頂 145 − 更多底 113），不吃 h2 前登入態多出的 admin div；
    右緣 = 卡片內容右緣（cp+pad = lg 96+32 = sm 108+20 = 128，slider 1728 封頂後再加置中餘量） */
  & .more-link {
    margin-top: 32px;
    margin-inline: max(0px, calc(24px - (100vw - 100%) / 2));  /* 對齊手機卡片起點（滿版容器=24、container 內=0） */
    font-family: var(--ob-font-sans);
    font-size: clamp(14px, 0.23vw + 12.2px, 15px);
    font-weight: 700;
    line-height: 1;
    @media (min-width: 768px) {
      position: absolute;
      bottom: calc(100% + 32px);
      right: calc((100% - min(100%, 1728px)) / 2 + 128px);
      margin: 0;
      font-weight: 500;
    }

    & a {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--ob-ink);
      text-decoration: none;
      &::after {
        content: '';
        width: 26px;
        height: 16px;
        background: url(images/icon-more.svg) no-repeat center;  /* 待 Figma 匯出 icon-more.svg（26×16 箭頭） */
      }
      &:hover,
      &:focus { color: var(--ob-primary); }
    }
  }
}

/*ANCHOR - 卡片輪播幾何（ob_cards_lg / ob_cards_sm 共通；KV 不受影響）
  桌機（初始化）＝centerMode：slide 內距=gap/2、optionset centerPadding=peek+gap/2、1728 封頂對 fig；
  手機（<768 unslick）＝橫捲出血（同 scroll-x 出血公式，卡寬 --card-w） */
[class*="slick--optionset--ob-cards"] {
  position: relative;               /* 箭頭 absolute 錨點 */
  max-width: 1728px;
  margin-inline: auto;

  & .slick__slider:not(.slick-initialized) {
    display: flex;
    gap: 32px;
    margin-inline: calc((100% - 100vw) / 2);
    padding-inline: max(24px, calc((100vw - 100%) / 2));
    overflow-x: auto;
    & .slick__slide { flex: 0 0 var(--card-w); }
  }

  & .slick__slider.slick-initialized {
    padding-bottom: 80px;           /* 卡下 40 gap + 40 控制列 */
    & .slick__slide { padding-inline: var(--card-pad); }
    & .slick-dots {
      position: absolute;
      bottom: calc(20px - var(--bar-h) / 2);   /* 對齊控制列垂直中線 */
      left: 50%;
      width: 338px;
      translate: -50% 0;
    }
  }

  & .slick__arrow {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 482px;
    height: 40px;
    translate: -50% 0;
    pointer-events: none;           /* 中央進度線可點，僅按鈕收事件 */
    & button { pointer-events: auto; }
  }
}

/*ANCHOR - lg（焦點作家/童書：桌機一屏2張 卡705 gap64 peek64；手機卡320） */
.slick--optionset--ob-cards-lg {
  --card-w: 320px;
  --card-pad: 32px;
}

/*ANCHOR - sm（報導/漫畫：桌機一屏4張 卡338 gap40 peek88；手機卡254） */
.slick--optionset--ob-cards-sm {
  --card-w: 254px;
  --card-pad: 20px;
}

/*ANCHOR - bar（播客：桌機容器內 4 張滿排 卡320 gap64、右端 bleed 露第 5 張；手機卡254）
  非 centerMode（optionset 已關）：list 負 margin 抵掉首末 slide 內距 → 卡與容器齊左邊；
  overflow visible 讓超出容器的下一張自然露出（body overflow-x hidden 擋捲軸） */
.slick--optionset--ob-cards-bar {
  --card-w: 254px;
  --card-pad: 32px;

  & .slick__slider.slick-initialized .slick-list {
    margin-inline: calc(-1 * var(--card-pad));
    overflow: visible;
  }
}

/*ANCHOR - bg-primary 配色變體（青藍底區段通用，不綁 section id：軌黑/亮黃、字白、hover 一律 accent-yellow、logomark 黃版） */
.layout.bg-primary {
  & .ob-carousel {
    --track-c: var(--ob-ink);
    --bar-c: var(--ob-accent-yellow);
  }

  & .entity-title {
    color: #F7F7F7;                 /* fig 786:1199 */
    & a:hover,
    & a:focus { color: var(--ob-accent-yellow); }
  }

  & .more-link a {
    &:hover,
    &:focus { color: var(--ob-accent-yellow); }
  }
}

body.path-frontpage .layout.bg-primary .block-inner > h2 {
  color: #F7F7F7;
  &::before { background-image: url(images/icon-logomark-yellow.svg); }
}

/*ANCHOR - 深色帶配色變體（bg-dark 輪播：實心細白軌、箭頭反白、更多淺灰；#12 播客）
  PNG 實測：軌 #F3F5F5、箭頭近白（invert 反轉 #191C1B）、更多 #E5E7EB */
.layout.bg-dark {
  & .ob-carousel { --track-c: #F3F5F5; }

  & .more-link a {
    color: var(--ob-gray-light) !important;

    &::after { filter: invert(1); }   /* icon-more.svg 黑 → 白（#46350 二輪退件 3）*/

    &:hover,
    &:focus { color: var(--ob-primary-light) !important; }
  }

  & .slick__arrow button { filter: invert(1); }   /* 透明底不受影響，只反轉箭頭圖 */
}

/*ANCHOR - 播客深色帶 section 內距（h2 在 view 之外 → 內距掛 section 才含標題上緣） */
.layout.bg-dark:has(.name-podcast) {
  padding-block: clamp(32px, 5.56vw - 10.7px, 56px) clamp(40px, 5.56vw - 2.7px, 64px);
}

/*ANCHOR - name-podcast 播客橫條卡（方圖左＋標題右＋圖角耳機 badge） */
.name-podcast {
  & .slick__slide {
    display: grid;
    grid-template-columns: clamp(100px, 6.94vw + 46.7px, 130px) 1fr;
    column-gap: clamp(20px, 0.93vw + 12.9px, 24px);
    align-items: center;
  }

  & .views-field-field-image {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      right: clamp(4px, 0.93vw - 3.1px, 8px);
      bottom: clamp(4px, 0.93vw - 3.1px, 8px);
      width: 24px;
      height: 24px;
      background: url(images/icon-headphone.svg) no-repeat center;
      pointer-events: none;
    }
  }

  & .entity-title {
    margin-top: 0;
    font-size: clamp(14px, 0.46vw + 10.4px, 16px);
    line-height: 22px;

    & a {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      overflow: hidden;

      @media (min-width: 768px) {
        -webkit-line-clamp: 5;
        line-clamp: 5;
      }
    }
  }
}

/*ANCHOR - 變體 KV 大圖輪播（滿版 overlay；等粗白軌進度線；無箭頭；01/05 計數） */
.ob-kv {
  --kv-pad: clamp(24px, 4.17vw - 8px, 64px);  /* KV 在 full-width 滿版內自管內距(fig 24→64)，與 container 無關 */
  --track-h: 2px;
  --track-c: rgba(243, 245, 245, 0.35);
  --bar-h: 2px;
  --bar-c: var(--ob-primary-light);
  position: relative; /* absolute 子層(圖/內文/計數/箭頭)的 anchor；滿版出血改由 section .full-width 承擔 */

  /*ANCHOR - slide 尺寸：手機=視窗高-header 80；桌機=1728:855 比例（fig kv 786:1124）
    ⚠ 原 max-height: calc(100svh - 240px) 已移除（#46350 退件 3：PM 可視高約 460 時只剩 220）；
    代價＝高視窗時 KV 逼近滿版、下滑箭頭可能落在摺線下，已於 issue 回覆提請 PM 定奪 */
  & .slick__slide {
    position: relative;
    height: calc(100svh - 80px);
    @media (min-width: 768px) {
      height: auto;
      aspect-ratio: 1728 / 855;
    }
  }

  /*ANCHOR - 圖片：絕對填滿 + cover；手機/桌機雙圖切換（手機圖空值時 views 已 fallback 電腦圖） */
  & .views-field-field-slide-image,
  & .views-field-field-mobile-image {
    position: absolute;
    inset: 0;
    & .field-content,
    & img { width: 100%; height: 100%; }
    & img { display: block; object-fit: cover; }
  }
  & .views-field-field-slide-image {
    display: none;
    @media (min-width: 768px) { display: block; }
  }
  & .views-field-field-mobile-image {
    @media (min-width: 768px) { display: none; }
  }

  /*ANCHOR - cover 漸層 */
  & .slick__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2, 2, 2, 0) 45%, rgba(2, 2, 2, 0.55) 100%);
  }

  /*ANCHOR - 內文（body）＋ logomark */
  & .views-field-body {
    position: absolute;
    z-index: 2;
    left: var(--kv-pad);
    bottom: clamp(150px, 0.73vw + 144.4px, 157px);
    width: min(710px, calc(100% - var(--kv-pad) * 2));
    color: var(--ob-white);
    font-family: var(--ob-font-serif);
    font-size: var(--ob-fs-hero);
    font-weight: 700;
    line-height: 1.17;
    &::before {
      content: '';
      display: block;
      width: 24px;
      height: 16px;
      margin-bottom: clamp(20px, 0.417vw + 16.8px, 24px);
      background: url(images/icon-logomark.svg) no-repeat center / contain;
    }
    & p { margin: 0; }
    &:has(.field-content:empty) { display: none; }
  }

  /*ANCHOR - 整卡連結 */
  & .views-field-field-slide-link .ob-kv-link {
    position: absolute;
    inset: 0;
    z-index: 3;
  }

  /*ANCHOR - 進度線定位（結構/配色繼承基底，此處只管位置與寬度） */
  & .slick-dots {
    position: absolute;
    z-index: 4;
    left: var(--kv-pad);
    bottom: clamp(97px, -2.19vw + 134.8px, 118px);
    width: min(700px, calc(100% - var(--kv-pad) * 2));
  }

  /*ANCHOR - 01/05 計數（js/custom.js 生成 .ob-kv-counter） */
  & .ob-kv-counter {
    position: absolute;
    z-index: 4;
    left: var(--kv-pad);
    bottom: clamp(60px, -2.29vw + 99.6px, 82px);
    color: var(--ob-white);
    font-family: var(--ob-font-serif-en);
    font-size: clamp(11px, 0.104vw + 10.2px, 12px);
    line-height: 1;
    @media (min-width: 768px) { letter-spacing: 0.2em; }
    & .ob-kv-counter-current { color: var(--ob-primary-light); }
  }

  /*ANCHOR - 下滑提示箭頭 */
  &::after {
    content: '';
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: clamp(8px, 1.67vw - 4.8px, 24px);
    width: 40px;
    height: 40px;
    translate: -50% 0;
    pointer-events: none;
    background: url(images/icon-arrow-down.svg) no-repeat center;
  }

  /*ANCHOR - 藏 server-side 箭頭（optionset arrows=false，JS 不綁定） */
  & .slick__arrow { display: none; }
}

/*!SECTION */

/*SECTION - 分類/Tag 列表頁（#46353：LB section #title-img + #list；fig 1401:7425 大圖 / 1401:6853 無大圖） */

/*ANCHOR - 無大圖版滿版漸層（fig bg-top：#00B9C8=--ob-primary-light 10%→0 垂直 120 高；掛 section 才滿版——article_cat region 勾 container、hero 被限寬。:has 不可巢狀 :has → 拆並列） */
#title-img:has(.name-term-hero):not(:has(.entity-image img)) {
  background: linear-gradient(180deg, rgb(0 185 200 / 0.1), rgb(0 185 200 / 0) 120px);
}

/*ANCHOR - name-term-hero 分類主視覺（無圖=置中深字標題+藍漸層+細線；有圖=滿版圖+底部漸層+白字 overlay） */
.name-term-hero {
  & .term-title {
    margin: 0;  /* name 欄位 element_type=h1：歸零 heading 預設 margin */
    font-family: var(--ob-font-serif);
    font-size: var(--ob-fs-hero);
    font-weight: 700;
    letter-spacing: var(--ob-ls-wide);
    line-height: var(--ob-lh-snug);
    text-align: center;
    color: var(--ob-ink);
  }

  /* 不顯示分類標題（客戶拍板 display:none，不做無障礙；DOM 照輸出、metatag 不受影響） */
  & .term-title.hide-term-title { display: none; }

  /*ANCHOR - 無大圖版（fig 1401:6853：上 70 標題 70 線；線=line-1.5 2px 全內容寬） */
  &:not(:has(.entity-image img)) {
    padding-top: clamp(40px, 3.13vw + 16px, 70px);

    &::after {
      content: '';
      display: block;
      width: min(1474px, 100% - 48px);
      margin: clamp(40px, 3.13vw + 16px, 70px) auto 0;
      border-top: 2px solid var(--ob-border);
    }
  }

  /*ANCHOR - 大圖版（fig 1401:7425：滿版 1728×925 圖＋底部黑漸層 298＋白字標題 底距 124）
    標題改走 grid 疊在圖的格子裡（同 .name-topic-hero）：原本 absolute bottom:124 是量整個 hero 的底，
    #46359 加了描述黑帶後標題就沉進黑帶與描述交疊 */
  &:has(.entity-image img) {
    & .entity-row-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    & .views-field-field-image,
    & .views-field-name { grid-area: 1 / 1; }

    & .views-field-description__value { grid-area: 2 / 1; }

    & .entity-image {
      position: relative;

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

      &::after {
        content: '';
        position: absolute;
        inset: auto 0 0;
        height: clamp(140px, 17.25vw, 298px);
        background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / 0.8));
        pointer-events: none;
      }
    }

    & .views-field-name {
      align-self: end;
      z-index: 1;   /* 壓過 .entity-image::after 漸層（absolute 會畫在 static 之上） */
      padding-bottom: clamp(32px, 9.58vw - 41.6px, 124px);
      text-align: center;
    }

    & .term-title {
      color: var(--ob-white);

      &::before {
        content: '';
        display: block;
        width: 22px;
        height: 15px;
        margin: 0 auto 24px;
        background: url(images/icon-logomark.svg) no-repeat center / contain;
      }
    }

    /* 主圖自帶標題（勾不顯示）→ 漸層一併拿掉 */
    &:has(.hide-term-title) .entity-image::after { content: none; }

    /*ANCHOR - 專欄描述黑帶（#46359：tag description，同專題介紹帶；描述空的 term 由 views hide_empty 不輸出） */
    & .views-field-description__value { background: var(--ob-dark); }
  }

  /*ANCHOR - 無圖＋有描述（設計稿無此情境）：深字置中接在標題下、不做黑帶，細線仍在最底 */
  &:not(:has(.entity-image img)) .term-intro {
    padding-block: 24px 0;
    color: var(--ob-ink);
  }
}

/*ANCHOR - #list 列表區（fig：hero 下 56、底距 banner 100；內容寬 1474） */
#list {
  margin-top: clamp(32px, 2.5vw + 12.8px, 56px);
  margin-bottom: clamp(56px, 4.58vw + 20.8px, 100px);

  & .block-inner {
    max-width: 1474px;
    margin-inline: auto;

    /*ANCHOR - 相關文章小標（fig Group 77：logomark 置中於字上；水平置中；預設藏、僅大圖版顯示；下距格線 50） */
    & > h2 {
      display: none;
      width: fit-content;
      margin: 0 auto clamp(32px, 1.88vw + 17.6px, 50px);

      body:has(.name-term-hero .entity-image img) & { display: block; }
      font-family: var(--ob-font-serif);
      font-size: var(--ob-fs-title);
      font-weight: 700;
      letter-spacing: var(--ob-ls-wide);
      line-height: var(--ob-lh-tight);
      color: var(--ob-ink);

      &::before {
        content: '';
        display: block;
        width: 22px;
        height: 15px;
        margin: 0 auto 8px;
        background: url(images/icon-logomark.svg) no-repeat center / contain;
      }
    }
  }
}

/*ANCHOR - name-article-list 文章卡格線（fig 卡 464、gap 41/61；桌機 3 欄、平板 2 欄、手機 1 欄） */
.name-article-list {
  /* .view-content=BS .row（flex）：歸零 gutter、wrapper 撐滿（flex item auto 寬會被 grid 內容撐開） */
  & .view-content { --bs-gutter-x: 0; }
  & .view-content > .grid--3-columns { width: 100%; }

  & .grid--3-columns ul.d-grid {
    /* 手機 base：單欄；無 scroll-x 搭配 → ul reset 自帶 */
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));  /* minmax(0,…)：nowrap tag 列會撐爆 1fr 的 auto 下限 */
      column-gap: clamp(24px, 1.77vw + 10.4px, 41px);
      row-gap: clamp(32px, 3.02vw + 8.8px, 61px);
    }
    @media (min-width: 1200px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  & .entity-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ob-radius);
  }

  /* 多欄時標題／摘要各鎖 2 行高 → 同列的摘要與 tag 齊上（fig 標題區 62、摘要 52）；
     手機單欄無對齊需求，鎖高只會多出空白 */
  & .entity-title {
    margin-top: clamp(16px, 0.83vw + 9.6px, 24px);

    @media (min-width: 768px) { min-height: calc(var(--ob-lh-base) * 2em); }
  }

  /* line-clamp 遇 block 子元素（body 輸出的 p/ul/h3…）剪不到行 → 全數攤平＋字體強制繼承
     （display:contents 不重置字級；img 等 replaced element 攤平＝不渲染，摘要不出圖） */
  & .entity-summary * {
    display: contents;
    font: inherit;
    color: inherit;
  }

  & .entity-summary {
    @media (min-width: 768px) { min-height: 3em; }   /* .entity-summary line-height 1.5 × 2 行 */
  }

  & .entity-tags { margin-top: 16px; }

  /* 分頁列 fig Group 500（格線下 60、線 2px、線下 48）＝通用預設值，不必覆寫 */
}

/*!SECTION */

/*SECTION - 專題/年度列表頁（#46356/#46360：landing #latest/#banner + #list；fig 1008:6199） */

/*ANCHOR - #latest 最新專題區（內容寬 1474） */
#latest {
  margin-top: clamp(32px, 2.5vw + 12.8px, 56px);

  & .block-inner {
    max-width: 1474px;
    margin-inline: auto;
  }

}

/*ANCHOR - #banner 年度主視覺（滿版圖；base theme 對 field--type-image 設 float:left → section 塌 0、#list 上跳繞排，須歸零） */
#banner {
  & .field--name-field-image {
    float: none;
    margin: 0;
  }

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

/*ANCHOR - 專題頁 #list：顯示「更多專題」小標（通用款預設藏）＋上緣線（fig line-1.5；年度 banner 下無線） */
body:has(.name-topic-latest) #list .block-inner {
  border-top: 2px solid var(--ob-border);
  padding-top: clamp(32px, 2.5vw + 12.8px, 56px);

  & > h2 { display: block; }
}

/*ANCHOR - name-topic-latest 最新專題（fig Group 404：左圖右文，下方 4 卡跨欄） */
.name-topic-latest {
  & .entity-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ob-radius);
  }

  & > .view-inner > .view-content {
    --bs-gutter-x: 0;

    & > .entity-row { width: 100%; }

    & > .entity-row > .entity-row-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr);

      @media (min-width: 768px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto 1fr;
        column-gap: clamp(24px, 1.67vw + 11.2px, 40px);

        & > .views-field-field-image { grid-row: 1 / 4; }
      }

      /*ANCHOR - 專題名（logomark 上、26 ExtraBold；手機圖下 24） */
      & > .views-field-title .entity-title {
        margin-top: 24px;
        font-family: var(--ob-font-serif);
        font-size: var(--ob-fs-title);
        font-weight: 800;
        letter-spacing: 0.05em;
        line-height: var(--ob-lh-snug);

        @media (min-width: 768px) { margin-top: 0; }

        &::before {
          content: '';
          display: block;
          width: 24px;
          height: 16px;
          margin-bottom: 8px;
          background: url(images/icon-logomark.svg) no-repeat center / contain;
        }
      }

      /*ANCHOR - 介紹文（18 sans lh1.7；body 混排攤平同 article-list） */
      & > .views-field-body .entity-summary {
        margin-top: clamp(24px, 1.67vw + 11.2px, 40px);
        font-family: var(--ob-font-sans);
        font-size: var(--ob-fs-card-sm);
        line-height: 1.7;

        &:empty { display: none; }

        & * {
          display: contents;
          font: inherit;
          color: inherit;
        }
      }

      /*ANCHOR - 進入專題（15 sans Medium＋icon-more） */
      & > .views-field-view-node {
        margin-top: clamp(24px, 1.67vw + 11.2px, 40px);
        align-self: start;

        & .entity-more a {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-family: var(--ob-font-sans);
          font-size: var(--ob-fs-meta);
          font-weight: 500;
          color: var(--ob-ink);
          text-decoration: none;

          &::after {
            content: '';
            width: 26px;
            height: 16px;
            background: url(images/icon-more.svg) no-repeat center / contain;
          }

          &:hover { color: var(--ob-primary); }
        }
      }

      /*ANCHOR - 文章挑選跨欄（fig 圖下 40） */
      & > .views-field-view {
        grid-column: 1 / -1;
        margin-top: clamp(24px, 1.67vw + 11.2px, 40px);
      }
    }
  }
}

/*ANCHOR - name-topic-picks 文章挑選 4 卡（fig 卡 338 gap 40；桌機 4 欄、平板 2 欄、手機 1 欄） */
.name-topic-picks {
  & .view-content {
    --bs-gutter-x: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(24px, 1.67vw + 11.2px, 40px);
    }
    @media (min-width: 1200px) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  & .entity-title {
    margin-top: clamp(16px, 0.83vw + 9.6px, 24px);
    font-family: var(--ob-font-serif);
    font-size: var(--ob-fs-card);
    font-weight: 700;
    line-height: var(--ob-lh-base);
  }
}

/*ANCHOR - 2×3 大卡（更多專題/年度列表/專欄列表共用；fig 卡 705、row-gap 68、題 22 ExtraBold＋chevron） */
.name-topic-list,
.name-year-list,
.name-column-list {
  & .view-content { --bs-gutter-x: 0; }
  & .view-content > .grid--2-columns { width: 100%; }

  /* 專欄 tag 沒代表圖（非必填）：view 輸出佔位 span → 同 card_lg 比例的灰底＋logomark */
  & .entity-image-placeholder {
    display: block;
    aspect-ratio: 1410 / 1058;
    border-radius: var(--ob-radius);
    background: var(--ob-gray-light) url(images/icon-logomark.svg) no-repeat center / 20% auto;
  }

  & ul.d-grid {
    @media (min-width: 768px) { row-gap: clamp(32px, 3.75vw + 3.2px, 68px); }
  }

  & .entity-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ob-radius);
  }

  & .entity-title {
    margin-top: clamp(16px, 0.42vw + 12.8px, 20px);
    font-family: var(--ob-font-serif);
    font-size: clamp(18px, 0.93vw + 10.89px, 22px);
    font-weight: 800;
    line-height: var(--ob-lh-base);

    & a::after {
      content: '';
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-left: 8px;
      vertical-align: -5px;
      background: url(images/icon-chevron-right.svg) no-repeat center / contain;
    }
  }

  /*ANCHOR - 分頁列（fig：格線下 64、線下 56；線本身走通用） */
  & nav[aria-label='pagination-heading'] {
    margin-top: clamp(40px, 2.5vw + 20.8px, 64px);
    padding-top: clamp(32px, 2.5vw + 12.8px, 56px);
  }
}

/*!SECTION */

/*SECTION - 文章內頁（#46355：LB #article-hero + #article-main；fig 白 949:2659 / 深 1004:5324；
  「頁面樣式」→ body 兩軸 ob-article--{white|black} × --{normal|imgfull|mobile-imgfull}（theme preprocess_html）
  #46697 年度好書文章頁（node type year）共用本版型與同一組 LB section id，
  field_block 的 class 含 bundle 名 → 兩 bundle 以 :is() 並列 */

/*ANCHOR - #article-hero（正常圖版：漸層＋badge＋H1＋圖 1220＋圖說；子元素 order 供圖版軸翻轉） */
#article-hero {
  background: linear-gradient(180deg, rgb(0 185 200 / 0.1), rgb(0 185 200 / 0) 120px);

  & > .layout__region {
    display: flex;
    flex-direction: column;
  }

  /*ANCHOR - 標題區（fig：header 下 60、badge 下 12、H1 36 serif 置中 968、下距圖 50；order 掛 block 包裝層＝flex 子元素） */
  & .block-views-blockarticle-meta-block-2 { order: 1; }
  & .name-article-header {
    text-align: center;
    padding-top: clamp(32px, 6.48vw - 17.77px, 60px);
    padding-bottom: clamp(24px, 6.02vw - 22.22px, 50px);

    & .entity-badge { margin: 0 auto 12px; }

    & .article-title {
      max-width: 968px;
      margin: 0 auto;
      font-family: var(--ob-font-serif);
      font-size: clamp(24px, 2.78vw + 2.67px, 36px);
      font-weight: 700;
      line-height: var(--ob-lh-base);
      letter-spacing: var(--ob-ls-base);
      color: var(--ob-ink);
    }
  }

  /*ANCHOR - 代表圖（1220 置中；手機圖有值時 <768 用手機圖；base 對 field--type-image 的 float:left 歸零＝#banner 同雷） */
  & :is(.block-field-blocknodearticlefield-image, .block-field-blocknodeyearfield-image),
  & :is(.block-field-blocknodearticlefield-mobile-image, .block-field-blocknodeyearfield-mobile-image) {
    order: 2;
    width: min(1220px, 100%);
    margin-inline: auto;
    & .field--type-image { float: none; }
    & img { display: block; width: 100%; height: auto; }
  }
  & :is(.block-field-blocknodearticlefield-mobile-image, .block-field-blocknodeyearfield-mobile-image) {
    @media (min-width: 768px) { display: none; }
  }
  &:has(:is(.block-field-blocknodearticlefield-mobile-image, .block-field-blocknodeyearfield-mobile-image) img) :is(.block-field-blocknodearticlefield-image, .block-field-blocknodeyearfield-image) {
    display: none;
    @media (min-width: 768px) { display: block; }
  }

  /* base theme 給 img 的 margin-bottom:18px 會墊高圖與圖說的距離（26 vs fig 8）→ 歸零（#46355 二輪退件 2）*/
  & :is(.block-field-blocknodearticlefield-image, .block-field-blocknodeyearfield-image,
        .block-field-blocknodearticlefield-mobile-image, .block-field-blocknodeyearfield-mobile-image) img {
    margin-bottom: 0;
  }

  /*ANCHOR - 圖說（fig：圖下 8、13px sans #424242、齊圖左緣；內文 p 自帶字級 → 一併指定） */
  & :is(.block-field-blocknodearticlefield-caption, .block-field-blocknodeyearfield-caption) {
    order: 3;
    width: min(1220px, 100%);
    margin-inline: auto;
    margin-top: 8px;

    & .text-formatted,
    & p {
      font-family: var(--ob-font-sans);
      font-size: var(--ob-fs-xs);
      line-height: var(--ob-lh-base);
      color: var(--ob-gray-text);
      margin-bottom: 0;
    }
  }
}

/*ANCHOR - 滿版圖版（--imgfull 全斷點；照深稿順序 圖→圖說→標題） */
body.ob-article--imgfull #article-hero {
  background: none;

  & :is(.block-field-blocknodearticlefield-image, .block-field-blocknodeyearfield-image),
  & :is(.block-field-blocknodearticlefield-mobile-image, .block-field-blocknodeyearfield-mobile-image) {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  & :is(.block-field-blocknodearticlefield-caption, .block-field-blocknodeyearfield-caption) { width: 100%; margin-top: 12px; }

  & .block-views-blockarticle-meta-block-2 { order: 4; }
  & .name-article-header { padding-top: 36px; }
}

/*ANCHOR - 手機滿版圖版（--mobile-imgfull：<768 圖滿版，桌機同正常） */
body.ob-article--mobile-imgfull #article-hero {
  & :is(.block-field-blocknodearticlefield-image, .block-field-blocknodeyearfield-image),
  & :is(.block-field-blocknodearticlefield-mobile-image, .block-field-blocknodeyearfield-mobile-image) {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    @media (min-width: 768px) {
      position: static;
      left: auto;
      right: auto;
      width: min(1220px, 100%);
      margin-inline: auto;
    }
  }
}

/*ANCHOR - #article-main 三欄版型（base theme threecol_section.css 預設 ≥40em 就 25/50/25；這裡覆蓋成僅 ≥1200 才三欄、<1200 region 撐滿堆疊直排） */
#article-main {
  padding-top: clamp(32px, 4.17vw, 50px);
  container-type: inline-size;   /* 置入版型外擴（editor.css）以 100cqw 取本容器寬當上限 */

  /* <1200：覆蓋 core threecol_section.css 的 ≥40em 25/50/25，region 撐滿→上下堆疊；
     min-width 0＝置入版型外擴（968/1220）不撐大 region 的 min-content：<1200 region 才不會被撐寬到偏右溢出、
     ≥1200 內文欄才不會被擠到下一行（#46373 退件：1200~1500 視窗跑版） */
  & > .layout__region { flex-basis: 100%; min-width: 0; }

  @media (min-width: 1200px) {
    align-items: flex-start;

    & > .layout__region--first  { flex: 0 0 23.3%; padding-left: clamp(0px, 9.85vw - 118.2px, 52px); }  /* fig 左欄 367/1576；meta x128＝容器內縮 52（1200→1728 內插） */
    & > .layout__region--second { flex: 0 0 53.4%; }  /* fig body 842/1576 */
    & > .layout__region--third  { flex: 0 0 23.3%; }

    /* first 欄（meta＋分享）內容寬 213、齊左（fig meta 213） */
    & > .layout__region--first > * { max-width: 213px; }

    /* second 欄內文 842 置中（fig 內文寬 842） */
    & > .layout__region--second > * { max-width: 842px; margin-inline: auto; }
  }
}

/*ANCHOR - name-article-meta（fig Group 347：上下線 2px、label 欄 40、列距 12、線下 tags 換行 badge） */
#article-main .name-article-meta {
  font-family: var(--ob-font-sans);
  font-size: var(--ob-fs-meta);
  line-height: 20px;
  border-top: 2px solid var(--ob-ink);
  padding-top: 24px;
  margin-bottom: 32px;

  & .views-field {
    display: flex;
    gap: 12px;
    & + .views-field { margin-top: 12px; }
  }

  & .views-label { flex: 0 0 auto; white-space: nowrap; }

  /*ANCHOR - 作者 rendered entity（名＋職稱直排；h2 還原行內字級；藏 template 的 submitted「by」） */
  & .node--view-mode-meta {
    font-size: inherit;
    line-height: inherit;
    & .node__meta { display: none; }
    & .node__content { padding: 0; }   /* base 給 0 24px，會讓職稱比人名內縮 24（fig 兩者齊左） */
    & h2 {
      font-size: inherit;
      line-height: inherit;
      margin: 0;
      & a {
        color: var(--ob-primary);      /* fig：人名主青藍 #00A0B4 */
        text-decoration: none;
        &:hover { color: var(--ob-primary-light); }
      }
    }
    & .field--name-field-job-title {
      font-size: var(--ob-fs-meta);
      line-height: 20px;
      color: var(--ob-gray-mid);
    }
  }

  /*ANCHOR - 刊登列收線（fig：刊登下 24 線） */
  & .views-field-created {
    padding-bottom: 24px;
    border-bottom: 2px solid var(--ob-ink);
  }

  /*ANCHOR - tags（線下 24；換行 badge、關掉單行淡出） */
  & .views-field-field-tags { margin-top: 24px; }
  & .entity-tags {
    flex-wrap: wrap;
    row-gap: 16px;
    overflow: visible;
    &::after { content: none; }
  }
}

/*ANCHOR - 社群分享 netivism_share（#45652：LB region--first、接在 meta 下方直排；icon 用 Figma 匯出 SVG 蓋掉模組 FontAwesome） */
#article-main .block-netivism-share-block {
  & .netivism-share-container { justify-content: flex-start; }
  & ul.netivism-share-list {
    gap: 8px;
    margin-bottom: 0;                  /* base 的 ul 底部 margin 會讓 block 比 icon 列高 30.6，破壞工具列等距 */
    @media (min-width: 1200px) { flex-direction: column; }  /* 桌機直排；手機/平板維持模組預設橫排 */
  }
  & .nsi-webpage-link { order: -1; }  /* 複製連結排最前（對齊設計稿順序：複製→FB→X→LINE） */

  /*ANCHOR - SVG 按鈕（SVG 已含圓框 36×36；藏 FontAwesome 字形、清模組品牌色底） */
  & .netivism-share-icon { display: none; }
  & .netivism-share-btn {
    position: relative;                /* tooltip(::after) 的定位基準 */
    overflow: visible;                 /* 模組設了 overflow:hidden，會把溢出的 tooltip 裁掉 */
    width: 36px;
    height: 36px;
    border-radius: 0;
    background: none;

    /* icon 走 ::before：深色軸的反白 filter 才能只套 icon，不波及 ::after 的 tooltip */
    &::before {
      content: '';
      display: block;
      width: 36px;
      height: 36px;
      background: center / contain no-repeat;
    }
  }
  & .nsi-facebook     .netivism-share-btn::before { background-image: url(images/share-facebook.svg); }
  & .nsi-x-twitter    .netivism-share-btn::before { background-image: url(images/share-x.svg); }
  & .nsi-line         .netivism-share-btn::before { background-image: url(images/share-line.svg); }
  & .nsi-webpage-link .netivism-share-btn::before { background-image: url(images/share-copy-link.svg); }
}

/*ANCHOR - 編按/前言（fig 842×304：上下線 2px、內距 32；內文樣式沿用 editor.css .text-formatted） */
#article-main {
  & :is(.block-field-blocknodearticlefield-editor-note, .block-field-blocknodeyearfield-editor-note),
  & :is(.block-field-blocknodearticlefield-intro, .block-field-blocknodeyearfield-intro) {
    border-top: 2px solid var(--ob-ink);
    border-bottom: 2px solid var(--ob-ink);
    padding-block: 32px;
    margin-bottom: clamp(32px, 6.48vw - 17.77px, 60px);
  }

  /* 前言字體（fig inspect：Noto Serif TC / ExtraBold 800 / 20 / lh 200% / ls 2%；#46355 二輪退件 1）
     editor.css 的 .text-formatted p 帶自己的字級 → 一併指定才蓋得過 */
  & :is(.block-field-blocknodearticlefield-intro, .block-field-blocknodeyearfield-intro) {
    /* !important：舊站匯入的前言 85%（2089/2458）帶 <span style="font-family:標楷體">，
       inline style 只有 !important 蓋得過（含 83 篇帶 inline font-size）*/
    & .text-formatted,
    & p,
    & p *,
    & td,
    & td * {   /* td：舊站匯入的單格 <table> 前言（95.7%）文字直接在 td 裡，base 的 .node td 給 1rem 蓋掉繼承 → 一併指定 */
      font-family: var(--ob-font-serif) !important;
      font-size: calc(var(--ob-fs-body) * 1.25) !important;   /* 20；跟著字級調整同比例 20→22.5→25（#45652 9/18） */
      font-weight: 800;
      line-height: 2;
      letter-spacing: 0.02em;
    }
  }

  /* 舊站匯入把前言包進單格 <table> 當排版容器（2352/2458＝95.7%，其中多列/多欄各僅 1 篇）→
     單格者攤平成一般段落、去框線與內距，回到設計稿的純文字前言；真表格（多列或多欄）不動 */
  & :is(.block-field-blocknodearticlefield-editor-note, .block-field-blocknodeyearfield-editor-note,
        .block-field-blocknodearticlefield-intro, .block-field-blocknodeyearfield-intro) {
    & table:not(:has(tr + tr)):not(:has(td + td)) {
      &,
      & tbody,
      & tr,
      & td {
        display: block;
        width: auto !important;   /* 1154 篇帶 inline style="width:800px"（中欄為 842）*/
        border: 0;
        padding: 0;
      }
    }
  }
}

/*ANCHOR - 工具列排列（分享／字級／收藏三件；base=手機橫排接續，≥1200 回直排；meta 等其他元件仍整行） */
#article-main > .layout__region--first {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;                            /* 三件工具與分享 icon 同間距 */

  /* fig 順序：收藏→字級→複製→FB→X→LINE（分享 4 顆內部順序見社群分享區段的 order:-1）；meta 留 order 0 在最前 */
  & > .flag,
  & > .block-layout-builder:has(.flag) { order: 1; }
  & > .ob-fontsize { order: 2; }
  & > .block-netivism-share-block { order: 3; }

  /* meta 等非工具列元件整行；:has(.flag) 一併排除——登入態的收藏鈕由 LB 包在 .block-layout-builder
     內（匿名是 JS 補的裸 .flag），只列 .flag 會漏掉它 → 吃到 width:100% 獨佔一排，工具列斷成兩行（#45652 8/21 退件 2）*/
  & > *:not(.block-netivism-share-block):not(.ob-fontsize):not(.flag):not(:has(.flag)) { width: 100%; }

  /* 匿名時 flag block 只剩空殼（JS 另補導登入鈕）→ 不佔 gap */
  & > .block-layout-builder:not(:has(.flag)) { display: none; }

  @media (min-width: 1200px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

/*ANCHOR - 閱讀進度條（#46297；JS 寫 --ob-scroll-pct，固定視窗頂端 3px） */
.ob-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: var(--ob-scroll-pct, 0%);
  background: var(--ob-primary);
  z-index: 1050;
  pointer-events: none;
}

/*ANCHOR - 字級調整（#46297；Ⓐ 圓鈕點開三階「字」，覆寫 --ob-fs-body＝16/18/20） */
#article-main {
  &.ob-fs--m { --ob-fs-body: 18px; }
  &.ob-fs--l { --ob-fs-body: 20px; }

  & .ob-fontsize {
    display: flex;                     /* 消掉 inline 行距，容器高＝按鈕 36 */
    position: relative;

    & .ob-fontsize__toggle {
      width: 36px;
      height: 36px;
      padding: 0;
      border: 0;
      cursor: pointer;
      background: none;
      font-size: 0;                    /* 隱藏文字、保留螢幕報讀 */
      color: transparent;

      /* icon 走 ::before：深色軸的反白 filter 才能只套 icon，不波及 ::after 的 tooltip */
      &::before {
        content: '';
        display: block;
        width: 36px;
        height: 36px;
        background: url(images/share-font-size.svg) center / contain no-repeat;
      }
    }

    & .ob-fontsize__list {
      display: none;
      position: absolute;
      left: 44px;
      top: 50%;
      transform: translateY(-50%);
      align-items: baseline;
      gap: 12px;
    }
    /* 三階清單只在直排（≥1200）展開：橫排時它會疊到右側分享鈕，改由 JS 點按循環切級（#45652 8/21 退件 1）*/
    &.is-open .ob-fontsize__list {
      display: none;
      @media (min-width: 1200px) { display: flex; }
    }

    & .ob-fontsize__opt {
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      color: var(--ob-ink);
      font-family: var(--ob-font-sans);
      line-height: 1;
      &.is-active { color: var(--ob-primary); }
      &.ob-fontsize__opt--s { font-size: 16px; }
      &.ob-fontsize__opt--m { font-size: 20px; }
      &.ob-fontsize__opt--l { font-size: 24px; }
    }
  }
}

/*ANCHOR - 會員收藏 flag（#46297；圓框 icon＋label，AJAX 切 action-flag↔action-unflag）
  已收藏態＝青圓底＋線稿轉白：brightness(0) 先壓黑再 invert(1) 全白（沿用同一張 SVG，不另出圖） */
#article-main .flag-bookmark {
  display: flex;                       /* 同上：容器高＝連結 36，工具列才等距 */

  & a {
    display: inline-flex;
    position: relative;
    align-items: center;
    width: 36px;                       /* 原文字 font-size:0 收起（保留螢幕報讀），box 就是 icon 本身 */
    height: 36px;
    font-size: 0;
    text-decoration: none;

    &::before {
      content: '';
      flex: 0 0 36px;
      height: 36px;
      background: url(images/share-bookmark.svg) center / contain no-repeat;
    }
  }

  /* 已收藏：青圓底＋線稿轉白（a 的 box 恰為 36×36，圓底直接給 a，::after 留給 tooltip） */
  &.action-unflag a {
    background: var(--ob-primary);
    border-radius: 50%;

    &::before { filter: brightness(0) invert(1); }
  }
}

/*ANCHOR - 工具列 hover 提示（design/sidebar_button.png：icon 右側深底白字圓角條，橫排不換行） */
#article-main {
  & .netivism-share-btn,
  & .ob-fontsize__toggle,
  & .flag-bookmark a {
    &::after {
      position: absolute;
      left: 44px;                      /* icon 36 ＋ 8 */
      top: 50%;
      transform: translateY(-50%);
      padding: 6px 12px;
      border-radius: 4px;
      background: var(--ob-ink);       /* 深色軸自動翻成白底黑字 */
      color: var(--ob-bg);
      font-family: var(--ob-font-sans);
      font-size: var(--ob-fs-small);
      line-height: 1.4;
      white-space: nowrap;             /* 不論欄寬多窄都橫排 */
      opacity: 0;
      pointer-events: none;
      transition: opacity .15s ease;
      @media (max-width: 1199.98px) { display: none; }   /* 橫排時最右一顆的提示伸出視窗 → iOS 整頁縮小留白（#47943）；觸控無 hover */
    }

    &:hover::after,
    &:focus-visible::after { opacity: 1; }
  }

  /* 分享 4 顆讀 button 的 aria-label（模組 t() 字串已補 zh-hant 翻譯，見 scripts/openbook_46297_d_*） */
  & .netivism-share-btn::after { content: attr(aria-label); }

  & .flag-bookmark a::after { content: '會員收藏'; }
  & .flag-bookmark.action-unflag a::after { content: '取消收藏'; }

  & .ob-fontsize__toggle {
    position: relative;
    &::after { content: '字級調整'; }
  }

  /* 展開三階「字」時不再冒 tooltip（同一位置會疊） */
  & .ob-fontsize.is-open .ob-fontsize__toggle::after { opacity: 0; }
}

/*ANCHOR - 深色配色軸（token override：header（--ob-bg/--ob-ink）與內文（--ob-ink）自動翻轉；footer 底用 --ob-dark、字用 --ob-white 固定不受影響
  ——9/22 #46355 退件：footer 標語／選單字原寫 --ob-bg，深色軸翻成黑字消失，已改 --ob-white） */
body.ob-article--black {
  --ob-bg: var(--ob-black);
  --ob-ink: var(--ob-white);
  background-color: var(--ob-black);
  /* base theme 的 body color 是寫死的 #212121、不吃 token → 只翻 token 的話，所有「沒明確指定
     color」而靠繼承的文字（meta 欄位與標籤、日期、作者連結…）在黑底上會整片看不見 */
  color: var(--ob-ink);

  /* 主選單下的全寬白線＝neticrmp_base `.header` 的 border-bottom #e0e0e0，深色軸不要（#46355 9/24 退件）；
     只改色不拿掉，header 高度與白色版一致 */
  & .header { border-bottom-color: transparent; }

  /* 工具列 icon 皆為深色線稿 SVG，黑底上筆畫消失 → 整張壓黑再反白＝全白線稿（含分享 4 顆，原 #45652 遺留）
     ⚠️ 只能套在「純 icon 的層」：套在按鈕本身會連 ::after 的 tooltip 一起反白（白底白字） */
  & #article-main {
    & .netivism-share-btn::before,
    & .ob-fontsize__toggle::before,
    & .flag-bookmark a::before { filter: brightness(0) invert(1); }

    /* 人名：深稿青字取樣為 #00B9C8（白稿 #00A0B4），黑底對比才夠 */
    & .name-article-meta .node--view-mode-meta h2 a { color: var(--ob-primary-light); }
  }

  /* 圖說：黑底沿用既有淺灰（白稿的 #424242 在 #111 上不可讀；深稿 13px 小字全抗鋸齒、取不到純色） */
  & #article-hero :is(.block-field-blocknodearticlefield-caption, .block-field-blocknodeyearfield-caption) :is(.text-formatted, p) {
    color: var(--ob-gray-mid);
  }
}

/*ANCHOR - 文末各區塊：空區塊收殼（views block_hide_empty 空時 LB 整塊不輸出 → 無 .block 就藏 section，殼的邊距/帶底不殘留） */
:where(#article-edm, #article-footer-info, #article-more-column, #article-readmore, #article-picks, #article-promo, #year-partner):not(:has(.block)) {
  display: none;
}

/*ANCHOR - #article-edm 訂閱電子報（fig Group 486：842×214 青底、icon 150、pad 32；重用首頁 CTA 區塊＋青底變體） */
#article-edm {
  max-width: 842px;
  margin: clamp(40px, 2.08vw + 24px, 60px) auto 0;

  & .block-content-cta {
    margin-block: 0;
    border-top: 0;
    padding: clamp(20px, 1.25vw + 10.4px, 32px);
    background: var(--ob-primary-light);

    & .block-content {
      grid-template-columns: clamp(80px, 7.29vw + 24px, 150px) auto;
      column-gap: clamp(24px, 0.83vw + 17.6px, 32px);
      row-gap: clamp(8px, 0.83vw + 1.6px, 16px);

      & .field--name-field-title {
        font-size: clamp(18px, 0.42vw + 14.8px, 22px);
        color: var(--ob-white);
      }

      & .field--name-body { color: var(--ob-white); }

      & .field--name-field-link a {
        color: var(--ob-white);

        &:hover,
        &:focus { color: var(--ob-accent-yellow); }

        &::after { filter: brightness(0) invert(1); }
      }
    }
  }
}

/*ANCHOR - #article-footer-info 文末資訊（fig Group 390：1220 寬、上下 1.5px 線、pad 32；
  既有 97 筆 body 為自由 HTML（圖＋清單直排/影音）→ 只做容器，內容照 body 原樣） */
#article-footer-info {
  max-width: 1220px;
  margin: clamp(40px, 2.08vw + 24px, 60px) auto 0;
  border-block: 1.5px solid var(--ob-gray-mid);
  padding-block: clamp(24px, 0.83vw + 17.6px, 32px);

  & .node__title { display: none; }   /* 文末資訊節點標題同舊站不顯示（#46697 退件） */
  & img { max-width: 100%; height: auto; }
}

/*ANCHOR - 文末卡片共通（更多專欄/延伸閱讀：圖 4:3 → badge 24 → 標題 8；fig Group 71） */
:is(#article-more-column, #article-readmore) {
  & .view-content { --bs-gutter-x: 0; }
  & .view-content > .grid--4-columns { width: 100%; }

  & .entity-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ob-radius);
  }

  & .entity-badge { margin-top: clamp(16px, 0.83vw + 9.6px, 24px); }

  & .entity-title {
    margin-top: 8px;
    font-size: var(--ob-fs-card);
    line-height: var(--ob-lh-base);

    & a {
      color: var(--ob-ink);
      text-decoration: none;

      &:hover,
      &:focus { color: var(--ob-primary); }
    }
  }
}

/*ANCHOR - 文末三區標題（無底線款＋標題下 32；:is 帶 id 特異度 1-1-1 蓋過基底 0-2-1） */
:is(#article-more-column, #article-readmore, #article-picks) .block-inner > h2 {
  margin-bottom: clamp(24px, 0.83vw + 17.6px, 32px);
  padding-bottom: 0;
  border-bottom: none;
}

/*ANCHOR - #article-more-column 繼續閱讀本專欄（fig Group 391：滿版灰帶、內容 1472、pad 56/80；更多→tag term 頁） */
#article-more-column {
  margin-top: clamp(48px, 3.33vw + 22.4px, 80px);
  padding-block: clamp(40px, 1.67vw + 27.2px, 56px) clamp(48px, 3.33vw + 22.4px, 80px);
  background: var(--ob-bg-gray);

  & .block-inner {
    position: relative;             /* 更多連結錨點（fig Group 89：與 h2 同排靠右） */
    max-width: 1472px;
    margin-inline: auto;
  }

  & .more-link {
    margin-top: 24px;
    font-family: var(--ob-font-sans);
    font-size: clamp(14px, 0.23vw + 12.2px, 15px);
    font-weight: 700;
    line-height: 1;
    @media (min-width: 768px) {
      position: absolute;
      top: 41px;
      right: 0;
      margin: 0;
      font-weight: 500;
    }

    & a {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--ob-ink);
      text-decoration: none;

      &::after {
        content: '';
        width: 26px;
        height: 16px;
        background: url(images/icon-more.svg) no-repeat center;
      }

      &:hover,
      &:focus { color: var(--ob-primary); }
    }
  }
}

/*ANCHOR - #article-readmore 延伸閱讀（fig Group 307：1472、上距 80） */
#article-readmore {
  max-width: 1472px;
  margin: clamp(48px, 3.33vw + 22.4px, 80px) auto 0;

  /* 不足 4 篇置中（#46355）：上限 4 篇 → 一列排完、欄寬維持 4 欄寬（gap 同 .grid--4-columns） */
  & ul.d-grid {
    @media (min-width: 1200px) {
      grid-auto-flow: column;
      grid-template-columns: none;
      grid-auto-columns: calc((100% - 3 * clamp(24px, 1.67vw + 11.2px, 40px)) / 4);
      justify-content: center;
    }

    /* 平板 2 欄：落單的最後一張跨兩欄置中、寬維持單欄 */
    & > li:last-child:nth-child(odd) {
      @media (768px <= width < 1200px) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - clamp(24px, 1.67vw + 11.2px, 40px)) / 2);
      }
    }
  }
}

/*ANCHOR - #article-picks OB精選（fig Group 103：滿版、標題下卡輪播＝ob_cards_lg 幾何（2 張卡 705 gap 64）；
  底＝頁面底色；卡下文字＝slide 標題（原讀 body，slide body 全空＝卡片沒字，#48119 改 title＋粗體）；整卡可點＝slide link 撐滿） */
#article-picks {
  padding-top: clamp(40px, 1.67vw + 27.2px, 56px);   /* 下距改由 #article-promo 的上距承擔，OB精選未勾／無資料時閱讀通信才不會貼住延伸閱讀（#46355 退件） */
}

body.ob-no-picks #article-picks { display: none; }   /* 文章「顯示 OB精選」未勾（theme preprocess_html） */

.ob-picks {
  & .views-field-field-mobile-image { display: none; }   /* 直式焦點圖是 KV 專用，卡輪播固定用桌機圖 */

  & .slick__slide { position: relative; }

  & .views-field-title {
    margin-top: clamp(12px, 0.42vw + 8.8px, 16px);
    font-family: var(--ob-font-serif);
    font-size: var(--ob-fs-card);
    font-weight: 700;
    line-height: var(--ob-lh-base);
    color: var(--ob-ink);
  }

  & .views-field-field-slide-link a {
    position: absolute;
    inset: 0;
    z-index: 1;
    font-size: 0;
    color: transparent;
  }
}

/*ANCHOR - #article-promo 閱讀通信（fig banner 1322:5899：1222×200，內容＝node/10673 body，編輯自行維護） */
#article-promo {
  max-width: 1222px;
  margin: clamp(40px, 2.08vw + 24px, 60px) auto clamp(48px, 3.33vw + 22.4px, 80px);

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

/*ANCHOR - 文末六區塊深色軸（band 深灰帶、輪播軌反白；文字色走 --ob-ink token 翻轉、不另寫） */
body.ob-article--black {
  & #article-more-column { background: var(--ob-gray-dark); }

  & #article-picks {
    & .ob-carousel { --track-c: #F3F5F5; }
    & .slick__arrow button { filter: invert(1); }
  }
}

/*!SECTION */

/*SECTION - 年度好書文章頁：文末合作單位（#46697：LB #year-partner，view year_partner 五分類 block；
  無設計稿，樣式參照舊站 node/71892（分類標題＋logo 橫排）統一化：五類同一套「標題＋細線＋logo 網格」。
  logo 尺寸差異大（原圖 76×43 ~ 316×55）→ 網格固定欄寬、圖限高置中，不強制等寬 */
#year-partner {
  max-width: 1220px;
  margin: clamp(40px, 2.08vw + 24px, 60px) auto clamp(48px, 3.33vw + 22.4px, 80px);   /* 下距＝#article-promo 同值：本區排在閱讀通信之後、是文末最後一段（#46697 退件） */

  /*ANCHOR - 分類標題（#46697 退件：Noto Serif TC 22） */
  & .block-inner > h2 {
    margin-bottom: clamp(16px, 0.83vw + 9.6px, 24px);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ob-gray-mid);
    font-family: var(--ob-font-serif);
    font-size: clamp(18px, 0.93vw + 10.89px, 22px);
    font-weight: 700;
    line-height: var(--ob-lh-base);
    letter-spacing: var(--ob-ls-base);
  }

  /*ANCHOR - logo 網格（欄寬 clamp：手機 120 → 桌機 200；欄數隨容器落在 手機 2／平板 3／桌機 5＝比照舊站 5 欄） */
  & .view-content {
    --bs-gutter-x: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 12vw + 80px, 200px), 1fr));
    gap: clamp(16px, 1.67vw + 5.6px, 32px);
    align-items: center;
  }

  & .partner-logo {
    & img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: clamp(40px, 1.67vw + 29.6px, 56px);
      margin-inline: auto;
      transition: opacity .2s;
    }

    & a:hover img,
    & a:focus img { opacity: .7; }
  }

  & .block + .block { margin-top: clamp(32px, 1.67vw + 21.6px, 48px); }

  /*ANCHOR - 深色軸：多數 logo 為深色線稿，黑底會消失 → 墊白底（透明 PNG 亦然） */
  body.ob-article--black & .partner-logo img {
    padding: 6px;
    border-radius: 4px;
    background: var(--ob-white);
  }
}

/*!SECTION */

/*SECTION - 常見問題（#46365：landing /faq 的 faq_list block；fig 1553:3710）
  分類 tab＝BEF bef_links、手風琴＝views_accordion（jQuery UI）
  jQuery UI 的 base theme.css 會給 header 藍底白字、給 content 灰框白底，本段一併清掉 */

/*ANCHOR - 版面 */
.name-faq {
  max-width: 842px;
  margin-inline: auto;

  /* views 的 .row 帶 Bootstrap 負邊距與 flex，其 .row > * 還會塞 12px 左右內距（neticrm_base 的 bootstrap）
     字型不在此處理：barrio 的 #page .ui-widget 帶 id 打不贏，各元件自己指定 */
  & .view-content {
    display: block;
    margin: 0;

    & > * { padding-inline: 0; }
  }
}

/*ANCHOR - 分類 tab */
.name-faq .view-filters {
  padding-block: clamp(32px, 5.56vw - 10.67px, 56px);

  /* BEF 的 .form-item 帶 Bootstrap mb-3 */
  & .form-item { margin: 0; }

  /* exposed form 是 flex，唯一的 flex item 會 shrink-to-fit（寬度＝tab 總寬）
     → 光靠 ul 的 justify-content 無空間可分配、整組會靠左，置中要在 form 這層做 */
  & .views-exposed-form { justify-content: center; }

  & .bef-links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 1.85vw - 2.22px, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & .bef-link {
    display: flex;
    align-items: center;
    height: clamp(40px, 1.85vw + 25.78px, 48px);
    padding-inline: clamp(16px, 1.85vw + 1.78px, 24px);
    border: 1px solid var(--ob-primary);
    border-radius: 999px;
    background: var(--ob-white);
    color: var(--ob-ink);
    font-family: var(--ob-font-sans);
    font-size: var(--ob-fs-body);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    &:hover,
    &:focus {
      border-color: var(--ob-primary-light);
      background: var(--ob-primary-light);
      color: var(--ob-white);
    }

    &.bef-link--selected {
      background: var(--ob-primary);
      color: var(--ob-white);
    }
  }
}

/*ANCHOR - 手風琴每則 */
.name-faq {
  /* 每則上緣一條線，最後一則補下緣（外層 .views-row 是 template wrapper，不參與） */
  & .views-row > .views-row:last-child {
    border-bottom: 2px solid var(--ob-border);
  }

  & .views-accordion-header.ui-accordion-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: clamp(32px, 4.17vw, 50px) 0;
    border: 0;
    border-top: 2px solid var(--ob-border);
    border-radius: 0;
    background: none;
    color: var(--ob-ink);
    font-family: var(--ob-font-serif);
    font-size: clamp(20px, 0.46vw + 16.44px, 22px);   /* fig 1553:3710 標題框高 31＝22×1.4 */
    font-weight: 700;
    line-height: var(--ob-lh-base);
    letter-spacing: var(--ob-ls-base);

    /* 展開時下內距讓給內文 */
    &.ui-accordion-header-active {
      padding-bottom: clamp(20px, 2.78vw - 1.33px, 32px);
    }

    /* icon 是淺色版線稿，壓深 */
    &::after {
      content: '';
      flex: 0 0 auto;
      width: clamp(32px, 1.85vw + 17.78px, 40px);
      height: clamp(32px, 1.85vw + 17.78px, 40px);
      background: url(images/icon-arrow-down.svg) no-repeat center;
      filter: brightness(0);
      transition: transform .2s ease;
    }

    &.ui-accordion-header-active::after { transform: rotate(180deg); }
  }

  & .faq-question::before {
    content: 'Q : ';
    color: var(--ob-primary);
  }

  & .ui-accordion-content.ui-widget-content {
    padding: 0 0 clamp(32px, 4.17vw, 50px);
    border: 0;
    background: none;
    color: var(--ob-ink);
    font-family: var(--ob-font-sans);
    font-size: var(--ob-fs-body);
    line-height: 2.25;
    overflow: visible;

    & p {
      margin: 0 0 36px;

      &:last-child { margin-bottom: 0; }
    }

    & a {
      color: var(--ob-primary);
      text-decoration: underline;
    }
  }
}

/*!SECTION */

/*SECTION - 年度好書內頁（#46361；fig 1685:8732「年度好書頁-V3」＝現行定稿，V2 深色版作廢）
  #year-hero 滿版 KV＋年度標題（內容寬 1096）／#year-news 最新消息 3 則（1096）
  ／#year-list 次分類 tab＋文章列表（1472） */

/*ANCHOR - #year-hero */
#year-hero {
  & .name-year-page {
    & .view-content { --bs-gutter-x: 0; }

    & .views-field-field-image img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* fig bg-top：KV 下 80px 由淺青漸層回頁面底色，年度標題壓在漸層帶上 */
    & .views-field-name {
      padding-top: clamp(32px, 2.92vw + 9.6px, 60px);
      background: linear-gradient(to bottom, #DBEFF0, var(--ob-bg) 80px);
    }

    & .entity-title {
      max-width: 1096px;
      margin-inline: auto;
      padding-inline: 24px;
      font-family: var(--ob-font-serif);
      font-size: var(--ob-fs-hero);
      font-weight: 700;
      letter-spacing: var(--ob-ls-base);
      line-height: var(--ob-lh-base);
      text-align: center;
    }

    /* 分類描述（9 個年度目前皆空，有填才輸出） */
    & .entity-summary {
      max-width: 1096px;
      margin: clamp(16px, 0.83vw + 9.6px, 24px) auto 0;
      padding-inline: 24px;
      font-size: var(--ob-fs-card);
      line-height: 1.8;
      text-align: center;
    }
  }
}

/*ANCHOR - #year-news 最新消息 */
#year-news .block-inner {
  max-width: 1096px;
  margin-inline: auto;
}

.name-year-news {
  margin-top: clamp(32px, 1.88vw + 17.6px, 50px);
  padding-top: clamp(24px, 0.83vw + 17.6px, 32px);
  border-top: 1.5px solid var(--ob-border);

  & .view-content { --bs-gutter-x: 0; }

  & ul.d-grid {
    @media (min-width: 768px) {
      column-gap: clamp(24px, 1.67vw + 11.2px, 40px);
      row-gap: 24px;
    }
  }

  & .entity-title {
    margin-top: 8px;
    font-family: var(--ob-font-serif);
    font-size: var(--ob-fs-card);
    font-weight: 700;
    line-height: var(--ob-lh-base);
  }

  & .entity-date {
    display: block;
    margin-top: 12px;
    color: var(--ob-gray-mid);
    font-family: var(--ob-font-sans);
    font-size: var(--ob-fs-meta);
    line-height: 1;
  }
}

/*ANCHOR - #year-list 容器 */
#year-list .block-inner {
  max-width: 1472px;
  margin-inline: auto;
}

/*ANCHOR - #year-tabs 次分類 tab（青底 pill bar，選中項底部黃線；
  每顆連到第二層 term 頁 /year/{年度}/{次分類}，兩層共用同一份版面） */
#year-tabs {
  margin-top: clamp(40px, 4.17vw + 8px, 80px);
  /* tab 連結帶 #year-tabs 錨點（切分類後直接定位到這裡）；
     懸浮 header 的實際高度由 custom.js 寫進 --ob-header-h（#48119），再留 24 上緣呼吸空間 */
  scroll-margin-top: calc(var(--ob-header-h, 0px) + 24px);

  & .block-inner {
    max-width: 1472px;
    margin-inline: auto;
  }

  & .view-content { --bs-gutter-x: 0; }

  & .tab-list {
    border-radius: 999px;
    background: var(--ob-primary);
  }

  & ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 5vw - 22.4px, 64px);
    min-height: 62px;
    margin: 0;
    padding: 2px clamp(16px, 2.5vw - 3.2px, 24px);
  }

  & a {
    position: relative;
    display: flex;
    align-items: center;
    height: 58px;
    color: var(--ob-white);
    font-family: var(--ob-font-serif);   /* fig V3 1685:9127：serif 18 bold（#46697 退件改字體） */
    font-size: var(--ob-fs-card-sm);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    /* fig：黃線 4px，寬＝文字寬，貼 bar 底上方 3px；hover 也走同一條線（不改字色） */
    &::after {
      content: '';
      position: absolute;
      inset: auto 0 3px;
      height: 4px;
      background: var(--ob-accent-yellow);
      opacity: 0;
      transition: opacity .2s;
    }

    &:hover::after,
    &:focus-visible::after { opacity: 1; }

    /* 當前頁：core 的 active-link 不認 Views 產的連結，由 custom.js 補 is-active */
    &.is-active {
      font-weight: 800;
      &::after { opacity: 1; }
    }
  }
}

/*ANCHOR - #year-list 區塊間距（第一層只有列表；第二層＝次分類標題＋列表） */
#year-list {
  & .block { margin-top: clamp(40px, 2.08vw + 24px, 60px); }
  & .block + .block { margin-top: clamp(24px, 1.67vw + 11.2px, 40px); }
}

/*ANCHOR - 次分類標題（第二層 term 頁才輸出） */
.name-year-cat-title {
  & .view-content { --bs-gutter-x: 0; }

  & .year-cat-title {
    margin: 0;
    font-family: var(--ob-font-serif);
    font-size: var(--ob-fs-title);
    font-weight: 700;
    letter-spacing: var(--ob-ls-base);
    line-height: var(--ob-lh-tight);
    text-align: center;

    &::before {
      content: '';
      display: block;
      width: 20px;
      height: 1.5px;
      margin: 0 auto 16px;
      background: var(--ob-ink);
    }
  }
}

/*ANCHOR - 文章列表卡片格線（fig 卡 464、圖 4:3、column-gap 40／row-gap 60；
  768–1199 降 2 欄——3 欄在此寬度每張只剩 192，封面圖過小，比照 article_list 漸進） */
.name-year-articles {
  & .view-content { --bs-gutter-x: 0; }

  & ul.d-grid {
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: clamp(24px, 1.67vw + 11.2px, 40px);
      row-gap: clamp(32px, 2.92vw + 9.6px, 60px);
    }
    @media (min-width: 1200px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  & .entity-image img {
    display: block;
    width: 100%;
    height: auto;
  }

  & .entity-title {
    margin-top: clamp(16px, 0.83vw + 9.6px, 24px);
    font-family: var(--ob-font-serif);
    font-size: var(--ob-fs-card);
    font-weight: 700;
    line-height: var(--ob-lh-base);
  }

  /* fig 1685:8732 實測：列表下 64、線下 60（線本身走通用；先前漏了線，2026-08-13 補） */
  & nav[aria-label='pagination-heading'] {
    margin-top: clamp(40px, 2.5vw + 20.8px, 64px);
    padding-top: clamp(32px, 2.92vw + 9.6px, 60px);
  }

  /*ANCHOR - 其他屆好書獎（fig button-p-s 240×48） */
  & .more-link {
    margin-top: clamp(32px, 2.92vw + 9.6px, 60px);
    padding-top: clamp(32px, 2.92vw + 9.6px, 60px);
    border-top: 1.5px solid var(--ob-border);
    text-align: center;

    & a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 240px;
      max-width: 100%;
      height: 48px;
      border-radius: var(--ob-radius);
      background: var(--ob-primary);
      color: var(--ob-white);
      font-family: var(--ob-font-sans);
      font-size: var(--ob-fs-small);
      font-weight: 500;
      line-height: 1;
      text-decoration: none;

      &:hover { background: var(--ob-primary-light); }
    }
  }
}

/*!SECTION */

/*SECTION - 作者／攝影師頁（#46354：LB #author-intro + #author-list；fig 1549:3554「作者頁」） */

/*ANCHOR - #author-intro 人物介紹（滿版頂部漸層 120＋置中直排；下緣 2px 線比照頁標） */
#author-intro {
  padding-top: clamp(40px, 3.13vw + 16px, 70px);
  background: linear-gradient(180deg, rgb(0 185 200 / 0.1), rgb(0 185 200 / 0) 120px);
  text-align: center;

  /* 無代表圖時 views hide_empty 整顆不輸出 → 圓形大頭照自然不顯示（規格 2026-08-06） */
  & .author-avatar img {
    display: block;
    width: clamp(100px, 5.21vw + 60px, 150px);
    height: clamp(100px, 5.21vw + 60px, 150px);
    margin-inline: auto;
    border-radius: 50%;
    object-fit: cover;
  }

  & .author-name {
    margin: 16px 0 0;
    font-family: var(--ob-font-serif);
    font-size: clamp(28px, 1.25vw + 18.4px, 40px);
    font-weight: 700;
    letter-spacing: var(--ob-ls-base);
    line-height: var(--ob-lh-tight);
    color: var(--ob-ink);
  }

  & .author-job {
    margin-top: 8px;
    font-family: var(--ob-font-sans);
    font-size: var(--ob-fs-meta);
    line-height: 1.5;
    color: var(--ob-gray);
  }

  & .author-bio {
    max-width: 590px;
    margin: 16px auto 0;
    font-family: var(--ob-font-sans);
    font-size: var(--ob-fs-card);
    line-height: 1.8;
    color: var(--ob-ink);
    text-align: left;

    & p:last-child { margin-bottom: 0; }
  }

  /* 線＝內容寬 1474（fig line-1.5 y=693 實測 2px #E0E0E0） */
  &::after {
    content: '';
    display: block;
    max-width: 1474px;
    margin: clamp(40px, 2.92vw + 17.6px, 68px) auto 0;
    border-top: 2px solid var(--ob-border);
  }
}

/*ANCHOR - #author-list 列表區（fig 線下 62；分頁沿用 pager 通用樣式） */
#author-list {
  padding-top: clamp(32px, 3.13vw + 8px, 62px);
}

/*ANCHOR - name-author-article 橫式卡（fig 卡 968＝圖 368＋gap 40＋文 560、卡高 276、卡間 50） */
.name-author-article {
  /* .view-content=BS .row（flex）：歸零 gutter、wrapper 撐滿 */
  & .view-content { --bs-gutter-x: 0; }
  & .view-content > .author-article-list { width: 100%; }

  & .author-article-list ul {
    display: grid;
    gap: clamp(32px, 1.88vw + 17.6px, 50px);
    max-width: 968px;
    margin: 0 auto;
    padding: 0;
  }

  /* 手機直排等距；768 起 圖佔滿左欄、四個文字欄位排右欄（summary 撐開讓 tags 貼卡底） */
  & .author-article-list li {
    display: grid;
    row-gap: 16px;

    @media (min-width: 768px) {
      grid-template-columns: minmax(0, 368px) minmax(0, 1fr);
      grid-template-rows: auto auto 1fr auto;
      column-gap: 40px;
      row-gap: 0;
    }

    /* 欄位無 .views-field wrapper（element_wrapper_type=0）→ 直接子層即 .field-content */
    & > .entity-image {
      @media (min-width: 768px) { grid-area: 1 / 1 / -1 / 2; }
    }
  }

  /* fig 368×276＝4:3；卡片圖四角實測無圓角，不套 --ob-radius */
  & .entity-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 368 / 276;
    object-fit: cover;
  }

  & .entity-title {
    margin-top: 0;

    @media (min-width: 768px) { margin-top: 20px; }
  }

  /* 摘要 grid item 會被 blockify 讓 -webkit-box 失效 → views 改輸出兩層（外 .entity-summary＝grid item、
     內 .trim-2＝clamp 目標）；攤平只作用到 .trim-2 內部的子標籤，別把 .trim-2 自己 contents 掉 */
  & .entity-summary .trim-2 * {
    display: contents;
    font: inherit;
    color: inherit;
  }

  & .entity-summary {
    margin-top: 0;

    @media (min-width: 768px) { margin-top: 12px; }
  }

  & .entity-tags {
    margin-top: 0;

    @media (min-width: 768px) { margin-top: auto; }

    /* 通用元件的右緣淡出是白底；本頁卡片直接坐在 --ob-bg 上 */
    &::after {
      background: linear-gradient(90deg, rgb(243 245 245 / 0), var(--ob-bg));
    }
  }
}

/*!SECTION */

/*SECTION - 專題內頁（#46357：LB #topic-hero + #topic-list；fig 1549:4112「專題頁」＝design/專題頁.png） */

/*ANCHOR - 頁標區塊隱藏
  專題別名是舊站任意路徑（/podcast、/printing2017…）且無 pathauto 規則 → block visibility 的
  request_path 排不掉；改用 entity_bundle 條件會讓該 block 在所有非節點頁被判 forbidden
  （core BlockAccessControlHandler：context 無值 → forbidden）→ 只能走 body class。
  H1 改由 hero 的 views block 提供 */
body.node--type-topic #block-page-title { display: none; }

/*ANCHOR - #topic-hero 專題主視覺
  fig：滿版 1728×925 圖 ＋ 底部黑漸層 298 ＋ 白字標題（底距 124）＋ 純黑介紹帶 224 */
.name-topic-hero {
  & .view-content { --bs-gutter-x: 0; }

  /* DOM 是三顆並列 views-field → grid 把「圖」與「標題」疊在第 1 格、介紹帶另起第 2 列 */
  & .entity-row-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  & .views-field-field-image,
  & .views-field-field-mobile-image,
  & .views-field-title { grid-area: 1 / 1; }

  & .views-field-body { grid-area: 2 / 1; }

  /*ANCHOR - 代表圖（滿版 term_hero 1728×925；底部黑漸層） */
  & .views-field-field-image,
  & .views-field-field-mobile-image {
    position: relative;

    & img {
      display: block;
      width: 100%;
      height: auto;
      margin-bottom: 0;   /* base theme 給 img 的 margin-bottom:18px */
    }

    &::after {
      content: '';
      position: absolute;
      inset: auto 0 0;
      height: clamp(140px, 17.25vw, 298px);
      background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / 0.8));
      pointer-events: none;
    }
  }

  /* 手機圖有值時 <768 改用手機圖（實測直式 450×800～1200×1800，不套 style）；比照 #article-hero */
  & .views-field-field-mobile-image {
    @media (min-width: 768px) { display: none; }
  }
  &:has(.entity-image-mobile img) .views-field-field-image {
    display: none;
    @media (min-width: 768px) { display: block; }
  }

  /*ANCHOR - 標題（白字置中疊在圖底；logomark 在字上 24） */
  & .views-field-title {
    align-self: end;
    z-index: 1;
    padding-bottom: clamp(32px, 9.58vw - 41.6px, 124px);
    text-align: center;
  }

  & .topic-title {
    margin: 0;
    font-family: var(--ob-font-serif);
    font-size: clamp(24px, 4.63vw - 11.56px, 44px);   /* fig 桌機實測字身 44（字元步進 47 ÷ ls 1.07）；手機無稿取 24 */
    font-weight: 700;
    letter-spacing: var(--ob-ls-wide);
    line-height: var(--ob-lh-snug);
    color: var(--ob-white);

    &::before {
      content: '';
      display: block;
      width: 22px;
      height: 15px;
      margin: 0 auto 24px;
      background: url(images/icon-logomark.svg) no-repeat center / contain;
    }
  }

  /* 主圖自帶標題（勾「隱藏標題」，123 筆中 57 筆）→ 標題與漸層一併拿掉，同 .name-term-hero */
  &:has(.hide-topic-title) {
    & .views-field-title { display: none; }

    & .views-field-field-image::after,
    & .views-field-field-mobile-image::after { content: none; }
  }

  /*ANCHOR - 介紹黑帶（fig：純黑滿版；body 空的 24 筆由 views hide_empty 整欄不輸出 → 黑帶自然不出現；文字規則見下方共用 ANCHOR） */
  & .views-field-body { background: var(--ob-dark); }   /* fig 取樣 #000000；token 最近者 #020202，肉眼無差 */
}

/*ANCHOR - 介紹帶文字（專題 body／專欄 tag 描述共用；fig：上 24 下 56、內容寬 842、白字 serif 18 SemiBold/lh 200% 置中） */
.name-topic-hero .topic-intro,
.name-term-hero .term-intro {
  max-width: 842px;
  margin-inline: auto;
  padding: clamp(16px, 1.85vw + 1.78px, 24px) 24px clamp(32px, 5.56vw - 10.67px, 56px);
  font-family: var(--ob-font-serif);
  font-size: var(--ob-fs-card-sm);   /* 16 → 18 */
  font-weight: 600;
  line-height: 2;
  color: var(--ob-white);
  text-align: center;

  & p {
    font: inherit;   /* base theme 的 p 帶 PingFang 字串＋lh 1.7，會蓋掉繼承（#46359 退件：字體差異） */

    &:last-child { margin-bottom: 0; }
  }

  & a {
    color: inherit;
    text-decoration: underline;

    &:hover,
    &:focus { color: var(--ob-primary-light); }
  }
}

/*ANCHOR - #topic-list 相關文章（fig：黑帶下 56、底距贊助橫幅 100；內容寬 1220。
  卡片格線／分頁完全沿用 .name-article-list ＋ pager 通用值，此處只管容器寬與外距） */
#topic-list {
  margin-top: clamp(32px, 2.5vw + 12.8px, 56px);
  margin-bottom: clamp(56px, 4.58vw + 20.8px, 100px);

  & .block-inner {
    max-width: 1220px;
    margin-inline: auto;

    /*ANCHOR - 相關文章小標（fig Group 77：logomark 置中於字上 8；下距格線 50） */
    & > h2 {
      width: fit-content;
      margin: 0 auto clamp(32px, 1.88vw + 17.6px, 50px);
      font-family: var(--ob-font-serif);
      font-size: var(--ob-fs-title);
      font-weight: 700;
      letter-spacing: var(--ob-ls-wide);
      line-height: var(--ob-lh-tight);
      color: var(--ob-ink);

      &::before {
        content: '';
        display: block;
        width: 22px;
        height: 15px;
        margin: 0 auto 8px;
        background: url(images/icon-logomark.svg) no-repeat center / contain;
      }
    }
  }
}

/*!SECTION */

/*SECTION - 會員專區（#46366：featured_top 放姓名大標＋tab 列，內容走 view member_info／member_donation 的 page display；
  fig 1609:3716「會員資料」＝design/會員資料.png，桌機 1728 與稿 1:1。
  fig 量測：大標 y267-299／tab 區 370-434（上下線 2px #E0E0E0、選中底線 5px primary）／
  小標 490-539（logomark 22×15＋字 26）／資料列 842 寬、每列 72、標籤欄 116、line-1.5 #9E9E9E／
  按鈕 92×40 框 1.5 primary、字 15。手機無設計稿 → 字級與間距一律 clamp 到既有體系的手機值。
  DOM：Barrio 選單 block 出的是 BS 的 ul.nav/li.nav-item/a.nav-link（不是 ul.menu）；
  .view-content 是 BS .row → 子項 .entity-row 需 width:100% 才撐滿 */

/*ANCHOR - 版面 */
#featured-top:has(#block-member-name) {
  padding-top: clamp(40px, 3.13vw + 16px, 70px);
  background: linear-gradient(180deg, rgb(0 185 200 / 0.1), rgb(0 185 200 / 0) 120px);

  & .featured-top__inner { max-width: 1474px; }
}

/* 大標由 member_name block 提供 → 收掉預設頁標；
   會員專區用自訂 tab 列 → 收掉 core primary tabs（檢視／編輯）。
   secondary 要留著當「編輯資料」的頁內小分頁（見下方 ANCHOR）。
   帳號密碼表單的「語言設定」（站台語言）：core AccountForm 寫死 #access、權限與 form display 都收不掉，
   設計稿無此項 → PM 9/11 拍板用樣式隱藏（#edit-language 是 core 給的 details wrapper，只含這一個欄位）。
   有後台主題權限的角色走 Claro，不會命中這幾條 */
body:has(#block-member-name) {
  & #block-page-title,
  & nav.tabs:has(ul.primary),
  & #edit-language { display: none; }
}

/*ANCHOR - 姓名大標 */
#block-member-name {
  margin-bottom: clamp(40px, 2.92vw + 17.6px, 68px);  /* fig 大標底 302 → tab 上線 370 */

  & .block-inner,
  & .block-content { margin: 0; }

  & .view-content { --bs-gutter-x: 0; }
  & .entity-row { width: 100%; }

  & .field-content {
    display: block;
    font-family: var(--ob-font-serif);
    font-size: clamp(28px, 1.25vw + 18.4px, 40px);  /* 同頁標區塊 h1 */
    font-weight: 700;
    letter-spacing: var(--ob-ls-base);
    line-height: var(--ob-lh-tight);
    text-align: center;
    color: var(--ob-ink);
  }
}

/*ANCHOR - 分頁 tab */
#block-member-tabs {
  max-width: 1474px;
  margin-inline: auto;
  border-block: 2px solid var(--ob-border);

  & ul.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(16px, 5.56vw - 26.7px, 40px);
    margin: 0;
    padding: 0;
  }

  & li.nav-item { list-style: none; }

  & a.nav-link {
    position: relative;
    display: block;
    padding: 20px 0;                 /* 清 bootstrap .nav-link 的左右 padding */
    font-family: var(--ob-font-sans);
    font-size: clamp(16px, 0.46vw + 12.44px, 18px);
    line-height: 20px;
    color: var(--ob-ink);
    text-decoration: none;
    white-space: nowrap;

    &:hover,
    &:focus { color: var(--ob-primary); }

    /* 當前分頁：is-active 由 core 的 active-link JS 依 data-drupal-link-system-path 加；
       底線 5px 壓在下方 2px 線上 */
    &.is-active::after {
      content: '';
      position: absolute;
      inset: auto 0 -3px;
      height: 5px;
      background: var(--ob-primary);
    }
  }
}

/*ANCHOR - 編輯資料小分頁 */
/* CiviCRM 的 profile 掛成 user edit 的 secondary local task（帳號／個人資料）
   → 直接拿來當甲案的頁內小分頁，樣式比上方 member tab 列縮一級。
   個人資料要排在帳號之前（原順序由 CRM 的 uf_join weight 決定）→ 用 order 拉。
   Bootstrap 的 .nav-tabs 會給 ul 下框線、給 a 框線與底色 → 一併清掉 */
body:has(#block-member-name) nav.tabs:has(ul.secondary) {
  margin: clamp(28px, 5.56vw - 14.7px, 52px) auto clamp(24px, 4.63vw - 11.6px, 44px);

  & ul.secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(16px, 2.78vw - 5.3px, 28px);
    margin: 0;
    padding: 0;
    border: 0;
  }

  & li.nav-item {
    list-style: none;

    &:has(a[href*="/edit/profile/"]) { order: -1; }
  }

  & a.nav-link {
    position: relative;
    display: block;
    padding: 12px 0;
    border: 0;
    background: none;
    font-family: var(--ob-font-sans);
    font-size: clamp(14px, 0.46vw + 10.44px, 16px);
    line-height: 20px;
    color: var(--ob-ink);
    text-decoration: none;
    white-space: nowrap;

    &:hover,
    &:focus { color: var(--ob-primary); }

    &.active {
      color: var(--ob-primary);

      &::after {
        content: '';
        position: absolute;
        inset: auto 0 0;
        height: 3px;
        background: var(--ob-primary);
      }
    }
  }
}

/*ANCHOR - 區塊小標 */
.member-heading,
.block-extra-field-blockuserusercivicrm-profiles .block-title {
  width: fit-content;
  margin: clamp(32px, 5.56vw - 10.7px, 56px) auto clamp(32px, 3.7vw + 3.6px, 48px);
  font-family: var(--ob-font-serif);
  font-size: var(--ob-fs-title);
  font-weight: 700;
  letter-spacing: var(--ob-ls-wide);
  line-height: var(--ob-lh-tight);
  text-align: center;
  color: var(--ob-ink);

  &::before {
    content: '';
    display: block;
    width: clamp(20px, 0.21vw + 18.4px, 22px);
    height: clamp(13px, 0.21vw + 11.4px, 15px);
    margin: 0 auto 8px;
    background: url(images/icon-logomark.svg) no-repeat center / contain;
  }
}

/*ANCHOR - 會員資料表
  9/22 起改用 civicrm 模組的 extra field「CiviCRM profile summaries」（LB 放 extra_field_block:user:user:civicrm_profiles），
  欄位跟 User Account profile（gid=1）走、客戶改 profile 前台自動跟著變；原 view member_info block_2 已從 LB 移除。
  DOM：.block-title「會員資料」／.civicrm-user-profile > h3（profile 名，收掉）＋ #crm-container > .crm-section（.label＋.content＋.clear）
  ＋ 最後一個 .crm-section 放模組給的「編輯 個人資料」連結（→ /user/{uid}/edit/profile/1），套成按鈕 */
.block-extra-field-blockuserusercivicrm-profiles {
  max-width: clamp(345px, 37.23vw + 198.7px, 842px);
  margin-inline: auto;

  & .civicrm-user-profile > h3,
  & .clear,
  & .user-page-link i { display: none; }

  & .crm-section { margin: 0; }  /* civicrm.css 給每段 1em 下距 */

  /* 模組只給本人看資料（Dynamic.php 非本人時清掉所有 User and User Admin Only 欄位）→ 看別人的頁只剩空殼，整塊收掉 */
  &:not(:has(#crm-container .crm-section)) { display: none; }

  /* 標籤欄＝fig 116（手機 88）起跳、遇長標籤（縣市（住家）等 gid=1 預設命名）依最寬者撐開，各列對齊不折行 */
  & #crm-container {
    display: grid;
    grid-template-columns: minmax(clamp(88px, 6.48vw + 38.2px, 116px), max-content) 1fr;
  }

  & #crm-container .crm-section {
    display: contents;
    font-family: var(--ob-font-sans);
    font-size: var(--ob-fs-body);
    font-weight: 400;
    line-height: var(--ob-lh-base);
    color: var(--ob-ink);

    & .label,
    & .content {  /* 清 civicrm.css 的 float 28%／margin-left 30%／靠右／1rem */
      display: flex;
      align-items: center;
      width: auto;
      min-height: 72px;
      margin: 0;
      border-top: 1.5px solid var(--ob-gray-mid);
      font-size: inherit;
      text-align: left;
    }

    &:last-child .label,
    &:last-child .content { border-bottom: 1.5px solid var(--ob-gray-mid); }

    & .label { padding-right: 20px; white-space: nowrap; }
  }

  & .user-page-link { display: flex; }
}

/*ANCHOR - 編輯資料按鈕 */
.member-btn,
.block-extra-field-blockuserusercivicrm-profiles .user-page-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 40px;
  margin-top: clamp(32px, 4.63vw - 3.56px, 52px);  /* fig 末列線 875 → 按鈕 927 */
  padding-inline: 14px;   /* fig 框寬 92（含 1.5 框）：文字 60 撐開後需退 2 */
  border: 1.5px solid var(--ob-primary);
  font-family: var(--ob-font-sans);
  font-size: 15px;
  line-height: 1;
  color: var(--ob-ink);
  text-decoration: none;

  &:hover,
  &:focus {
    background: var(--ob-primary);
    color: var(--ob-white);
  }
}

/*ANCHOR - 贊助歷程表 */
.view-member-donation {
  max-width: 1474px;
  margin-inline: auto;

  /* 7 欄，窄螢幕橫捲不擠壓 */
  & .view-content { overflow-x: auto; }

  & table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
  }

  & th,
  & td {
    padding: 16px 12px;
    border-bottom: 1.5px solid var(--ob-gray-mid);
    font-family: var(--ob-font-sans);
    font-size: var(--ob-fs-meta);
    line-height: var(--ob-lh-base);
    color: var(--ob-ink);
    text-align: left;
    white-space: nowrap;
  }

  & th {
    border-top: 1.5px solid var(--ob-gray-mid);
    font-weight: 700;
  }

  & .view-empty {
    padding: 40px 0;
    font-family: var(--ob-font-sans);
    font-size: var(--ob-fs-body);
    color: var(--ob-gray-mid);
    text-align: center;
  }
}

/*ANCHOR - 收藏文章列表（#46298；fig 1622:6663＝design/收藏文章.png：內容寬 1472、兩欄卡 706＋欄距 60、
  卡＝圖 280×210(4:3)＋gap 40＋文 386、分類→標題 20、列距 50＋線 1.5 #E0E0E0＋50；
  徽章＝圖左上內縮 8 的 32 墨黑圓＋白書籤（重用 share-bookmark.svg 反白，放大到 40 讓外圈落在圓外被裁掉）；
  手機無稿：<768 直排、768–1199 單欄橫式、≥1200 兩欄，比照作者頁橫式卡 */
.view-member-bookmarks {
  max-width: 1472px;
  margin-inline: auto;

  & .member-heading { margin-bottom: clamp(32px, 4.17vw, 50px); }  /* fig 小標底 539 → 線 589 */

  & .view-content { --bs-gutter-x: 0; }
  & .view-content > .member-bookmark-list { width: 100%; }

  & .member-bookmark-list ul {
    margin: 0;
    padding: 0;
    border-top: 1.5px solid var(--ob-border);

    @media (min-width: 1200px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }

  & .member-bookmark-list li {
    position: relative;
    display: grid;
    row-gap: 16px;
    padding-block: clamp(32px, 4.17vw, 50px);
    border-bottom: 1.5px solid var(--ob-border);

    @media (min-width: 768px) {
      grid-template-columns: minmax(0, 280fr) minmax(0, 386fr);
      grid-template-rows: auto 1fr;
      column-gap: clamp(24px, 3.7vw - 4.4px, 40px);
      row-gap: 0;
    }

    @media (min-width: 1200px) {
      &:nth-child(odd) { padding-right: 30px; }
      &:nth-child(even) { padding-left: 30px; }

      /* 奇數張收尾：最後一列只剩左卡，補右半段底線讓線走滿 */
      &:last-child:nth-child(odd)::after {
        content: '';
        position: absolute;
        inset: auto -100% -1.5px 100%;
        border-bottom: 1.5px solid var(--ob-border);
      }
    }

    & > .entity-image {
      @media (min-width: 768px) { grid-area: 1 / 1 / -1 / 2; }
    }
  }

  & .entity-image {
    position: relative;

    & img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    /* 「已收藏」徽章：::before 墨黑圓底、::after 白書籤（filter 會連底色一起反白，故拆兩層） */
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 8px;
      left: 8px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      pointer-events: none;
    }

    &::before { background: var(--ob-ink); }

    &::after {
      background: url(images/share-bookmark.svg) center / 40px no-repeat;
      filter: brightness(0) invert(1);
    }
  }

  & .entity-title {
    margin-top: 0;
    align-self: start;   /* 1fr 列預設 stretch 會把 clamp 盒撐到列底，貼齊文字高 */

    @media (min-width: 768px) { margin-top: 20px; }
  }

  & .view-empty {
    padding: 40px 0;
    font-family: var(--ob-font-sans);
    font-size: var(--ob-fs-body);
    color: var(--ob-gray-mid);
    text-align: center;
  }
}

/*!SECTION */

/*SECTION - 關於我們（#46362：landing /about_us nid 100019；fig 1629:7462「關於我們」1728×12796＝design/關於我們.png 1:1；
  手機＝design/關於我們-手機.png 393×10145 1:1（Figma proto 2451-5889）
  結構：LB #about-top（config_pages about_top：mission／intro＋team／roles／projects 引言）→ #about-kv-projects(.full-width)
  → #about-mid（about_mid：issues／award 引言）→ #about-kv-award(.full-width) → #about-bottom（about_bottom：timeline／taiwan／follow）；
  每段＝field_group html_element <section class="about-*">，空段不渲染；區段標題／引言＝主編在 CKEditor 長文字欄寫的 h2／p（粗細混排用 strong）。
  四段書頁 banner（mission／roles／issues／taiwan）：桌機 bg＝Lesley 匯出 bg_about_*.png @2x 切三片（_top 缺口／_mid 紋理／_bot 底 V）轉 WebP q75
  （透明區露頁底色；切法見 memory-bank/about-page-spec.md）＋ flyer.svg 頁緣線疊底；
  手機 bg＝bg_about_*_m.png @2x 轉 WebP（頁緣線已內含、頂缺口透明）；幾何以 vw 對各自稿寬（393／1728），內容溢出時 cover 兜底；
  底箭頭 icon-double-arrow-down.svg 手機距尖點 98 四段同。
  輪播＝view about_kv（optionset ob_cards_kv：1-up 置中露邊，沿用 ob-cards 基底控制列；手機 unslick 橫捲、卡置中露邊）。
  RWD：純尺寸走 768↔1200 clamp（手機值＝min）；結構差（bg 換圖、團隊 B 裝飾、角色 3＋2、年表軸靠左、橢圓 2 欄）用內嵌 @media。 */

/*ANCHOR - 頁標區塊隱藏（第一段 banner 直接接 header；H1 留 DOM）＋ 本頁手機邊距 24
  （稿 393 兩側 24；#main.container 手機吃整個 --bs-gutter-x 3rem＝48，全站要不要改另案，本頁先自理） */
body.page-node-100019 {
  & #block-page-title { display: none; }
  & .main.container { --bs-gutter-x: 1.5rem; }
}

/*ANCHOR - 區段標題／引言共通（fig page-title 48 serif bold 置中；引言 sans 18 字距 8% 行高 2 寬 968；手機 28／16 行高 1.7）
  選擇器加 .field 把特異度抬到 0-3-2：editor.css 的 `.text-formatted, .ck.ck-content { & :is(p, ul>li) }` 展開後是 0-2-2 且較晚載入，同分會輸 */
.config_pages--type--about > section > .field.text-formatted {
  & h2 {
    margin: 0;
    font-family: var(--ob-font-serif);
    font-size: clamp(28px, 4.63vw - 7.56px, 48px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--ob-ls-base);
    text-align: center;
    color: var(--ob-ink);
  }
  & p {
    max-width: 968px;
    margin: 0 auto;
    font-family: var(--ob-font-sans);
    font-size: clamp(16px, 0.46vw + 12.44px, 18px);
    letter-spacing: var(--ob-ls-wider);
    line-height: 1.7;
    text-align: center;
    color: var(--ob-gray-dark);
    @media (min-width: 768px) { line-height: 2; }
  }
  & h2 + p { margin-top: clamp(20px, 2.78vw - 1.33px, 32px); }
}

/*ANCHOR - 基底 field.css 邊距歸零（.field--type-entity-reference 1.2em／.node .field--type-image 右 1em／其 img 下 1em：會撐開團隊列、藥丸卡底、年表書封格） */
.config_pages--type--about {
  & .field--type-entity-reference { margin-bottom: 0; }
  & .field--type-image,
  & .field--type-image img { margin: 0; }
}

/*ANCHOR - 書頁 banner 共通（滿版出血；min-height 對稿寬比例；底箭頭＝第一層 background；桌機 flyer 頁緣線＝::after 疊底、手機 bg 已內含所以不畫）
  手機：單張 bg cover 鎖頁頂（393 稿內容固定，溢出很小）。
  桌機／平板：bg 切三片（top 缺口／mid 紋理／bot 底部 V），top 與 bot 以 100% 寬等比鎖頂鎖底、mid 拉伸填中間
  → 內容超過稿高（768–1199 常態）時箱子長高、缺口與 V 形不變形也不會蓋到內容；1728 時三片剛好等於原圖。 */
.about-mission,
.about-roles,
.about-issues,
.about-taiwan {
  --bg-w: 393;
  --arrow-b: 98px;
  position: relative;
  left: 50%;
  width: 100vw;
  min-height: calc(100vw * var(--bg-h) / var(--bg-w));
  margin-left: -50vw;
  margin-bottom: clamp(40px, 9.26vw - 31.11px, 80px);   /* → 下一段標題 80 */
  padding: var(--pad-top) 24px var(--pad-bottom);
  background:
    url(images/icon-double-arrow-down.svg) 50% calc(100% - var(--arrow-b)) / 40px no-repeat,
    var(--bg) 50% 0 / cover no-repeat;
  color: var(--ob-white);
  text-align: center;

  @media (min-width: 768px) {
    --bg-w: 1728;
    --top-h: calc(100vw * var(--bg-top-r) / 1728);
    --bot-h: calc(100vw * var(--bg-bot-r) / 1728);
    background:
      url(images/icon-double-arrow-down.svg) 50% calc(100% - var(--arrow-b)) / 40px no-repeat,
      var(--bg-top) 50% 0 / 100% auto no-repeat,
      var(--bg-bot) 50% 100% / 100% auto no-repeat,
      var(--bg-mid) 50% var(--top-h) / 100% calc(100% - var(--top-h) - var(--bot-h)) no-repeat;

    &::after {
      content: '';
      position: absolute;
      inset: auto 0 0;
      aspect-ratio: 1728 / 165;
      background: url(images/flyer.svg) center bottom / 100% auto no-repeat;
      pointer-events: none;
    }
  }
}

/*ANCHOR - 缺口頂箭頭（roles／issues／taiwan：上一段結束後的書頁缺口內；手機騎在交界 top -20、桌機 top 40；淺底 → 反相成灰） */
.about-roles::before,
.about-issues::before,
.about-taiwan::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  width: 40px;
  height: 40px;
  translate: -50% 0;
  background: url(images/icon-double-arrow-down.svg) no-repeat center;
  filter: invert(1);
  opacity: 0.3;
  pointer-events: none;
  @media (min-width: 768px) { top: calc(100vw * 40 / 1728); }
}

/*ANCHOR - 1 使命宣言（黑底：直式 logo 180×281 → 24 → h2 52（strong 粗）→ 24 → 標語 sans 24 字距 8%；底箭頭距底 205；
  手機：logo 120×187 → 18 → h2 32 → 16 → 標語 17 行高 1.5） */
section.about-mission {
  --bg: url(images/bg_about_mission_m.webp);
  --bg-h: 694;
  --pad-top: calc(100vw * 187 / 393);
  --pad-bottom: calc(100vw * 192 / 393);
  @media (min-width: 768px) {
    --bg-top: none;                          /* 無缺口 */
    --bg-mid: url(images/bg_about_mission_mid.webp);
    --bg-bot: url(images/bg_about_mission_bot.webp);
    --bg-top-r: 0;
    --bg-bot-r: 199;
    --bg-h: 1104;
    --pad-top: calc(100vw * 340 / 1728);
    --pad-bottom: calc(100vw * 265 / 1728);  /* ≥ 箭頭 205＋40＋20，內容溢出時仍在 V 之上（1728 時 min-height 主宰、不影響） */
    --arrow-b: calc(100vw * 205 / 1728);
  }

  &::before {                        /* images/logo-v.svg（fig logo-v：OB 標＋OPEN BOOK 閱讀誌 直式，180×281） */
    content: '';
    display: block;
    width: clamp(120px, 16vw + 57.12px, 180px);   /* 393 → 768 流體 */
    aspect-ratio: 180 / 281;
    margin: 0 auto clamp(18px, 1.39vw + 7.33px, 24px);
    background: url(images/logo-v.svg) no-repeat center / contain;
  }

  & > .field.text-formatted {
    & h2 {
      font-size: clamp(32px, 4.63vw - 3.56px, 52px);
      font-weight: 400;
      letter-spacing: var(--ob-ls-wide);
      line-height: 1.4;
      color: var(--ob-white);
      & strong { font-weight: 700; }
    }
    & p {
      max-width: none;
      font-size: clamp(17px, 1.62vw + 4.56px, 24px);
      line-height: 1.5;
      color: var(--ob-white);
    }
    & h2 + p { margin-top: clamp(16px, 1.85vw + 1.78px, 24px); }
  }
}

/*ANCHOR - 2 關於我們（section.about-team 同時包 intro 長文字＋團隊 IEF：標題 → 40 → 引言（每行青色底線 50%、行高 2）→ 96 → 團隊；手機 24／40） */
section.about-team > .field.text-formatted {
  & h2 + p { margin-top: clamp(24px, 3.70vw - 4.44px, 40px); }
  & p {
    line-height: 2;
    text-decoration: underline;
    text-decoration-color: rgb(0 185 200 / 0.5);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
}

/*ANCHOR - 團隊成員（桌機 3 欄 fig Group 574：格 325×292、欄距 120、列距 100；圓照 211×218 ＋ 右側 B 裝飾 104×211 @x221 y3；
  手機 2 欄：格 145、間距 22、圓照 145 無 B；無照片＝笑臉佔位 icon_team_default.png；部門 sans 15 → 姓名 serif 19→20 青色半透明底條 12） */
.about-team {
  & .field--name-field-about-team {
    display: grid;
    margin-top: clamp(40px, 12.96vw - 59.56px, 96px);
    grid-template-columns: repeat(auto-fit, 145px);
    justify-content: center;
    gap: 22px;
    max-width: 1216px;
    margin-inline: auto;
    @media (min-width: 768px) {
      grid-template-columns: repeat(auto-fit, 325px);
      column-gap: clamp(20px, 23.15vw - 157.78px, 120px);   /* 768 時 20：BS container 內寬 672 才排得下 2×325 */
      row-gap: clamp(48px, 12.04vw - 44.44px, 100px);
    }
  }

  & .eck-entity {
    width: 145px;
    text-align: center;
    @media (min-width: 768px) {
      width: 325px;
      padding-right: 114px;
      background: url(images/icon_team_b.png) 221px 3px / 104px auto no-repeat;
    }

    & .field--name-field-image,
    &:not(:has(.field--name-field-image))::before {
      display: block;
      width: 145px;
      height: 145px;
      margin-bottom: 16px;
      @media (min-width: 768px) {
        width: 211px;
        height: 218px;
        margin-bottom: 25px;
      }
    }
    &:not(:has(.field--name-field-image))::before {
      content: '';
      background: url(images/icon_team_default.png) no-repeat center / contain;
    }
    & .field--name-field-image img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }

    & .field--name-field-subtitle {
      font-family: var(--ob-font-sans);
      font-size: 15px;
      line-height: 1;
      color: var(--ob-gray-dark);
    }
    & .field--name-title {
      width: fit-content;
      margin: 0 auto;
      padding-bottom: 4px;
      background: linear-gradient(transparent calc(100% - 12px), rgb(0 185 200 / 0.5) 0);
      font-family: var(--ob-font-serif);
      font-size: clamp(19px, 0.23vw + 17.22px, 20px);
      font-weight: 700;
      line-height: 1.5;
      color: var(--ob-ink);
    }
  }
}

/*ANCHOR - 3 公共角色（青底：h2 serif 36 regular、strong 粗＋黃 → 60 → 5 欄 294：灰圓 190 內 icon（@2x 圖 zoom .5）→ 24 →
  角色名 serif 24 黃底線 5px → 16 → 簡介 sans 15 → 代表詞 sans 17 bold；底箭頭距底 186；
  手機：h2 28 行高 32 → 32 → 3＋2 置中（欄距 19 列距 16）：灰圓 102（icon zoom .27）→ 10 → 角色名 19 短黃條 17×5 → 4 → 代表詞 15，簡介不顯示） */
section.about-roles {
  --bg: url(images/bg_about_role_m.webp);
  --bg-h: 818;                                 /* 784×1632 @2x＝392 寬 816，換算 393 */
  --pad-top: calc(100vw * 175 / 393);
  --pad-bottom: calc(100vw * 180 / 393);
  margin-top: clamp(60px, 4.63vw + 24.44px, 80px);   /* 團隊列 → 缺口 */
  @media (min-width: 768px) {
    --bg-top: url(images/bg_about_role_top.webp);
    --bg-mid: url(images/bg_about_role_mid.webp);
    --bg-bot: url(images/bg_about_role_bot.webp);
    --bg-top-r: 254;
    --bg-bot-r: 197;
    --bg-h: 1099;
    --pad-top: calc(100vw * 331 / 1728);
    --pad-bottom: calc(100vw * 300 / 1728);
    --arrow-b: calc(100vw * 186 / 1728);
  }

  & > .field.text-formatted h2 {
    margin-bottom: clamp(32px, 6.48vw - 17.78px, 60px);
    font-size: clamp(28px, 1.85vw + 13.78px, 36px);
    font-weight: 400;
    line-height: clamp(32px, 3.47vw + 5.33px, 47px);   /* 1.15 → 1.3 */
    color: var(--ob-white);
    & strong {
      font-weight: 700;
      color: var(--ob-accent-yellow);
    }
  }

  & .field--name-field-about-roles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 19px;
    max-width: 1470px;
    margin-inline: auto;
    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 294px));
      gap: 32px 0;
    }
    @media (min-width: 1200px) { grid-template-columns: repeat(5, 1fr); }
    & > .field__item {
      width: calc((100% - 38px) / 3);
      @media (min-width: 768px) { width: auto; }
    }
  }

  & .eck-entity {
    display: grid;
    justify-items: center;

    & .field--name-field-image {
      display: grid;
      place-items: center;
      width: min(100%, 102px);
      aspect-ratio: 1;
      margin-bottom: clamp(10px, 3.24vw - 14.89px, 24px);
      border-radius: 50%;
      background: var(--ob-gray-light);
      @media (min-width: 768px) { width: 190px; }
      & img {
        display: block;
        zoom: 0.27;                 /* @2x 圖照 width/height 屬性縮（image style 上限 260 → 桌機顯示 ≤130、手機 ≤70） */
        mix-blend-mode: multiply;   /* Lesley 匯出的 icon PNG 是白底不透明 → 乘法混合讓白底融進灰圓 */
        @media (min-width: 768px) { zoom: 0.5; }
      }
    }
    & .field--name-title {
      width: fit-content;
      padding-bottom: 7px;
      background: linear-gradient(var(--ob-accent-yellow) 0 0) 50% 100% / 17px 5px no-repeat;
      font-family: var(--ob-font-serif);
      font-size: clamp(19px, 1.16vw + 10.11px, 24px);
      font-weight: 700;
      line-height: 1.4;
      color: var(--ob-white);
      @media (min-width: 768px) {
        padding-bottom: 4px;
        border-bottom: 5px solid var(--ob-accent-yellow);
        background: none;
      }
    }
    & .field--name-field-subtitle {
      display: none;
      margin-top: 16px;
      font-family: var(--ob-font-sans);
      font-size: var(--ob-fs-meta);
      line-height: 2.2;
      color: var(--ob-bg);
      @media (min-width: 768px) { display: block; }
    }
    & .field--name-field-tagline {
      margin-top: 4px;
      font-family: var(--ob-font-sans);
      font-size: clamp(15px, 0.46vw + 11.44px, 17px);
      font-weight: 700;
      line-height: 2;
      color: var(--ob-white);
      @media (min-width: 768px) { margin-top: 0; }
    }
  }
}

/*ANCHOR - 4 代表性專案／6 好書獎 標題引言 → KV 60 */
.about-projects,
.about-award { margin-bottom: clamp(32px, 6.48vw - 17.78px, 60px); }

/*ANCHOR - about-kv 大圖輪播（optionset ob_cards_kv＝1-up centerMode centerPadding 13.5%：1728 時卡 1221×687、露邊 213、gap 40；
  控制列沿用 ob-cards 基底（箭頭 482／進度線 338），卡下距 60；手機 <768 unslick 橫捲：卡 300（76.3vw）置中、兩側露 15、gap 30、吸附置中、下距 60） */
.slick--optionset--ob-cards-kv {
  --card-w: 76.3vw;
  --card-pad: 20px;
}
.about-kv {
  & .slick__slider:not(.slick-initialized) {
    gap: 30px;
    padding-inline: calc((100vw - var(--card-w)) / 2);
    margin-bottom: 60px;
    scroll-snap-type: x mandatory;
    & .slick__slide { scroll-snap-align: center; }
  }
  & .slick__slider.slick-initialized { padding-bottom: 100px; }
  & .views-field-field-mobile-image,
  & .views-field-body,
  & .views-field-title { display: none; }
  & .slick__slide { position: relative; }
  & .views-field-field-slide-image img {
    display: block;
    width: 100%;
    aspect-ratio: 1221 / 687;
    object-fit: cover;
  }
  & .views-field-field-slide-link a {
    position: absolute;
    inset: 0 var(--card-pad);
    z-index: 1;
    font-size: 0;
    color: transparent;
  }
}

/*ANCHOR - 5 議題樹（深底：h2 serif 44 regular 兩行、strong 粗＋青 → 60 → 藥丸卡 716×357 ×2 gap 40：白線 40% 框、圓角 179、
  內距 48/86/59；標題 serif 26 黃底線 3px → 16 → 副標 sans 15 → 24 → 內文 sans 16 行高 1.9 → 32 → tag 膠囊 sans 14 青框；底箭頭距底 177；
  手機：h2 28 三行 → 32 → 卡滿寬上下堆疊 gap 24、圓角 74、內距 32/28/32：標題 20 → 16 → 副標 15 → 16 → 內文 14 → 20 → tag） */
section.about-issues {
  --bg: url(images/bg_about_issue_m.webp);
  --bg-h: 1213;
  --pad-top: calc(100vw * 175 / 393);
  --pad-bottom: calc(100vw * 180 / 393);
  @media (min-width: 768px) {
    --bg-top: url(images/bg_about_issue_top.webp);
    --bg-mid: url(images/bg_about_issue_mid.webp);
    --bg-bot: url(images/bg_about_issue_bot.webp);
    --bg-top-r: 253;
    --bg-bot-r: 198;
    --bg-h: 1154;
    --pad-top: calc(100vw * 311 / 1728);
    --pad-bottom: calc(100vw * 300 / 1728);
    --arrow-b: calc(100vw * 177 / 1728);
  }

  & > .field.text-formatted h2 {
    margin-bottom: clamp(32px, 6.48vw - 17.78px, 60px);
    font-size: clamp(28px, 3.70vw - 0.44px, 44px);
    font-weight: 400;
    line-height: 1.25;
    color: var(--ob-white);
    & strong {
      font-weight: 700;
      color: var(--ob-primary-light);
    }
    & br {                            /* 桌機兩行靠內文 <br>；手機稿三行自然折行 */
      display: none;
      @media (min-width: 768px) { display: initial; }
    }
  }

  & .field--name-field-about-issues {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: clamp(24px, 3.70vw - 4.44px, 40px);
    max-width: 1472px;
    margin-inline: auto;
  }

  & .eck-entity {
    width: min(100%, 716px);            /* 只有一張時置中不撐滿 */
    justify-self: center;
    padding: clamp(32px, 3.70vw + 3.56px, 48px) clamp(28px, 5vw, 86px) clamp(32px, 6.25vw - 16px, 59px);
    border: 1px solid rgb(255 255 255 / 0.4);
    border-radius: clamp(74px, 23vw - 16px, 179px);   /* 隨卡寬變：393 卡 347 → 74、716 卡 → 179 */

    & .field--name-title {
      width: fit-content;
      margin-inline: auto;
      border-bottom: 3px solid var(--ob-accent-yellow);
      font-family: var(--ob-font-serif);
      font-size: var(--ob-fs-title);
      font-weight: 700;
      letter-spacing: var(--ob-ls-wide);
      line-height: 1.3;
      color: var(--ob-white);
    }
    & .field--name-field-subtitle {
      margin-top: 16px;
      font-family: var(--ob-font-sans);
      font-size: 15px;
      letter-spacing: var(--ob-ls-wider);
      line-height: var(--ob-lh-base);
      color: var(--ob-bg);
    }
    & .field--name-field-body {
      margin-top: clamp(16px, 1.85vw + 1.78px, 24px);
      font-family: var(--ob-font-sans);
      font-size: clamp(14px, 0.46vw + 10.44px, 16px);
      letter-spacing: var(--ob-ls-wider);
      line-height: 1.9;
      color: var(--ob-white);
      & p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
    }
    & .field--name-field-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: clamp(20px, 2.78vw - 1.33px, 32px);
      & .field__item { display: contents; }
      & a {
        display: inline-block;
        padding: 0 14px;
        border: 1px solid var(--ob-primary);
        border-radius: 4px;
        font-family: var(--ob-font-sans);
        font-size: var(--ob-fs-small);
        line-height: 28px;
        color: var(--ob-primary);
        text-decoration: none;
        &:hover,
        &:focus {
          background: var(--ob-primary);
          color: var(--ob-white);
        }
      }
    }
  }
}

/*ANCHOR - 7 年度好書年表（KV 控制列 → 100 → 標題 → 32 → 引言 → 52 → 垂直軸 1.5px（頂圓點 8、底三角）1134 寬置中；
  項目左右交錯、間距 60：年份 serif 48 ＋ 上方小標 sans 15 青 ＋ 軸上圓點 20 對齊首排書封中線（書頂 +113）；
  書封 159×225 3 欄 gap 16、距軸 52，左側項目由右往左排（rtl）；
  手機：KV 下距 60 由 .about-kv 出 → 標題 → 20 → 引言 → 30 → 軸靠左 x 91（頂圓點高於首項 26、底端開口箭頭）：
  年份欄 76（小標 14 → 年份 32 靠左不換行）→ 39 → 書封 2 欄 gap 16；項目間距 32、底距 96） */
.about-timeline {
  padding-top: 0;
  @media (min-width: 768px) { padding-top: clamp(48px, 12.04vw - 44.44px, 100px); }

  & .field--name-field-about-timeline {
    position: relative;
    max-width: 1134px;
    margin: clamp(30px, 5.09vw - 9.11px, 52px) auto 0;
    padding-top: clamp(0px, 72.22px - 6.02vw, 26px);   /* 26 → 0 */
    padding-bottom: clamp(96px, 24.07vw - 88.89px, 200px);

    &::before,
    &::after {
      content: '';
      position: absolute;
      left: 91px;
      translate: -50% 0;
      pointer-events: none;
      @media (min-width: 768px) { left: 50%; }
    }
    &::before {                     /* 軸線＋頂圓點 */
      top: 0;
      bottom: 0;
      width: 8px;
      background:
        radial-gradient(circle, var(--ob-ink) 3.5px, transparent 4px) 50% 0 / 8px 8px no-repeat,
        linear-gradient(var(--ob-ink), var(--ob-ink)) 50% 0 / 1.5px 100% no-repeat;
    }
    &::after {                      /* 底端：手機 開口箭頭（1.5 線）→ 桌機 實心三角 */
      bottom: 0;
      width: 8px;
      height: 8px;
      border: solid var(--ob-ink);
      border-width: 0 1.5px 1.5px 0;
      translate: -50% -3px;
      rotate: 45deg;
      @media (min-width: 768px) {
        width: 12px;
        height: 10px;
        border: 0;
        translate: -50% 0;
        rotate: none;
        background: var(--ob-ink);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
      }
    }
  }

  & .field--name-field-about-timeline > .field__item + .field__item { margin-top: clamp(32px, 6.48vw - 17.78px, 60px); }

  & .eck-entity {
    position: relative;
    display: grid;
    grid-template-columns: 76px 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 39px;
    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 88px auto 1fr;
      column-gap: 104px;
    }

    &::before {                     /* 軸上圓點 */
      content: '';
      position: absolute;
      top: 25px;
      left: 91px;
      width: 20px;
      height: 20px;
      translate: -50% 0;
      border-radius: 50%;
      background: var(--ob-primary);
      @media (min-width: 768px) {
        top: 103px;
        left: 50%;
      }
    }

    & .field--name-field-subtitle {
      grid-row: 1;
      align-self: end;
      margin-bottom: 4px;
      font-family: var(--ob-font-sans);
      font-size: clamp(14px, 0.23vw + 12.22px, 15px);
      line-height: 1;
      color: var(--ob-primary);
    }
    & .field--name-title {
      grid-row: 2;
      align-self: start;
      font-family: var(--ob-font-serif);
      font-size: clamp(32px, 3.70vw + 3.56px, 48px);
      font-weight: 700;
      line-height: 1.05;
      white-space: nowrap;
      color: var(--ob-black);
    }
    & .field--name-field-images {
      grid-row: 1 / span 3;
      grid-column: 2;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      @media (min-width: 768px) { grid-template-columns: repeat(3, minmax(0, 159px)); }
      & img {
        display: block;
        width: 100%;
        height: auto;
      }
    }
  }

  @media (min-width: 768px) {
    & .field__item:nth-child(odd) .eck-entity {
      & .field--name-title,
      & .field--name-field-subtitle {
        grid-column: 1;
        text-align: right;
      }
      & .field--name-field-images { grid-column: 2; }
    }
    & .field__item:nth-child(even) .eck-entity {
      & .field--name-title,
      & .field--name-field-subtitle { grid-column: 2; }
      & .field--name-field-images {
        grid-column: 1;
        direction: rtl;
      }
    }
  }
}

/*ANCHOR - 8 陪伴台灣（深色漸層底：h2 serif 48（Openbook regular、strong 粗＋青）→ 32 → 副標 sans 18 → 60 →
  5 直立橢圓 262×350 gap 40 白線 40% 框：前句 sans 20 → 6 → 主句 serif 26 青底線 3px → 12 → 後句 sans 20；底箭頭距底 177；
  手機：缺口箭頭不畫（年表軸底箭頭代之）；h2 28 → 20 → 副標 16 → 32 → 方圓卡 2 欄 159×173 圓角 60 gap 24（最後一張置中）：前後句 18／主句 20） */
section.about-taiwan {
  --bg: url(images/bg_about_taiwan_m.webp);
  --bg-h: 1087;
  --pad-top: calc(100vw * 191 / 393);
  --pad-bottom: calc(100vw * 180 / 393);
  @media (min-width: 768px) {
    --bg-top: url(images/bg_about_taiwan_top.webp);
    --bg-mid: url(images/bg_about_taiwan_mid.webp);
    --bg-bot: url(images/bg_about_taiwan_bot.webp);
    --bg-top-r: 253;
    --bg-bot-r: 198;
    --bg-h: 1154;
    --pad-top: calc(100vw * 311 / 1728);
    --pad-bottom: calc(100vw * 300 / 1728);
    --arrow-b: calc(100vw * 177 / 1728);
  }

  &::before {
    display: none;
    @media (min-width: 768px) { display: block; }
  }

  & > .field.text-formatted {
    & h2 {
      font-weight: 400;
      color: var(--ob-white);
      & strong {
        font-weight: 700;
        color: var(--ob-primary-light);
      }
    }
    & p {
      letter-spacing: var(--ob-ls-base);
      color: var(--ob-white);
    }
  }

  & .field--name-field-about-taiwan {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, 3.70vw - 4.44px, 40px);
    max-width: 1470px;
    margin: clamp(32px, 6.48vw - 17.78px, 60px) auto 0;
    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 262px));
    }
    @media (min-width: 1200px) { grid-template-columns: repeat(5, 1fr); }
    & > .field__item {
      width: min(calc((100% - 24px) / 2), 262px);
      @media (min-width: 768px) { width: auto; }
    }
  }

  & .eck-entity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 173px;
    padding: 24px clamp(6px, 2.31vw - 11.78px, 16px);   /* 手機稿主句幾乎貼框（159 寬放 144 字） */
    border: 1px solid rgb(255 255 255 / 0.4);
    border-radius: 60px;
    @media (min-width: 768px) {          /* 桌機 5 欄 262 寬固定 → 高 350 圓角 131 跟著固定，不隨 vw */
      min-height: 350px;
      border-radius: 131px;
    }

    & .field--name-field-subtitle { order: 1; }
    & .field--name-title { order: 2; }
    & .field--name-field-tagline { order: 3; }

    & .field--name-field-subtitle,
    & .field--name-field-tagline {
      font-family: var(--ob-font-sans);
      font-size: clamp(18px, 0.46vw + 14.44px, 20px);
      line-height: var(--ob-lh-snug);
      color: var(--ob-bg);
    }
    & .field--name-title {
      margin-block: 6px 12px;
      border-bottom: 3px solid var(--ob-primary-light);
      font-family: var(--ob-font-serif);
      font-size: var(--ob-fs-title);
      font-weight: 700;
      letter-spacing: var(--ob-ls-base);
      line-height: 1.3;
      color: var(--ob-white);
    }
  }
}

/*ANCHOR - 9 追蹤我們（主編自編內文：h2 serif 40 → 60 → 社群圖（img 100 圓、間距 60）→ 60 → hr 1220 → 60 → h3 serif 24 青底線 → 連結 sans 16 青；
  底距贊助橫幅 120；≥768 內文固定結構 h2／p／hr／h3＋p／h3＋p → grid 兩欄：聯絡我們左、訂閱我們右、中間 2px 直線（fig x 864、貫穿 h3～p）；
  手機：單欄堆疊 h2 28 → 32 → 圖 60 間距 24 → 32 → hr → 32 → h3 20 → 12 → 連結 → 32 → 下一組） */
section.about-follow {
  max-width: 1220px;
  margin-inline: auto;
  padding-bottom: clamp(40px, 12.96vw - 59.56px, 96px);   /* 底距贊助橫幅 120 − base .main 下內距 24 */

  & > .field.text-formatted {
    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      & > h2, & > h2 + p, & > hr { grid-column: 1 / -1; }
      & > h2 + p { margin-top: 0; }   /* grid 內 margin 不折疊：h2 下距 60 已含 */
      & > h3 { grid-row: 4; }
      & > h3 + p { grid-row: 5; margin-bottom: 0; }
      & > h3:nth-of-type(1), & > h3:nth-of-type(1) + p { grid-column: 1; }
      & > h3:nth-of-type(2), & > h3:nth-of-type(2) + p { grid-column: 2; }
      &::after {                    /* 兩欄中線 */
        content: '';
        grid-area: 4 / 1 / 6 / -1;
        justify-self: center;
        width: 2px;
        background: var(--ob-border);
      }
    }
    & h2 {
      margin-bottom: clamp(32px, 6.48vw - 17.78px, 60px);
      font-size: clamp(28px, 2.78vw + 6.67px, 40px);
    }
    & p {
      max-width: none;
      font-size: var(--ob-fs-body);
      letter-spacing: var(--ob-ls-base);
      line-height: 1.5;
    }
    & p img {
      display: inline-block;
      width: clamp(60px, 9.26vw - 11.11px, 100px);
      height: clamp(60px, 9.26vw - 11.11px, 100px);
      margin: 0 clamp(12px, 4.17vw - 20px, 30px);
      border-radius: 50%;
      vertical-align: middle;
    }
    & hr {
      margin: clamp(32px, 6.48vw - 17.78px, 60px) 0;
      border: 0;
      border-top: 1px solid var(--ob-border);
      opacity: 1;
    }
    & h3 {
      width: fit-content;
      margin: 0 auto clamp(12px, 4.63vw - 23.56px, 32px);
      border-bottom: 3px solid var(--ob-primary-light);
      font-family: var(--ob-font-serif);
      font-size: clamp(20px, 0.93vw + 12.89px, 24px);
      font-weight: 700;
      letter-spacing: var(--ob-ls-base);
      line-height: 1.3;
      text-align: center;
      color: var(--ob-ink);
    }
    & h3 + p { margin-bottom: clamp(32px, 6.48vw - 17.78px, 60px); }
    & a {
      color: var(--ob-primary);
      text-decoration: underline;
      text-underline-offset: 3px;
      &:hover,
      &:focus { color: var(--ob-primary-light); }
    }
  }
}

/*!SECTION */

/*SECTION - 登入／註冊／忘記密碼（#47618：core /user/login・/user/register・/user/password 三頁共用；
  9/22 起 #46366 會員編輯資料的兩張表單（/user/{uid}/edit 帳號 #user-form、/user/{uid}/edit/profile/1 個人資料 #user-profile-form）
  也進同一 scope 共用表單元件規格，tab 列只給登入三頁、會員頁的小分頁在會員專區 SECTION）。
  設計稿＝fig Archive 頁「會員登入」1616:6261 ＝ design/會員登入.png（1728×1424 1:1，無手機稿）。PNG 量測：
  表單 590 置中 x569；label 16 粗 ink（星號 primary）→ 8 → 輸入框 590×48 透明底、框 1.5 ink、角 ~4、placeholder 16 #9E9E9E、內距 16；欄距 24；
  登入鈕 590×48 primary 白粗字、直角；線 2px #E0E0E0 置中「or」15 #37474F（鈕底 696 → 線 724 → 鈕 756）；
  Google／Facebook 285×48 ×2 間距 20 底 ink 白粗字、直角（純文字、無 icon）。字級＝PIL 渲染對 fig 文字框寬＋墨跡密度定字重。
  稿上「忘記密碼？」「還沒有帳號嗎？註冊」「重設帳號」三個連結由 PM 8/19 指定的 tab 列取代（tab＝會員專區同款：
  上線借頁標區塊 ::after 的 2px、下線 2px、選中 5px primary 壓線）；稿上密碼欄的眼睛 toggle 需 JS，未做。
  DOM：core local tasks → Barrio 出 nav.tabs > ul.nav.primary.nav-tabs > li.nav-item > a.nav-link.active（server 給 .active）；
  core 順序 登入／註冊／重設 → PM 要 註冊／登入／重設 → order 拉；tab 名走 locale 翻譯、不在 CSS 動。
  第三方登入＝openid_connect 獨立 form #openid-connect-login-form（display: below），每顆 <button name=google|facebook> 各包一層 <div>。
  註冊頁＝core 帳號欄（email／使用者名稱）＋ netiCRM civicrm.module 嵌入「User Registration」綁的 profile（#crm-container，
  civicrm.css 的 .label 浮動 28%／.content 左推 30% 改直排）＋ captcha */
body:is(.page-user-login, .page-user-register, .page-user-password),
body.path-user:has(#user-form, #user-profile-form) {

  /*ANCHOR - 分頁 tab */
  &:is(.page-user-login, .page-user-register, .page-user-password) nav.tabs {
    max-width: 1474px;
    margin: 0 auto;
    border-bottom: 2px solid var(--ob-border);

    & ul.nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: clamp(16px, 5.56vw - 26.7px, 40px);
      margin: 0;
      padding: 0;
      border: 0;
    }

    & li.nav-item {
      list-style: none;

      &:has(.nav-link--user-register) { order: -1; }
    }

    & a.nav-link {
      position: relative;
      display: block;
      padding: 20px 0;
      border: 0;
      background: none;
      font-family: var(--ob-font-sans);
      font-size: clamp(16px, 0.46vw + 12.44px, 18px);
      line-height: 20px;
      color: var(--ob-ink);
      text-decoration: none;
      white-space: nowrap;

      &:hover,
      &:focus { color: var(--ob-primary); }

      &.active::after {
        content: '';
        position: absolute;
        inset: auto 0 -3px;
        height: 5px;
        background: var(--ob-primary);
      }
    }
  }

  /*ANCHOR - 表單 */
  & .block-system-main-block {
    max-width: 590px;
    margin: clamp(40px, 1.16vw + 35.5px, 60px) auto clamp(60px, 4.17vw + 28px, 100px);   /* fig tab 線 436 → label 432 無距；tab 版取 60 */
    font-family: var(--ob-font-sans);
    color: var(--ob-ink);

    & .block-inner,
    & .block-content { margin: 0; }
  }

  & .form-item,
  & .crm-container .crm-section { margin: 0 0 22px; }   /* fig 框底 500 → 下一 label 墨頂 523 */

  & .form-item > label,
  & .crm-container label {
    display: block;
    margin: 0 0 8px;
    font-size: var(--ob-fs-body);
    font-weight: 700;
    line-height: 1;   /* fig label 墨頂 431 → 框 452 */
  }

  /* 必填星號：Barrio 用紅色 SVG 圖 → 改文字 * 上 primary */
  & .form-required::after {
    content: '*';
    width: auto;
    height: auto;
    margin: 0 0 0 4px;
    background: none;
    vertical-align: baseline;
    color: var(--ob-primary);
  }

  & .form-control,
  & .crm-container input.form-text,
  & .crm-container select.form-select {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1.5px solid var(--ob-ink);
    border-radius: 4px;
    background: transparent;
    font-size: var(--ob-fs-body);
    color: var(--ob-ink);
    box-shadow: none;

    &::placeholder { color: var(--ob-gray-mid); }

    &:focus {
      outline: none;
      border-color: var(--ob-primary);
      background: transparent;
      box-shadow: none;
    }
  }

  /* Bootstrap .text-muted 帶 !important */
  & .description,
  & .captcha__description {
    display: block;
    margin: 6px 0 0;
    font-size: var(--ob-fs-small);
    line-height: var(--ob-lh-base);
    color: var(--ob-gray-mid) !important;

    & a {
      color: var(--ob-primary);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  & form > p {
    margin: 0 0 24px;
    font-size: var(--ob-fs-body);
    line-height: var(--ob-lh-base);
  }

  & .form-actions {
    margin: 40px 0 0;   /* fig 密碼框底 592 → 忘記密碼連結 → 鈕 648；連結已併入 tab，取中間值 */

    & .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 48px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: var(--ob-primary);
      font-size: var(--ob-fs-body);
      font-weight: 700;
      line-height: 1;
      color: var(--ob-white);
      box-shadow: none;

      &:hover,
      &:focus {
        background: var(--ob-primary-light);
        color: var(--ob-white);
      }
    }
  }

  /*ANCHOR - 註冊頁 CRM profile */
  & .crm-container {
    & fieldset {
      margin: 0;
      padding: 0;
      border: 0;
    }

    & legend { display: none; }   /* 註冊頁 profile 名稱與 tab 重複；編輯頁的 legend 在下方 ANCHOR 以 id 特異度開回來 */

    & .crm-section {
      & .label,
      & .content {
        float: none;
        width: auto;
        margin: 0;
        text-align: left;
      }

      /* helprow 是獨立 .crm-section → 拉上來貼欄位 */
      &[id^="helprow"] { margin-top: -18px; }
    }

    & .crm-form-elem { display: block; }
    & .crm-form-elem + .crm-form-elem { margin-top: 8px; }   /* 縣市列＝縣市／鄉鎮市區／郵遞區號三個元件直排 */
    & input.form-text { margin-top: 0; }   /* civicrm.css 給 4px → label 到框與 core 同 8 */

    & .crm-marker { color: var(--ob-primary); }   /* 同 core 必填星號 */
  }

  /*ANCHOR - 會員編輯資料（#46366：無設計稿，PM 8/19 參考圖＝窄表單 label 在上 → 沿用上方元件規格；
    小分頁自帶下距，主區塊不再加上距；帳號名稱 h3 與 legend「個人資料」置中；密碼確認組的內層 form-item 不重複下距） */
  &:has(#user-form, #user-profile-form) .block-system-main-block { margin-top: 0; }

  & #user-profile-form {
    & > .civicrm-user-profile > h3 {   /* 帳號名稱 */
      margin: 0 0 clamp(16px, 1.85vw + 8.8px, 24px);
      font-family: var(--ob-font-serif);
      font-size: clamp(20px, 0.93vw + 12.89px, 24px);
      font-weight: 700;
      letter-spacing: var(--ob-ls-base);
      line-height: 1.3;
      text-align: center;
    }

    & fieldset {
      margin: 0;
      padding: 0;
      border: 0;
    }

    & legend {   /* Bootstrap 給 float:left + 大字 */
      display: block;
      float: none;
      width: auto;
      margin: 0 0 clamp(24px, 1.85vw + 16.8px, 32px);
      font-size: clamp(16px, 0.46vw + 14.4px, 18px);
      font-weight: 700;
      line-height: 1.3;
      text-align: center;
    }
  }

  & .form-type-password-confirm {
    & > .form-item:last-of-type { margin-bottom: 0; }
    & .password-parent,
    & .confirm-parent { max-width: none; }   /* Barrio user.css 鎖 33em */

    & .password-strength,
    & .password-confirm-message {
      margin: 6px 0 0;
      font-size: var(--ob-fs-small);
      line-height: var(--ob-lh-base);
      color: var(--ob-gray-mid);
    }
  }

  /*ANCHOR - captcha */
  & .captcha {
    margin: 0 0 24px;

    & .captcha__image-wrapper { margin: 0 0 12px; }
    & .form-item { margin: 0; }
  }

  /*ANCHOR - 第三方登入 */
  & #openid-connect-login-form {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 28px;
    padding-top: 30px;   /* fig 登入鈕底 696 → 線 724 → 鈕 756 */

    /* 分隔線＋置中「or」 */
    &::before {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      border-top: 2px solid var(--ob-border);
    }

    &::after {
      content: 'or';
      position: absolute;
      top: -7px;
      left: 50%;
      translate: -50%;
      padding: 0 8px;
      background: var(--ob-white);
      font-size: 15px;
      line-height: 15px;
      color: var(--ob-gray);
    }

    & > div {
      flex: 1 1 200px;

      &:has([name="google"]) { order: -1; }
    }

    & .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 48px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: var(--ob-ink);
      font-size: var(--ob-fs-body);
      font-weight: 700;
      line-height: 1;
      color: var(--ob-white);
      box-shadow: none;

      &:hover,
      &:focus {
        background: var(--ob-gray);
        color: var(--ob-white);
      }
    }
  }
}
/*!SECTION */

/*SECTION - CRM 頁面（#45687：civicrmtheme public_theme 改 openbook 後，/civicrm/* 前台頁與全站共用 header／footer／token。
  無設計稿（fig 四個 canvas 皆無捐款／活動／電子報稿），PM 描述＝「容器寬度比照內容頁（特殊募款頁除外）、字體與按鈕色比照主視覺、
  表單欄位／label／錯誤／焦點／hover 比照全站」→ 沿用 #47618 登入頁的表單元件規格（label 16 粗＋星號 primary、輸入框 48 高 1.5 ink 框角 4、
  送出鈕 48 高 primary 白粗字直角）；容器＝內容頁 842、表單＝登入頁 590 置中；區段標題＝serif 26 粗（fieldset legend／wizard-title／event 大區段）。
  DOM（netiCRM civicrm.css「material」版 .crm-container-md）：欄位＝.crm-section > .label + .content > .crm-form-elem > input；
  電子報訂閱＝table.form-layout-compressed（td label／td input）；radio／checkbox＝label.crm-form-radio > input(opacity 0) + span.elem-label（::after 畫框、::before 畫勾）；
  提示條＝div.messages.status／#help／.messages.help（::before 為 Material icon 字型）；報名步驟＝ol.wizard-bar > li（counter 圓）。
  civicrm.css 對輸入框用 !important（border none／border-bottom 2px／background none／radius 0）→ 同屬性必帶 !important，靠 body 前綴拉高特異度壓過 (0,4,1)。
  特殊募款頁（body.civicrm-contribute-sp，id 2／6）版面由 contribution_page.d9.js 生成、只換色：contribution_page.css 的
  --color-crm-special-contribute-primary／-info-link 在 :root 讀 --neticrm-* 變數（theme 設定 openbook.settings theme_color_* 以 inline :root 注入 #3f51b5），
  在 body 層覆寫 --color-* 即可（後台「版型配色」設定因此不再生效）。
  資源 URL（CRM 後台 civicrm/admin/setting/url）9/18 由客戶自 D7 的 sites/all/modules/civicrm/ 改 modules/civicrm/，否則 contribution_page.*／markerclusterer 404 */

/*ANCHOR - 特殊募款頁換色 */
body.civicrm-contribute-sp {
  --color-crm-special-contribute-primary: var(--ob-primary);
  --color-crm-special-contribute-info-link: var(--ob-primary-light);

  /* contribution_page.d9.js 把 #block-page-title 搬進左欄 #intro_text（480 寬、半透黑底）→ 收掉 .full-width 的 100vw 出血、漸層與底線，
     標題照 contribution_page.css 的 #intro_text h1 規格（36 白粗）靠左折行 */
  & #intro_text #block-page-title {
    position: static;
    inset: auto;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;

    & .container {
      max-width: none;
      padding: 0;
    }

    & h1 {
      font-size: clamp(28px, 0.6vw + 25.7px, 36px);
      line-height: var(--ob-lh-snug);
      text-align: left;
      color: var(--ob-white);
    }

    &::after { display: none; }
  }
}

/*ANCHOR - 全 CRM 頁共通 */
body.path-civicrm .crm-container {
  font-family: var(--ob-font-sans);
  color: var(--ob-ink);

  & a:not(.button) {   /* a.button 的白字交還 netiCRM（特殊募款頁步驟鈕，#45687） */
    color: var(--ob-primary);
    text-decoration: none;

    &:hover,
    &:focus { color: var(--ob-primary-light); text-decoration: underline; }
  }

  /* civicrm.css :focus-visible 藍框 #3F51B5 !important */
  & input:focus-visible,
  & select:focus-visible,
  & textarea:focus-visible {
    outline: 2px solid var(--ob-primary) !important;
    box-shadow: none !important;
  }

  & #printer-friendly { display: none; }   /* 列印 icon 全站不留（客戶 9/18） */
}

/*ANCHOR - 版面（特殊募款頁除外） */
body.path-civicrm:not(.civicrm-contribute-sp) {

  & .block-system-main-block {
    max-width: 1260px;   /* 區塊本體不跟 .container 撐到 1576（客戶 9/18）；內容另有 842／590 上限 */
    margin: clamp(40px, 1.16vw + 35.5px, 60px) auto clamp(60px, 4.17vw + 28px, 100px);   /* 上距同登入頁 */

    & .block-inner,
    & .block-content { margin: 0; }
  }

  & .crm-container {
    max-width: clamp(345px, 37.23vw + 198.7px, 842px);   /* ＝內容頁 .node__content */
    margin-inline: auto;
    font-size: var(--ob-fs-body);
    line-height: var(--ob-lh-base);

    & > form {
      max-width: 590px;   /* ＝登入頁表單寬 */
      margin-inline: auto;
    }
  }

  /*ANCHOR - 提示條（status／warning／error／help）
    #help 另寫一條不併進選擇器清單：civicrm.css 用 id 給它底色／白字，要 id 級特異度才壓得過；
    但併進同一個巢狀區塊會讓底下所有 & 規則都被 :is() 拉成 id 級，error／warning 變體就蓋不掉 */
  & .crm-container :is(div.messages, div.status, .help) {
    margin: 0 0 32px;
    padding: 16px 20px 16px 56px !important;
    border-left: 4px solid var(--ob-primary);
    border-radius: 0;
    background: var(--ob-bg-alt);
    font-size: var(--ob-fs-body);
    line-height: var(--ob-lh-base);
    color: var(--ob-ink);

    &::before {
      margin: 12px 0 0 18px;
      font-size: 24px;
      color: var(--ob-primary);
    }

    & a { color: var(--ob-primary); }

    & p { margin: 0; }
    & ul { margin: 4px 0 0; padding-left: 1.2em; }
  }

  & .crm-container #help {
    margin: 0 0 32px;
    padding: 16px 20px 16px 56px !important;
    border-left: 4px solid var(--ob-primary);
    border-radius: 0;
    background: var(--ob-bg-alt);
    font-size: var(--ob-fs-body);
    line-height: var(--ob-lh-base);
    color: var(--ob-ink);

    &::before {
      margin: 12px 0 0 18px;
      font-size: 24px;
      color: var(--ob-primary);
    }

    & a { color: var(--ob-primary); }
    & p { margin: 0; }
  }

  & .crm-container div.messages:is(.error, .crm-error) {   /* 前端驗證＝.error；伺服端「請更正以下錯誤」＝.crm-error */
    border-left-color: var(--ob-error);
    background: #FDECEA;
    color: var(--ob-error);

    &::before,
    & .icon { color: var(--ob-error); }   /* 伺服端錯誤框另帶 div.icon.zmdi-alert-circle */
  }

  & .crm-container div.messages.warning {
    border-left-color: var(--ob-accent-yellow);

    &::before { color: var(--ob-accent-yellow); }
  }

  /*ANCHOR - 區段標題（legend／wizard-title／event 大區段） */
  & .crm-container :is(fieldset legend, h2.wizard-title, .crm-section-big .label) {
    display: block;
    width: auto;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    font-family: var(--ob-font-serif);
    font-size: var(--ob-fs-title);
    font-weight: 700;
    letter-spacing: var(--ob-ls-wide);
    line-height: var(--ob-lh-snug);
    color: var(--ob-ink);

    & label { font-size: inherit; font-weight: inherit; }
  }

  & .crm-container fieldset {
    margin: 40px 0 0;
    padding: 0;
    border: 0;
  }

  & .crm-container h2.wizard-title { margin-top: 40px; }

  /*ANCHOR - 報名步驟列 */
  & .crm-container .wizard-bar {
    display: flex;
    justify-content: center;
    margin: 0 0 8px;

    & > li {
      width: auto;
      min-width: 120px;
      margin: 0;
      font-size: var(--ob-fs-small);

      & > * {
        padding-top: 36px;
        color: var(--ob-ink);

        &::before {
          width: 28px;
          height: 28px;
          line-height: 28px;
          background: var(--ob-gray-light);
          color: var(--ob-ink);
        }

        &::after {
          top: 12px;
          height: 2px;
          background: var(--ob-border);
        }
      }

      &:is(.current-step, .past-step) > *::before {
        background: var(--ob-primary);
        color: var(--ob-white);
      }

      &.past-step > *::after { background: var(--ob-primary); }
      &:last-child > *::after { display: none; }
    }
  }

  /*ANCHOR - 表單欄位：label 上、欄位下（civicrm.css .label 浮動 28%／.content 左推 30%） */
  & .crm-container form .crm-section {
    margin: 0 0 22px;

    & .label,
    & .content {
      float: none;
      width: auto;
      margin: 0;
      text-align: left;
    }

    & .label > label {
      display: block;
      margin: 0 0 8px;
      font-size: var(--ob-fs-body);
      font-weight: 700;
      line-height: 1;
    }
  }

  /* 電子報訂閱：table 排版 → 逐列堆疊（活動費用表 .fee_block-table 除外） */
  & .crm-container form table.form-layout-compressed:not(.fee_block-table) {
    display: block;
    width: 100%;
    margin: 0;

    & :is(tbody, tr, td) {
      display: block;
      padding: 0;
      border: 0;
    }

    & tr { margin: 0 0 22px; }

    & > tbody > tr > td:first-child > label {
      display: block;
      margin: 0 0 8px;
      font-weight: 700;
      line-height: 1;
    }
  }

  & .crm-container form .crm-section table.form-layout-compressed tr { margin: 0 0 8px; }   /* 收據選項 radio 群 */

  & .crm-container .crm-marker { color: var(--ob-primary); }

  & .crm-container .crm-form-elem {
    display: block;
    width: auto;
  }

  /* 輸入框：civicrm.css 全帶 !important，同屬性同標記 */
  & .crm-container .crm-form-elem :is(input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="tel"], input.form-text, select, textarea),
  & .crm-container .crm-form-elem.dateplugin input[readonly] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;   /* netiCRM JS 對 .medium 寫 inline max-width 280 */
    height: 48px;
    margin: 0;
    padding: 0 16px !important;
    border: 1.5px solid var(--ob-ink) !important;
    border-radius: 4px !important;
    background: transparent !important;
    font-size: var(--ob-fs-body);
    line-height: normal;
    color: var(--ob-ink);
    box-shadow: none !important;

    &::placeholder { color: var(--ob-gray-mid); }

    &:hover { border-color: var(--ob-ink) !important; }

    &:focus,
    &:focus-visible {
      outline: 0 !important;
      border-color: var(--ob-primary) !important;
      box-shadow: none !important;
    }

    &.error,
    &.error:focus { border-color: var(--ob-error) !important; }
  }

  & .crm-container .crm-form-elem textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 16px !important;
    line-height: var(--ob-lh-base);
  }

  & .crm-container .crm-form-elem select {
    padding-right: 44px !important;
    background: transparent url(images/icon-arrow-down.svg) no-repeat right 8px center / 28px !important;   /* BS 5.0.2 箭頭被 civicrm.css background:none 蓋掉 → 用既有 Figma icon */
  }

  /* dateplugin：日曆 icon 是 .dateplugin::after（Material 字型，絕對定位）→ 收進框內；「(重填)」是 .content 內後接的 span.crm-clear-link */
  & .crm-container .crm-form-elem.dateplugin {
    position: relative;

    & input { padding-right: 44px !important; }

    &::after {
      top: 50%;
      right: 16px;
      translate: 0 -50%;
      font-size: 20px;
      color: var(--ob-gray-mid);
      pointer-events: none;
    }
  }

  & .crm-container .crm-clear-link {
    display: inline-block;
    margin-top: 8px;
    font-size: var(--ob-fs-small);
  }

  & .crm-container .content > a,
  & .crm-container .crm-form-elem + a { font-size: var(--ob-fs-small); }

  /* radio／checkbox：自畫（civicrm.css 只在 .crm-container-md 隱藏原生框、用 .elem-label ::after 框／::before 勾；電子報訂閱頁沒有 -md → 這裡自備完整規則） */
  & .crm-container :is(.crm-form-radio, .crm-form-checkbox) {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    margin: 0 24px 8px 0;
    padding-left: 18px;
    font-size: var(--ob-fs-body);
    line-height: 1.4;
    color: var(--ob-ink);

    & :is(.form-radio, .form-checkbox) {
      position: absolute;
      z-index: 1;
      opacity: 0;
      cursor: pointer;
    }

    & .elem-label {
      position: relative;
      display: inline-block;
      padding-left: 10px;
      color: var(--ob-ink);
      cursor: pointer;

      &::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 0;
        width: 18px;
        height: 18px;
        margin-left: -18px;
        border: 1.5px solid var(--ob-ink);
        border-radius: 2px;
        background: var(--ob-white);
        box-sizing: border-box;
        transform: none;
      }

      &::before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 6px;
        left: 0;
        width: 8px;
        height: 4px;
        margin-left: -13px;
        border: 2px solid var(--ob-white);
        border-top: 0;
        border-right: 0;
        background: transparent;
        box-sizing: content-box;
        transform: rotate(-45deg);
        opacity: 0;
      }
    }

    & :is(.form-radio, .form-checkbox):checked + .elem-label {
      color: var(--ob-ink);

      &::after {
        border-color: var(--ob-primary);
        background: var(--ob-primary);
      }

      &::before { opacity: 1; }
    }
  }

  & .crm-container .crm-form-radio .elem-label {
    &::after { border-radius: 50%; }

    /* 圓點取代勾 */
    &::before {
      top: 7px;
      width: 8px;
      height: 8px;
      margin-left: -13px;
      border: 0;
      border-radius: 50%;
      background: var(--ob-white);
      transform: none;
    }
  }

  /* 定期／單次：radio 間以 <br> 分行 → 改一列一項 */
  & .crm-container .is_recur-section .content > .crm-form-radio { display: flex; }
  & .crm-container form :is(.crm-form-radio, .crm-form-checkbox) + br { display: none; }

  & .crm-container .description {
    display: block;
    margin: 6px 0 0;
    font-size: var(--ob-fs-small);
    line-height: var(--ob-lh-base);
    color: var(--ob-gray-mid);
  }

  & .crm-container :is(.crm-inline-error, span.crm-error, label.crm-error, label.error) {
    display: block;
    margin: 6px 0 0;
    padding: 0;
    font-weight: 400;
    font-size: var(--ob-fs-small);
    color: var(--ob-error);
  }

  /* 定期捐款子選項（期數）：<label>期數</label>: <div.crm-form-elem>（冒號是裸文字） */
  & .crm-container .recur-element {
    margin: 8px 0 0 28px;
    font-weight: 700;
    line-height: 1;

    & > label { color: var(--ob-ink); font-size: var(--ob-fs-body); }
    & .crm-form-elem { margin-top: 8px; font-weight: 400; }
  }

  /* 收據寄送地址：縣市／鄉鎮／郵遞區號三欄一列 */
  & .crm-container div[class*="state_province-"] .content {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    & > .crm-form-elem {
      flex: 1 1 160px;
      margin: 0;
    }
  }

  /* 唯讀欄（郵遞區號）的鎖頭 icon 同日曆 icon 收進框內 */
  & .crm-container .crm-form-readonly {
    display: block;
    position: relative;

    & input { padding-right: 44px !important; }

    &::after {
      top: 50%;
      right: 16px;
      translate: 0 -50%;
      font-size: 18px;
      color: var(--ob-gray-mid);
      pointer-events: none;
    }
  }

  & .crm-container .recaptcha-section { margin: 32px 0; }

  /*ANCHOR - 確認頁／感謝頁摘要（.crm-group > .header-dark 灰帶標 + .display-block table.form-layout／.crm-section.no-label／fieldset.label-left） */
  & .crm-container .crm-group {
    margin: 32px 0 0;

    & .header-dark {
      margin: 0 0 16px;
      padding: 10px 16px;
      border-radius: 0;
      background: var(--ob-bg-alt);
      font-size: var(--ob-fs-body);
      font-weight: 700;
      line-height: var(--ob-lh-base);
      color: var(--ob-ink);
    }

    & .display-block { padding: 0 16px; }

    & table.form-layout {
      width: 100%;
      margin: 0;

      & td {
        padding: 4px 8px 4px 0;
        border: 0;
        vertical-align: top;
        font-size: var(--ob-fs-body);
        line-height: var(--ob-lh-base);
      }

      & td.label { width: auto; white-space: nowrap; font-weight: 700; }
    }

    & .crm-section.no-label { padding: 0 16px; }

    & fieldset { margin-top: 16px; padding: 0 16px; }
  }

  /*ANCHOR - 登入者的報名入口鈕（#register-who：a#register-me 替自己註冊 ＋ a.button 替其他人註冊） */
  & .crm-container #register-who {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 32px;

    & a.button {
      display: inline-flex;
      flex: 1 1 200px;
      align-items: center;
      justify-content: center;
      height: 48px;
      margin: 0;
      padding: 0 24px;
      border: 1.5px solid var(--ob-primary);
      border-radius: 0;
      background: transparent;
      font-size: var(--ob-fs-body);
      font-weight: 700;
      line-height: 1;
      color: var(--ob-ink);
      text-decoration: none;
      box-shadow: none;

      &:hover,
      &:focus {
        background: var(--ob-primary);
        color: var(--ob-white);
      }

      & .zmdi { margin-right: 8px; color: inherit; }   /* civicrm.css 給 a.button 內 icon 白色 → 外框鈕上會隱形 */
    }

    & a#register-me {
      background: var(--ob-primary);
      color: var(--ob-white);

      &:hover,
      &:focus { background: var(--ob-primary-light); }
    }
  }

  /*ANCHOR - 送出鈕列 */
  & .crm-container .crm-submit-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 40px 0 0;
    text-align: left;

    /* 每顆鈕外包 span.crm-button */
    & > .crm-button {
      display: flex;
      flex: 1 1 200px;

      &:has(.default, [name*="_next"], [name*="_upload"]) { order: 1; }
    }

    & .form-submit {
      width: 100%;
      height: 48px;
      margin: 0;
      padding: 0 24px;
      border: 1.5px solid var(--ob-primary);
      border-radius: 0;
      background: transparent;
      font-size: var(--ob-fs-body);
      font-weight: 700;
      line-height: 1;
      color: var(--ob-ink);
      box-shadow: none;

      &:hover,
      &:focus {
        background: var(--ob-primary);
        color: var(--ob-white);
      }

      &.default,
      &[name*="_next"],
      &[name*="_upload"] {
        background: var(--ob-primary);
        color: var(--ob-white);

        &:hover,
        &:focus { background: var(--ob-primary-light); }
      }
    }
  }

  /*ANCHOR - 活動資訊頁 */
  & .crm-container .crm-event-info-form-block {

    /* 頂部 日期／報名日期／地點：兩欄 */
    & .event-info-content > :is(.event_date_time-section, .registration_date_time-section, .event_address-section):not(.crm-section-big) {
      display: flex;
      gap: 16px;
      margin: 0 0 12px;

      & .label {
        flex: 0 0 clamp(88px, 6.48vw + 38.2px, 116px);
        float: none;
        width: auto;
        text-align: left;
        font-weight: 700;
      }

      & .content { margin: 0; }
      & .clear { display: none; }
    }

    & .register_link-section {
      margin: 32px 0 0;
      padding: 0;
      border: 0;

      &.register_link-top {
        margin: 24px 0 40px;
        padding: 0 0 32px;
        border-bottom: 1px solid var(--ob-border);
      }
    }

    & a.crm-register-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 200px;
      height: 48px;
      margin: 0;
      padding: 0 40px;
      border-radius: 0;
      background: var(--ob-primary);
      font-size: var(--ob-fs-body);
      font-weight: 700;
      line-height: 1;
      color: var(--ob-white);
      text-decoration: none;
      box-shadow: none;

      &:hover,
      &:focus {
        background: var(--ob-primary-light);
        color: var(--ob-white);
      }
    }

    /* 活動說明（CRM CKEditor 內容，無 .text-formatted）：比照 editor.css 內文 */
    & .event_description-section {
      margin: 40px 0;

      & :is(p, li) {
        font-size: var(--ob-fs-body);
        line-height: 1.7;
      }

      & p { margin: 0 0 1em; }
      & img { max-width: 100%; height: auto; }
      & figure { margin: 24px 0; }
      & figcaption { margin-top: 8px; font-size: var(--ob-fs-xs); color: var(--ob-gray-text); }
      & hr { margin: 32px 0; border: 0; border-top: 1px solid var(--ob-border); }
    }

    /* 大區段（活動費用／地點／地圖／聯絡資訊）：置中標題＋底線 */
    & .crm-section-big {
      margin: 40px 0 0;

      & .label {
        padding: 0 0 16px;
        border-bottom: 1px solid var(--ob-border);
        text-align: center;
      }

      & .content {
        width: auto;
        max-width: 100%;
        padding: 24px 0 0;
        text-align: center;
      }
    }

    & .fee_block-table {
      width: 100%;
      max-width: 590px;
      margin: 0 auto;

      & td {
        padding: 12px 0;
        border-bottom: 1px solid var(--ob-border);
        text-align: left;
      }

      & .fee_amount-value {
        text-align: right;
        font-weight: 700;
        white-space: nowrap;
      }
    }

    & .event-map { min-height: 360px; }   /* Google 地圖 embed iframe；dev 目前 invalid-key-map-error 一片空白＝CRM 的 Maps API key 問題，非版型 */
  }
}
/*!SECTION */

/*SECTION - 搜尋結果頁（google_cse，/search/result）
  搜尋表單沿用登入頁表單元件規格：label 16 粗、框 48 高 1.5 線角 4、primary 鈕直角、連結 primary 底線 */

/*ANCHOR - 內容寬度 */
body.path-search .block-system-main-block > .block-inner > .block-content {
  max-width: clamp(345px, 37.23vw + 198.7px, 842px);
  margin-top: clamp(40px, 4.63vw + 4.44px, 60px);   /* 與頁標底線拉開 */
  margin-inline: auto;
}

/*ANCHOR - 搜尋表單 */
body.path-search #search-form {
  font-family: var(--ob-font-sans);
  color: var(--ob-ink);

  /* 兩層都帶 Bootstrap .mb-3（!important）：form-item 的會把按鈕往下推 16 */
  & .container-inline {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 0 !important;
  }

  & .form-item {
    flex: 1;
    margin: 0 !important;

    & > label {
      display: block;
      margin: 0 0 8px;
      font-size: var(--ob-fs-body);
      font-weight: 700;
      line-height: 1;
    }
  }

  & .form-control {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1.5px solid var(--ob-ink);
    border-radius: 4px;
    background: transparent;
    font-size: var(--ob-fs-body);
    color: var(--ob-ink);
    box-shadow: none;

    &:focus {
      outline: none;
      border-color: var(--ob-primary);
      box-shadow: none;
    }
  }

  & .btn {
    height: 48px;
    padding: 0 32px;
    border: 0;
    border-radius: 0;
    background: var(--ob-primary);
    font-size: var(--ob-fs-body);
    font-weight: 700;
    line-height: 1;
    color: var(--ob-white);
    box-shadow: none;

    &:hover,
    &:focus {
      background: var(--ob-primary-light);
      color: var(--ob-white);
    }
  }

  & .search-help-link {
    display: inline-block;
    margin: 12px 0 0;
    font-size: var(--ob-fs-small);
    color: var(--ob-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
/*!SECTION */