/* ============================================================
   Chien-Ting Chen — ctjchen.github.io
   One stylesheet, no build step. Sections in source order:
     1. Fonts      6. News (currently hidden in index.html)
     2. Tokens     7. Mission work, service, publications
     3. Base       8. Contact + form
     4. Header     9. Footer
        + nav     10. Research page (research.html)
     5. About
   ============================================================ */

/* ---------- 1. Fonts -----------------------------------------
   Self-hosted variable webfonts — nothing is fetched from a CDN.
   Inter          — headings, names, navigation, buttons, captions
   Source Serif 4 — running prose
   Each subset carries a unicode-range, so a browser downloads only
   the files the page actually needs. Han characters (陳建廷) fall
   through to the reader's own system CJK face, by design.
   Both families are SIL Open Font License 1.1 — see fonts/OFL.txt.
   ------------------------------------------------------------ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/Inter-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./fonts/SourceSerif4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./fonts/SourceSerif4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./fonts/SourceSerif4-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

/* ---------- 2. Tokens ---------------------------------------- */

:root {
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-prose: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Section titles: 32px on a phone, 44px on a desktop. */
  --step-title: clamp(2rem, calc(1.5rem + 1.7vw), 2.75rem);
  --step-prose: 1.125rem;
  --step-ui: 0.97rem;

  --tracking-title: -0.026em;
  --tracking-ui: -0.012em;
  --leading-title: 1.12;
  --leading-prose: 1.7;

  --ink: #ffffff;
  --ground: #282c34;
  --accent: #66cdaa;
  --accent-bright: #66dddd;
  --card-bar: #1e90ff;
  --rule: rgba(255, 255, 255, 0.8);
}

/* ---------- 3. Base ------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--ground);
  color: var(--ink);
  font-family: var(--font-prose);
  font-size: var(--step-prose);
  line-height: var(--leading-prose);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
}

/* Form elements never inherit font-family — without this, every button
   and the whole contact form falls back to the browser default. */
button,
input,
textarea,
select {
  font-family: var(--font-ui);
  font-size: var(--step-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
}

/* Anchors land clear of the top of the viewport. */
section[id] {
  scroll-margin-top: 24px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
}

/* Shared section title. */
.section__title {
  font-family: var(--font-ui);
  font-weight: 640;
  font-size: var(--step-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Shared outline button (CV, More publications). */
.button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  text-decoration: none;
  color: var(--ink);
  border: solid var(--ink) 0.5px;
  border-radius: 10px;
  min-height: 50px;
  width: 200px;
  padding: 5px;
  cursor: pointer;
}
.button-outline:hover,
.button-outline:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- 4. Header + nav ---------------------------------- */

.header {
  padding: 30px 5%;
  background-image: url("./images/bg.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.header__text {
  font-family: var(--font-ui);
  font-size: 1.19rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-ui);
  text-wrap: balance;
  margin: 5px 0;
  padding: 0;
}

.header__button-box {
  margin-left: 10px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.header__button {
  padding-bottom: 10px;
  font-size: var(--step-ui);
  background-color: transparent;
  border: none;
  border-bottom: solid var(--ink) 1.5px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.header__button:hover,
.header__button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

@media screen and (max-width: 550px) {
  .header__button-box {
    margin-left: 0;
    width: 100%;
  }
  .header__button {
    font-size: 0.82rem;
  }
}

/* Floating nav — the button opens the panel, Esc or × closes it. */
.navButton {
  position: fixed;
  top: 150px;
  right: 3%;
  z-index: 2;
  color: var(--ink);
  background-color: rgba(40, 44, 52, 0.5);
  border: none;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
.navButton:hover,
.navButton:focus-visible {
  opacity: 0.8;
  outline: solid var(--accent) 1px;
}

.nav {
  position: fixed;
  top: 180px;
  right: 0;
  z-index: 1;
  background-image: url("./images/bg.jpg");
  background-size: cover;
  width: 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 10px 0 0 10px;
}
.nav[hidden] {
  display: none;
}

.nav__icon {
  background-color: rgba(40, 44, 52, 0.5);
  color: var(--ink);
  border: none;
  border-radius: 4px;
  position: absolute;
  top: -30px;
  right: 3px;
  cursor: pointer;
  padding: 4px 7px;
}
.nav__icon:hover,
.nav__icon:focus-visible {
  opacity: 0.8;
  outline: solid var(--accent) 1px;
}
@media screen and (max-width: 901px) {
  .nav__icon {
    top: 10px;
  }
}

.nav__button {
  margin: 0 auto;
  text-decoration: none;
  background-color: transparent;
  border: none;
  color: var(--ink);
  width: 80px;
  padding-bottom: 5px;
  text-align: center;
  cursor: pointer;
}
.nav__button:hover,
.nav__button:focus-visible {
  border-bottom: solid var(--accent) 1.5px;
  color: var(--accent);
}

/* ---------- 5. About ----------------------------------------- */

.about {
  width: 80%;
  padding-top: 70px;
  margin: 0 auto 30px;
  display: flex;
  flex-wrap: wrap;
}

.about__img-box {
  padding: 50px;
  margin-right: 50px;
  text-align: center;
}

.about__img {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.about__name {
  font-family: var(--font-ui);
  font-weight: 600;
  width: 200px;
  font-size: 1.19rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-align: center;
  margin: 8px 0 0;
}

.about__button-link {
  display: inline-block;
  margin-top: 16px;
  text-decoration: none;
}

.about__text-box {
  width: 100vw;
  max-width: 600px;
}

.about__text {
  font-family: var(--font-prose);
  font-weight: normal;
  font-size: var(--step-prose);
  line-height: var(--leading-prose);
  text-align: left;
}

.about__link,
.news__link {
  text-decoration: none;
  color: var(--accent);
}
.about__link:hover,
.news__link:hover {
  color: var(--accent-bright);
  text-decoration: underline dashed;
}

@media screen and (max-width: 1190px) {
  .about {
    width: 90%;
  }
}
@media screen and (max-width: 1056px) {
  .about__img-box {
    margin: 0 auto;
  }
  .about__text-box {
    margin: 0 auto;
  }
}

/* ---------- 6. News ------------------------------------------ */

.news {
  width: 80%;
  padding: 30px 0;
  margin: 0 auto;
}

.news__list-box {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news__list {
  padding: 20px;
  margin: 30px 0 0 0;
  border: solid 0.5px var(--rule);
  border-radius: 10px;
}

.news__list_flex {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: space-between;
}

.news__text {
  font-family: var(--font-prose);
  font-size: var(--step-prose);
  line-height: var(--leading-prose);
}

.news__date {
  font-family: var(--font-ui);
  font-size: var(--step-ui);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  opacity: 0.75;
  margin-bottom: 4px;
}

.news__img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

.news__text-box {
  flex: 1 1 300px;
  min-width: 0;
}

/* 16:9 video that scales with the column. */
.news__player {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin-top: 16px;
}
.news__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
}

/* ---------- 7. Mission work, service, publications ----------- */

.band {
  width: 80%;
  margin: 0 auto;
  padding: 30px 0;
}

.band__intro {
  font-family: var(--font-prose);
  font-weight: normal;
  font-size: var(--step-prose);
  line-height: var(--leading-prose);
  text-align: left;
  max-width: 70ch;
}

.band__actions {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

/* --- Mission work: one card per mission, role stated up front.
       Text-forward on the dark ground rather than the white image cards
       these replaced — the role is the point, not a figure. --- */

.roles {
  margin: 40px 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.role {
  border: solid 0.5px var(--rule);
  border-radius: 10px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.role__label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.role__mission {
  font-family: var(--font-ui);
  font-weight: 640;
  font-size: 1.32rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

.role__mission a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(102, 205, 170, 0.5);
}
.role__mission a:hover,
.role__mission a:focus-visible {
  color: var(--accent);
}

.role__text {
  font-family: var(--font-prose);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

/* --- Leadership and service: a compact term/description strip,
       deliberately quieter than the mission cards above it. --- */

.service {
  margin: 46px 0 0 0;
  border-top: solid 0.5px rgba(255, 255, 255, 0.25);
}

.service__row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 8px 28px;
  padding: 16px 0;
  border-bottom: solid 0.5px rgba(255, 255, 255, 0.15);
}

@media screen and (max-width: 700px) {
  .service__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.service__term {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  padding-top: 0.35em;
}

.service__desc {
  font-family: var(--font-prose);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

.service__desc a {
  color: var(--accent);
  text-decoration: none;
}
.service__desc a:hover,
.service__desc a:focus-visible {
  color: var(--accent-bright);
  text-decoration: underline dashed;
}

/* --- Publications: one line and a link, not a bibliography. --- */

.pubs {
  margin: 40px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}

.pubs__text {
  font-family: var(--font-prose);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
  flex: 1 1 420px;
  max-width: 70ch;
}

/* ---------- 8. Contact + form -------------------------------- */

.contact {
  width: 80%;
  margin: 0 auto;
  padding: 30px 0;
}

.contact__subtitle {
  font-family: var(--font-prose);
  font-weight: normal;
  font-size: var(--step-prose);
  line-height: var(--leading-prose);
  text-align: left;
}

.contact__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.contact__list-box {
  list-style: none;
  padding: 0;
}

.contact__list {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 25px;
}

/* Address, phone and email are data to be read off, not prose. */
.contact__list-text {
  font-family: var(--font-ui);
  font-size: var(--step-ui);
  line-height: 1.5;
  margin: 0;
}

.form {
  width: 90vw;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  margin: 30px 0;
}

.form label {
  font-family: var(--font-ui);
  font-size: var(--step-ui);
  font-weight: 500;
  margin-bottom: 6px;
}

.form__input,
.form__message {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--rule);
  padding: 8px 10px;
  margin-bottom: 20px;
  color: #111;
}

.form__input {
  height: 38px;
}

.form__message {
  height: 120px;
  resize: vertical;
}

.form__submit {
  width: 100%;
  padding: 12px;
  background-color: var(--card-bar);
  color: var(--ink);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.form__submit:hover,
.form__submit:focus-visible {
  background-color: #1573cc;
}

.form__status {
  font-family: var(--font-ui);
  font-size: var(--step-ui);
  line-height: 1.5;
}
.form__status[hidden] {
  display: none;
}

/* ---------- 9. Footer ---------------------------------------- */

.footer {
  background-image: url("./images/bg.jpg");
  background-size: cover;
  background-position: center;
  padding: 14px 5%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.footer__box {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  margin: 0;
}

.footer__icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-ui);
  font-size: var(--step-ui);
}
.footer__icon:hover,
.footer__icon:focus-visible {
  color: var(--accent);
}

.footer__icon .icon {
  font-size: 1.4rem;
}

/* The label rides alongside the icon and only shows on hover, but stays
   permanently visible to screen readers and on keyboard focus. */
.footer__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.2s ease, opacity 0.2s ease;
}
.footer__icon:hover .footer__label,
.footer__icon:focus-visible .footer__label {
  max-width: 10rem;
  opacity: 1;
}

.footer__copyright {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.footer__link {
  font-family: var(--font-ui);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
}
.footer__link:hover {
  color: var(--accent);
}

/* ---------- 10. Research page (research.html) -----------------
   A reading page, so the measure is held near 70 characters and the
   type is left to do the work.
   ------------------------------------------------------------ */

.page {
  width: 80%;
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 0 20px;
}

@media screen and (max-width: 1056px) {
  .page {
    width: 90%;
  }
}

.page__lede {
  font-family: var(--font-prose);
  font-size: 1.2rem;
  line-height: 1.65;
  margin: 20px 0 0;
  max-width: 68ch;
}

.back-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--step-ui);
  text-decoration: none;
  color: var(--accent);
  margin-bottom: 20px;
}
.back-link:hover,
.back-link:focus-visible {
  color: var(--accent-bright);
}

.theme {
  padding: 44px 0;
  border-bottom: solid 0.5px rgba(255, 255, 255, 0.15);
}

.theme__title {
  font-family: var(--font-ui);
  font-weight: 640;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0 0 14px;
}

.theme__body {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}

.theme__text {
  flex: 1 1 380px;
  min-width: 0;
}

.theme__text p {
  font-family: var(--font-prose);
  font-size: var(--step-prose);
  line-height: var(--leading-prose);
  margin: 0 0 14px;
  max-width: 68ch;
}

.theme__text a {
  color: var(--accent);
  text-decoration: none;
}
.theme__text a:hover,
.theme__text a:focus-visible {
  color: var(--accent-bright);
  text-decoration: underline dashed;
}

/* The figure is optional — some themes have no published figure yet,
   and the layout has to look deliberate either way. */
.theme__figure {
  flex: 0 1 260px;
  margin: 0;
}

.theme__figure img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* A wide figure takes a row of its own beneath the text instead of being
   squeezed into the side column. The light mat keeps a figure drawn on a
   white background from reading as a hole in the dark page. */
.theme__figure--wide {
  flex: 1 1 100%;
  max-width: 100%;
}

.theme__figure--wide img {
  background: #fff;
  padding: 10px;
  border-radius: 10px;
}

.theme__caption {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}

/* Publication list. */
.pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pub-list li {
  font-family: var(--font-prose);
  font-size: 1.02rem;
  line-height: 1.55;
  padding: 14px 0;
  border-bottom: solid 0.5px rgba(255, 255, 255, 0.12);
}

.pub-list .self {
  font-weight: 700;
}

.pub-list .venue {
  font-style: italic;
}

.pub-list a {
  color: var(--accent);
  text-decoration: none;
}
.pub-list a:hover {
  color: var(--accent-bright);
  text-decoration: underline dashed;
}

.page__note {
  font-family: var(--font-prose);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 24px 0 0;
  max-width: 70ch;
}

/* A quiet, clearly-marked note — legible, but not competing with the
   research it sits beneath. */
.disclaimer {
  margin: 40px 0 30px;
  padding: 16px 20px;
  border: solid 0.5px rgba(255, 255, 255, 0.25);
  border-left: solid 3px var(--accent);
  border-radius: 8px;
  max-width: 70ch;
}

.disclaimer p {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}