/* ============================================================
   1:1 reproduction of the embedded stylesheet from
   http://www.hsmc.com.tw/index.asp
   (accent #6A89BD · Arial/Helvetica · table-based layout)
   ============================================================ */

/* NOTE: `body` must not get a definite height. It is a flex column, so a
   fixed 100% height makes the header/nav (the only shrinkable rows) absorb
   any overflow — on a post taller than the viewport the logo row got
   squeezed down to a couple of pixels. `min-height` keeps short pages
   filling the viewport so the footer still sits at the bottom. */
html { height: 100%; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
}

/* Header + nav keep their intrinsic height on every page. */
#table1, #table2, #table3 { flex-shrink: 0; }
#table4 { flex: 1 0 auto; }

.style1 {
    border: 1px solid #6A89BD;
    font-family: Arial, Helvetica, sans-serif;
    color: #6A89BD;
    text-align: center;
    vertical-align: middle;
    font-size: small;
}

.style2 {
    border-left: 0px solid #C0C0C0;
    border-right-style: solid;
    border-right-width: 0;
    border-top: 0px solid #C0C0C0;
    border-bottom-style: solid;
    border-bottom-width: 0;
    text-align: center;
    padding-left: 10px;
    padding-right: 0px;
    padding-top: 5px;
    padding-bottom: 0px;
}

.style3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    color: #6A89BD;
    text-align: left;
    font-weight: bold;
}

.style4 {
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}

.style6 {
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

/* ---- footer bar (pinned to bottom, copyright left + RSS icon right) ---- */
.footer-bar {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-top: 1px solid #6A89BD;
}
.footer-copyright {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
}
.footer-icons { display: flex; align-items: center; gap: 10px; }
.footer-icons a { display: inline-block; line-height: 0; }
.footer-icons svg path { transition: fill 0.15s; }
.footer-icons a:hover svg path { fill: #6A89BD; }

.style7 {
    border: 0px solid #6A89BD;
    margin: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #6A89BD;
    text-align: center;
}

/* NOTE: static assets are cached heuristically by browsers (only
   Last-Modified is sent), so anything referenced from here or from a layout
   carries a ?v=<date> cache-buster. Bump it when an asset changes, or users
   keep seeing the old file for hours. */

/* Banner slices, built from the artwork (blue arcs left, globe right) with the
   site's text drawn over them in logo01/logo03.svg.

   The left and right slices must not tile: at wide viewports the cells grow
   past the artwork's own width, and a repeat would start a second wordmark at
   the right edge.

   The middle slice is flat: both artwork halves end on the same blue, so it is
   just that colour and the three cells meet seamlessly at any width. */
.style26 {
    background-image: url('/img/logo01.svg?v=20261004c');
    background-repeat: no-repeat;
    background-color: #6283B8; /* = the artwork's seam colour */
}
.style27 {
    /* Just the seam colour: the left slice's right edge and the right slice's
       left edge are within 1/255 of each other, so the middle cell needs no
       image at all - it is the same flat blue. */
    background-color: #6283B8;
}
.style28 {
    background-image: url('/img/logo03.svg?v=20261004c');
    background-repeat: no-repeat;
    background-size: 100% 100%; /* scale to the cell rather than clip/tile */
    background-color: #6283B8;
}

/* Portal header. The label takes the place of the site tagline, so it uses the
   same artwork with no tagline baked in (logo03-portal.svg); the artwork's
   right side is dark enough for white text. */
.style28-portal {
    /* A soft scrim over the artwork's right edge keeps the white label legible
       where the globe's continents are at their brightest. */
    background-image: linear-gradient(to left, rgba(24, 54, 104, 0.62), rgba(24, 54, 104, 0) 46%),
                      url('/img/logo03-portal.svg?v=20261004c');
    background-repeat: no-repeat, no-repeat;
    background-position: right center, left center;
    background-size: 100% 100%, 100% 100%;
    background-color: #6283B8;
}

/* ---- wordmark is a link home -------------------------------------------
   The banner cells are background images, so the clickable area is an empty
   anchor sized to fill the cell. Keep this rule alongside the header markup
   (views/_header.html and views/_portal_header.html): without it the anchor
   collapses to nothing and the wordmark stops being clickable. */
.logo-home {
    display: block;
    width: 100%;
    height: 80px;
}
/* the global A:hover background would otherwise paint over the artwork */
.logo-home:hover, .logo-home:active { background-color: transparent; }

/* Portal label replaces the site tagline in the banner's right slice. */
.logo-title {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(14, 40, 82, 0.85); /* keeps it readable over the globe */
}

A:link    { text-decoration: none; color: #6A89BD; }
A:visited { text-decoration: none; color: #6A89BD; }
A:active  { text-decoration: none; }
A:hover   { text-decoration: none; color: white; background-color: #6A89BD; }

/* ---- content (rich-text editor output) helpers --------------
   Not part of the reference CSS; only used to lay out mock
   post/page body copy inside .style4. Text stays Arial black. */
.post-content p  { margin: 0 0 12px 0; }
.post-content h3 { font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: bold; margin: 12px 0 6px 0; }
.post-content ul { margin: 0 0 12px 20px; padding: 0; }
.post-content code { font-family: monospace; }

/* ---- post footer meta (below the box, bottom-right, soft grey) ---- */
.post-footer {
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #9AA6B8;
    padding-right: 10px;
    padding-bottom: 6px;
}

/* ---- edit button (top-right of a post, superuser only) ---- */
.post-shell { position: relative; }
.edit-btn {
    position: absolute;
    top: 0;
    right: 4px;
    z-index: 5;
    display: inline-block;
    line-height: 0;
    padding: 5px;
    border: 1px solid #6A89BD;
    background: #fff;
    text-decoration: none;
    border-radius: 3px;
}
.edit-btn:hover { background: #6A89BD; }
.edit-btn:hover svg path { fill: #fff; }

/* ---- post list row (invisible table: title left, date right) ---- */
.post-row td { border: none; padding: 1px 0; }
.post-date {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #9AA6B8;
    padding-right: 6px;
}

/* ---- deep links on content headings ---- */
.h-link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #9AA6B8;
    margin-left: 6px;
    text-decoration: none;
    opacity: 0.45;
}
h1:hover .h-link, h2:hover .h-link, h3:hover .h-link,
h4:hover .h-link, h5:hover .h-link, h6:hover .h-link,
.h-link:focus { opacity: 1; }
/* the global A:hover would paint a blue block behind the heading */
.h-link:hover { color: #6A89BD; background-color: transparent; }
/* keep a jumped-to heading clear of the top of the viewport */
.post-content h1, .post-content h2, .post-content h3,
.post-content h4, .post-content h5, .post-content h6 { scroll-margin-top: 10px; }

/* ---- latest-updates feed (front page) ---- */
.update-kind {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #9AA6B8;
}

/* ---- search results ---- */
.search-kind {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #9AA6B8;
}
.search-snippet {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    padding: 2px 0 6px 18px;
}
.search-snippet mark {
    background-color: #d7e0f0;
    color: #6A89BD;
    font-weight: bold;
}

/* ---- projects / travels grid ---- */
.projects-grid td { border: none; }
.project-desc {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
}

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-start;
    text-align: left;
}
.card {
    flex: 1 1 200px;
    max-width: 240px;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    border: 1px solid #6A89BD;
    background: #fff;
    text-decoration: none;
}
.card:hover { background: #f4f7fc; }
.card:hover .card-title { color: #45639B; }
.card-img {
    display: block;
    width: 100%;
    height: 140px;
    overflow: hidden;
    border-bottom: 1px solid #C0C0C0;
}
.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-body {
    display: flex;
    flex-direction: column;
    padding: 8px 10px 10px;
}
.card-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
    color: #6A89BD;
}
.card-year {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #9AA6B8;
    margin-top: 2px;
}

/* ---- project detail content ---- */
.project-content img { max-width: 100%; height: auto; }
.project-content h1, .project-content h2, .project-content h3, .project-content h4 { color: #6A89BD; }
.project-content p { margin: 0 0 12px 0; }
.project-content video { max-width: 100%; }

/* ---- hero + photo grid layout (project / travel detail pages) ---- */
.photo-layout .photo-hero {
    margin: 0 0 16px 0;
    text-align: center;
}
/* The hero is a lead image rather than a banner, so cap it at 600px — the
   figure's text-align keeps it centred. `min()` holds it inside the column on
   phones; the plain `max-width: 100%` above is the fallback if `min()` is
   unsupported. `border-box` counts the 1px border inside the cap so the hero
   is never a hair wider than the column. Never upscales, so a smaller hero
   keeps its own size. */
.photo-layout .photo-hero img {
    max-width: 100%;
    max-width: min(600px, 100%);
    box-sizing: border-box;
    height: auto;
    border: 1px solid #C0C0C0;
}
.photo-layout .photo-hero figcaption {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #333;
    margin-top: 6px;
}
/* A portrait hero is height-capped to the same 320px as the video tiles (twice
   a photo row) so a vertical cover shot can't tower over the page. Landscape
   heroes are unaffected and keep the 600px width cap above. */
.photo-layout .photo-hero.portrait img {
    max-height: 320px;
}

.photo-layout .photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin: 14px 0;
}
.photo-layout .photo-grid figure {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.photo-layout .photo-grid img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border: 1px solid #C0C0C0;
    background: #fafafa;
}
.photo-layout .photo-grid figcaption {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #555;
    margin-top: 5px;
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* Videos used to sit inline at up to 720px wide, so a portrait clip rendered
   720x1280 and ran the length of the page. They are now double-size grid tiles
   (two columns by two rows) with the media itself capped at twice a photo tile
   — 400px wide by 320px tall, against a photo tile of roughly 200x160. Aspect
   ratio is preserved by leaving width/height auto and constraining with
   max-*, so a portrait clip becomes ~180x320 instead of 720x1280. */
.photo-layout .photo-grid .video-tile {
    grid-column: span 2;
    grid-row: span 2;
    align-items: center;
    justify-content: center;
}
.photo-layout .photo-grid .video-tile video {
    display: block;
    width: auto;
    height: auto;
    max-width: min(400px, 100%);
    max-height: 320px;
    margin: 0 auto;
    background: #000;
}

/* With only one column there is no room for a two-wide tile — a span would
   generate an implicit second column and break the grid. */
@media (max-width: 560px) {
    .photo-layout .photo-grid .video-tile {
        grid-column: auto;
        grid-row: auto;
    }
}

/* ---- photo lightbox ("photobooth" viewer) ---------------------
   Clicking any <figure> photo in the page content opens a full-viewport
   view of that image with its caption, and lets you flip through the
   rest of the photos on the page. See pb_public/lightbox.js. */
#content figure { cursor: zoom-in; }
#content figure:hover img { border-color: #6A89BD; }

.lb {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 64px 92px;
    box-sizing: border-box;
    background: rgba(12, 18, 30, 0.94);
}
.lb[hidden] { display: none; }

.lb-stage {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
}
.lb-img {
    max-width: 100%;
    max-height: calc(100vh - 200px);
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: #000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.lb-caption {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: #fff;
    text-align: center;
    max-width: 900px;
    max-height: 4.4em;
    overflow: auto;
}
.lb-caption:empty { display: none; }

.lb-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
}
.lb-btn:hover { background: #6A89BD; border-color: #6A89BD; }
.lb-close { top: 12px; right: 12px; font-size: 22px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-single .lb-prev, .lb-single .lb-next { display: none; }

.lb-counter {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

/* Give the photo nearly the whole screen on phones. */
@media (max-width: 640px) {
    .lb { padding: 52px 8px 72px; }
    .lb-img { max-height: calc(100vh - 170px); }
    .lb-caption { font-size: 12px; }
    .lb-prev { left: 6px; }
    .lb-next { right: 6px; }
}

/* ---- content portal form controls ---- */
.portal-input {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    border: 1px solid #6A89BD;
    padding: 3px;
    background: #fff;
}
.portal-input:focus { outline: 1px solid #6A89BD; }

.portal-btn {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
    color: #6A89BD;
    background: #fff;
    border: 1px solid #6A89BD;
    padding: 4px 12px;
    cursor: pointer;
}
.portal-btn:hover { color: #fff; background: #6A89BD; }
/* The same button look when it is an action link (e.g. "New Opinion"). */
a.portal-btn { display: inline-block; text-decoration: none; }

.linkbtn {
    background: none;
    border: none;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #6A89BD;
    cursor: pointer;
    text-decoration: none;
}
.linkbtn:hover { color: #fff; background: #6A89BD; }

.portal-btn-link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    padding: 0 8px;
    vertical-align: middle;
}