:root {
      --paper: #f4efdf;
      --paper-2: #fbf8ef;
      --ink: #211f1b;
      --muted: #6f685d;
      --teal: #165a58;
      --teal-dark: #0f4543;
      --burgundy: #7e231f;
      --gold: #b28a47;
      --line: rgba(33,31,27,.18);
      --shadow: 0 14px 40px rgba(51, 42, 27, .10);
      --radius: 18px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at top left, rgba(178,138,71,.08), transparent 34%),
        linear-gradient(180deg, var(--paper-2), var(--paper));
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang HK",
                   "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
      line-height: 1.6;
    }

    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }

    .wrap {
      width: min(calc(100% - 32px), var(--max));
      margin: 0 auto;
    }

    .topline {
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .topline .wrap {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 9px 0;
    }

    .masthead {
      text-align: center;
      padding: 16px 0 13px;
    }
    .brand-logo {
      width: min(800px, 88vw);
      aspect-ratio: 4 / 1;
      overflow: hidden;
      margin: 0 auto 8px;
      filter: drop-shadow(0 6px 12px rgba(68, 32, 17, .10));
    }
    .brand-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .brand-kicker {
      font-family: Georgia, "Times New Roman", serif;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-size: 12px;
      color: var(--teal-dark);
      margin: 0;
    }
    .brand-sub {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .nav-shell {
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: blur(12px);
      background: rgba(244,239,223,.90);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .nav {
      display: flex;
      align-items: center;
      min-height: 54px;
      gap: 22px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav a {
      flex: 0 0 auto;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .03em;
      padding: 16px 0;
    }
    .nav a:hover { color: var(--burgundy); }
    .nav .spacer { flex: 1; }
    .search-btn {
      border: 0;
      background: transparent;
      cursor: pointer;
      font-size: 18px;
      padding: 10px 0 10px 10px;
    }

    main { padding-bottom: 70px; }

    .edition {
      margin-top: 30px;
      border-top: 3px double var(--ink);
      border-bottom: 1px solid var(--ink);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 12px;
      padding: 8px 0;
      text-transform: uppercase;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 11px;
      letter-spacing: .10em;
    }
    .edition div:nth-child(2) { font-weight: 700; }
    .edition div:last-child { text-align: right; }

    .lead {
      display: grid;
      grid-template-columns: 1.35fr .95fr;
      gap: 38px;
      padding: 36px 0 44px;
      border-bottom: 1px solid var(--line);
      align-items: stretch;
    }
    .lead-media {
      min-height: 430px;
      border-radius: var(--radius);
      overflow: hidden;
      background:
        linear-gradient(145deg, rgba(22,90,88,.15), rgba(126,35,31,.12)),
        #ddd4bd;
      box-shadow: var(--shadow);
      position: relative;
    }
    .lead-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      min-height: 430px;
    }
    .lead-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .eyebrow {
      color: var(--burgundy);
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: 12px;
      margin-bottom: 12px;
    }
    .lead h1 {
      font-family: Georgia, "Times New Roman", "Noto Serif TC", serif;
      font-size: clamp(36px, 5vw, 68px);
      line-height: 1.05;
      margin: 0 0 18px;
      letter-spacing: -.025em;
    }
    .lead-summary {
      color: var(--muted);
      font-size: 17px;
      margin: 0 0 24px;
    }
    .meta {
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .read-more {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      font-weight: 800;
      color: var(--teal-dark);
      border-bottom: 1px solid var(--teal-dark);
      padding-bottom: 3px;
    }

    section {
      padding: 50px 0;
      border-bottom: 1px solid var(--line);
    }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 24px;
    }
    .section-title {
      margin: 0;
      font-family: Georgia, "Times New Roman", "Noto Serif TC", serif;
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.1;
    }
    .section-kicker {
      margin: 0 0 6px;
      color: var(--teal-dark);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .section-link {
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .card {
      border-top: 1px solid var(--ink);
      padding-top: 12px;
    }
    .card-media {
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: #ddd4bd;
      margin-bottom: 15px;
    }
    .card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .35s ease;
    }
    .card:hover .card-media img { transform: scale(1.025); }
    .card-label {
      font-size: 11px;
      font-weight: 800;
      color: var(--burgundy);
      letter-spacing: .10em;
      text-transform: uppercase;
    }
    .card h3 {
      font-family: Georgia, "Times New Roman", "Noto Serif TC", serif;
      font-size: 23px;
      line-height: 1.2;
      margin: 8px 0 9px;
    }
    .card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .archive-shell {
      background: var(--teal-dark);
      color: #f7f0dc;
      margin: 50px 0 0;
      padding: 54px 0 46px;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
    }
    .archive-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .12;
      background:
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.18) 40px),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.12) 40px);
    }
    .archive-inner {
      position: relative;
      width: min(calc(100% - 48px), 1040px);
      margin: 0 auto;
    }
    .archive-title {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(34px, 5vw, 58px);
      margin: 0;
    }
    .archive-intro {
      max-width: 720px;
      color: rgba(247,240,220,.78);
      margin: 12px 0 30px;
    }
    .archive-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .archive-card {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.16);
      padding: 20px;
      min-height: 145px;
      transition: transform .2s ease, background .2s ease;
    }
    .archive-card:hover {
      transform: translateY(-3px);
      background: rgba(255,255,255,.11);
    }
    .archive-card strong {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 21px;
      display: block;
      margin-bottom: 6px;
    }
    .archive-card span {
      color: rgba(247,240,220,.70);
      font-size: 13px;
    }

    .anniversary {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 34px;
      align-items: center;
    }
    .anniversary-badge {
      border: 1px solid var(--gold);
      padding: 36px 28px;
      text-align: center;
      background: rgba(178,138,71,.06);
    }
    .anniversary-badge .years {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(46px, 8vw, 94px);
      line-height: 1;
      color: var(--burgundy);
    }
    .anniversary-badge small {
      display: block;
      letter-spacing: .18em;
      margin-top: 8px;
      text-transform: uppercase;
    }
    .anniversary h2 {
      font-family: Georgia, "Times New Roman", "Noto Serif TC", serif;
      font-size: clamp(32px, 4vw, 52px);
      line-height: 1.08;
      margin: 0 0 12px;
    }
    .anniversary p { color: var(--muted); }

    .about {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }
    .about p { color: var(--muted); }
    .quote {
      font-family: Georgia, "Times New Roman", "Noto Serif TC", serif;
      font-size: clamp(26px, 3vw, 40px);
      line-height: 1.25;
      margin: 0;
      color: var(--teal-dark);
    }

    footer {
      border-top: 3px double var(--ink);
      padding: 28px 0 46px;
      color: var(--muted);
      font-size: 13px;
    }
    .footer-grid {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
    .footer-brand {
      color: var(--ink);
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 700;
      letter-spacing: .06em;
    }

    .search-panel {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      place-items: start center;
      padding: 12vh 18px 20px;
      background: rgba(18,17,15,.68);
      backdrop-filter: blur(10px);
    }
    .search-panel.open { display: grid; }
    .search-box {
      width: min(720px, 100%);
      background: var(--paper-2);
      border-radius: 20px;
      padding: 18px;
      box-shadow: 0 30px 80px rgba(0,0,0,.28);
    }
    .search-box input {
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      font-size: 24px;
      padding: 10px 4px 15px;
      border-bottom: 1px solid var(--line);
    }
    .search-results {
      max-height: 54vh;
      overflow: auto;
      padding-top: 10px;
    }
    .search-item {
      display: block;
      padding: 12px 4px;
      border-bottom: 1px solid var(--line);
    }

    .skeleton {
      background: linear-gradient(90deg, #ddd3bc 25%, #eee6d3 37%, #ddd3bc 63%);
      background-size: 400% 100%;
      animation: shimmer 1.4s infinite;
    }
    @keyframes shimmer {
      0% { background-position: 100% 0; }
      100% { background-position: 0 0; }
    }

    @media (max-width: 900px) {
      .lead {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .lead-media, .lead-media img { min-height: 360px; }
      .news-grid { grid-template-columns: repeat(2, 1fr); }
      .archive-grid { grid-template-columns: repeat(2, 1fr); }
      .anniversary, .about { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .wrap { width: min(calc(100% - 22px), var(--max)); }
      .topline .wrap {
        font-size: 10px;
        padding: 7px 0;
      }
      .topline .hide-sm { display: none; }
      .masthead { padding: 11px 0 9px; }
      .brand-logo { width: min(330px, 88vw); }
      .brand-sub { font-size: 12px; }
      .nav { min-height: 48px; gap: 18px; }
      .nav a { font-size: 13px; padding: 13px 0; }
      .edition {
        grid-template-columns: 1fr;
        gap: 3px;
        text-align: center;
      }
      .edition div:last-child { text-align: center; }
      .lead { padding-top: 24px; }
      .lead-media, .lead-media img { min-height: 250px; }
      .lead h1 { font-size: 40px; }
      section { padding: 38px 0; }
      .section-head { align-items: start; }
      .news-grid { grid-template-columns: 1fr; }
      .archive-shell {
        margin-top: 36px;
        border-radius: 0;
      }
      .archive-inner {
        width: min(calc(100% - 26px), 1040px);
      }
      .archive-grid { grid-template-columns: 1fr 1fr; }
      .archive-card { min-height: 125px; padding: 16px; }
      .about { gap: 20px; }
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --paper: #161714;
        --paper-2: #1b1c18;
        --ink: #f1ead8;
        --muted: #b6ae9d;
        --line: rgba(241,234,216,.16);
        --teal-dark: #7fc4bf;
      }
      body {
        background: linear-gradient(180deg, #181915, #11120f);
      }
      .nav-shell { background: rgba(20,21,18,.88); }
      .card-media { background: #2a2a24; }
      .anniversary-badge { background: rgba(178,138,71,.08); }
      .search-box { background: #20211d; }
    }
  
/* Joomla integration, scoped content and keyboard access. */
.brand-logo{width:min(560px,88vw)}
.brand-logo a{display:block;height:100%}
.skip-link{position:absolute;top:-100px;left:16px;z-index:9999;padding:12px;background:white;color:#123}
.skip-link:focus{top:8px}
:focus-visible{outline:3px solid #a56a15;outline-offset:4px}
.joomla-content{padding:32px 0;overflow-wrap:anywhere}
.joomla-content a{text-decoration:underline;color:var(--teal-dark)}
.joomla-content img{display:inline;max-width:100%;height:auto;vertical-align:middle}
.joomla-content .com-content-article__body{line-height:1.6}
.joomla-content .com-content-article__body p{margin:0 0 1.6em}
.joomla-content .com-content-article__body p.w912-empty-paragraph{display:none}
.joomla-content .com-content-article__body p.w912-contact-line{margin-bottom:.4em}
.joomla-content table{display:block;max-width:100%;overflow-x:auto}
.joomla-content iframe,.joomla-content video{max-width:100%}
.joomla-content section{padding:12px 0}
.joomla-content .article-info{display:none}
.phase5-modules{padding:12px 0}
.phase5-modules ul.mod-menu{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:12px 24px;list-style:none;flex-wrap:wrap;padding:0;margin:0 0 16px;min-height:0;overflow:visible}
.phase5-modules .mod-menu>.nav-item{flex:0 1 auto;width:auto;margin:0;padding:0}
.phase5-modules .mod-menu>.nav-item.parent{display:contents}
.phase5-modules .mod-menu a{display:inline-block;padding:6px 0;font-size:15px;white-space:normal}
.phase5-modules .mod-menu .mod-menu__toggle-sub{display:none}
.phase5-modules .mod-menu .mod-menu__sub{display:contents;list-style:none;margin:0;padding:0;border:0}
.phase5-modules .mod-menu .mod-menu__sub>.nav-item{order:1;margin:0;padding:0}
.phase5-modules .mod-menu .mod-menu__sub a{font-size:15px;font-weight:700}
.phase5-modules .mod-menu a[aria-current="page"]{text-decoration-thickness:2px;text-underline-offset:5px}
.feed-error{padding:20px;border:1px solid var(--line)}
.search-box label{display:block;font-weight:700;margin:8px 0}
.search-box button{padding:10px 16px;border:1px solid var(--teal);background:var(--teal);color:white}
.search-box form{display:flex;gap:8px;flex-wrap:wrap}
.search-box form input{flex:1;min-width:160px}
@media(max-width:600px){.brand-logo{width:min(330px,88vw)}.nav{flex-wrap:wrap}.nav a{font-size:14px}.joomla-content{padding-top:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.archive-filters{display:grid;grid-template-columns:2fr 1fr 2fr auto auto;gap:12px;align-items:end;background:var(--paper-2);padding:20px;border:1px solid var(--line)}
.archive-filters label{display:block;font-weight:600;margin-bottom:6px}
.archive-filters input,.archive-filters select{width:100%;min-width:0;height:46px;background:white;border:1px solid #8d897f;padding:8px;font:inherit;color:var(--ink)}
.archive-filters button,.archive-pagination button{min-height:46px;padding:8px 16px;background:var(--teal);border:1px solid var(--teal);color:white;font:inherit;cursor:pointer}
.archive-pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin:32px 0}
.archive-pagination button:disabled{opacity:.5;cursor:default}
.image-placeholder{height:100%;display:grid;place-items:center;font-family:Georgia,serif;color:#6f685d}
.search-panel[hidden]{display:none!important}
@media(max-width:800px){.archive-filters{grid-template-columns:1fr 1fr}.archive-filters>div:first-child{grid-column:1/-1}.archive-filters button{width:100%}}
@media(max-width:440px){.archive-filters{grid-template-columns:1fr}.archive-filters>div:first-child{grid-column:auto}.archive-pagination{gap:8px}}
@media(max-width:600px){.nav{gap:0 16px;justify-content:center;padding:4px 0}.nav a{padding:8px 0}.nav .spacer{display:none}.search-btn{padding:8px}.archive-page{scroll-margin-top:110px}}