/* samliao.com — shared tokens, base, header and portfolio pages ("Moss": quiet paper, ink, one moss accent).
   Readability rules on every page: body ≥ 17px, labels ≥ 14px, AA contrast on --paper
   (ink 14:1, graphite 5.4:1, moss 6.2:1), every control ≥ 44 × 44px. */
:root {
  --paper: #f3f4ef;
  --paper-deep: #e7e9e2;
  --ink: #1f2622;
  --graphite: #5e6660;
  --hairline: #d9ddd4;
  --moss: #3f6247;
  --moss-wash: #e3eae2;

  --display: 'Archivo', 'Helvetica Neue', Arial, 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
  --text: 'Newsreader', Georgia, 'Songti TC', 'Noto Serif TC', 'Noto Serif CJK TC', 'PMingLiU', serif;

  --fs-label: 0.875rem;
  --fs-data: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-title: 1.1875rem;

  --margin: 16px;
  --tap: 44px;
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 max(var(--margin), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--margin), env(safe-area-inset-left));
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* Read by screen readers, not shown (e.g. the journal's page title, which the map and header already say visually). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

button { font: inherit; color: inherit; }

a { color: var(--moss); text-underline-offset: 3px; }

/* --- Site header --- */
/* site-header.js fills the header after load; reserving its height here keeps the page from jumping. */
.site-header {
  position: relative;
  min-height: 64px;
  font-family: var(--display);
  font-size: var(--fs-data);
}

.site-header[data-project] { min-height: 154px; } /* bar + project row (title and links on two lines) */

@media (min-width: 700px) {
  .site-header[data-project] { min-height: 112px; } /* 64px bar + 48px project row */
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}

.site-header__mark {
  margin-right: 1rem; /* the site links sit right beside the name */
  font-variation-settings: 'wdth' 72;
  font-weight: 760;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

.site-nav,
.project-nav {
  display: flex;
  gap: 1.5rem;
}

.site-nav a,
.project-nav a,
.site-header__project-title {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  color: var(--graphite);
  text-decoration: none;
}

.site-nav a[aria-current='page'],
.project-nav a[aria-current='page'] {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--moss);
}

.site-header__menu-button {
  display: none;
  margin-left: auto;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 0.75rem;
  border: 1px solid var(--hairline);
  background: none;
  font-family: var(--display);
  font-size: var(--fs-data);
  cursor: pointer;
}

.site-header__project {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.5rem;
  min-height: 48px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.site-header__project-title {
  color: var(--ink);
  font-weight: 600;
}


@media (hover: hover) {
  .site-nav a:hover,
  .project-nav a:hover { color: var(--moss); }
}

/* Phones: site links fold behind the Menu button into a dropdown under the bar. */
@media (max-width: 699px) {
  .site-header__menu-button { display: inline-flex; align-items: center; }

  .site-nav {
    display: none;
    position: absolute;
    z-index: 1100; /* above Leaflet's map controls (z-index 1000) */
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0;
    background: var(--paper);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }

  .site-nav[data-open] { display: flex; }

  .site-nav a { padding: 0 0.25rem; font-size: var(--fs-body); }

  .site-nav a[aria-current='page'] { box-shadow: inset 2px 0 0 var(--moss); padding-left: 0.75rem; }

  .site-header__project { gap: 0 1rem; }
  .site-header__project-title { width: 100%; }
}

@media (min-width: 700px) {
  :root { --margin: 32px; }
}

@media (min-width: 1100px) {
  :root { --margin: 3vw; }
}

/* --- Portfolio pages: one reading column, left-aligned --- */
.page {
  max-width: 46rem;
  padding: 3rem 0 4rem;
}

.page h1,
.page h2,
.page h3 {
  font-family: var(--display);
  line-height: 1.1;
  margin: 0;
}

.page h1 {
  font-variation-settings: 'wdth' 72;
  font-weight: 760;
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  letter-spacing: -0.015em;
}

.page h2 {
  font-variation-settings: 'wdth' 88;
  font-weight: 640;
  font-size: 1.375rem;
  margin: 3.5rem 0 1rem;
}

.page h3 {
  font-weight: 620;
  font-size: var(--fs-title);
  margin: 2rem 0 0.5rem;
}

.page p,
.page li { max-width: 68ch; }

.lede {
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 1rem 0 1.5rem;
}

.meta {
  font-family: var(--display);
  font-size: var(--fs-label);
  color: var(--graphite);
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  font-family: var(--display);
  font-size: var(--fs-data);
}

.link-row a {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.rows > li {
  max-width: none;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--hairline);
}

.site-footer {
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--hairline);
}

figure { margin: 2rem 0; }

figure img,
figure svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  background: #fff;
}

figure svg { border: 0; background: none; }

figcaption {
  margin-top: 0.5rem;
  font-family: var(--display);
  font-size: var(--fs-label);
  color: var(--graphite);
}

/* --- Home --- */
/* Each project is one card; the title link stretches over the whole card, so clicking anywhere opens it.
   Its other links (Tech stack, Live site, GitHub) sit above that layer and still work on their own. */
.projects { list-style: none; margin: 0; padding: 0; }

.page .project-card {
  max-width: none; /* beats the reading-width limit on .page li */
}

.project-card {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.25rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: border-color 0.15s, background-color 0.15s;
}

.project-card h3 { margin: 0; }
.project-card p { margin: 0.35rem 0; }

.project-card__link {
  color: var(--ink);
  text-decoration: none;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

.project-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

.project-card__links a { position: relative; z-index: 1; }

.project-card__cta {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  color: var(--moss);
  font-weight: 600;
}

.project-card__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 1rem 0 0.75rem;
}

.project-card:hover,
.project-card:focus-within {
  border-color: var(--moss);
  background: var(--moss-wash);
}

.project-card:hover .project-card__link,
.project-card:focus-within .project-card__link { color: var(--moss); }

.project-card:hover .project-card__cta { text-decoration: underline; text-underline-offset: 3px; }

/* Phones and tablets: title, picture, then the details. Wide screens: title and details on the left, the
   picture on the right, so the cards fill the width. */
@media (min-width: 900px) {
  .project-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    grid-template-areas: "title image" "text image";
    grid-template-rows: auto 1fr;
    column-gap: 2.5rem;
    padding: 1.5rem 1.75rem;
  }

  .project-card h3 { grid-area: title; align-self: end; }
  .project-card__text { grid-area: text; }
  .project-card__image { grid-area: image; align-self: center; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card { transition: none; }
}
.page--home { max-width: 72rem; }
/* The introduction wraps at the same width as the project cards below it. */
.page--home .intro,
.page--home .intro p { max-width: none; }

.page--home h1 {
  font-family: var(--text);
  font-variation-settings: normal;
  font-weight: 500;
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  letter-spacing: -0.01em;
}

.intro {
  margin: 1.75rem 0 2rem;
  font-size: 1.1875rem;
  line-height: 1.6;
}

.intro p { margin: 0 0 1rem; }










/* --- About --- */
.involved { padding-left: 1.2rem; }
.involved li { margin: 0 0 1rem; }
.involved b { font-family: var(--display); font-weight: 600; }
.page ul ul { padding-left: 1.2rem; margin: 0.5rem 0 0; }
.page ul ul li { margin: 0.35rem 0; }
.rows h3 { margin: 0; }




/* --- Contact --- */
.contact-list a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: var(--tap);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  font-family: var(--display);
  text-decoration: none;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .contact-list a:hover { text-decoration: underline; }
}

/* --- Architecture diagrams: a wide version for tablets and desktops, a tall one for phones --- */
.diagram { display: block; width: 100%; height: auto; }
.diagram--wide { display: none; }
.diagram--tall { max-width: 360px; }
@media (min-width: 700px) {
  .diagram--wide { display: block; }
  .diagram--tall { display: none; }
}
.figure--phone { max-width: 320px; }

/* --- Slideshow: photographs at their own proportions, crossfading every 8 s (journal days, About gallery) --- */
.slideshow__frame {
  position: relative;
  aspect-ratio: var(--ratio, 0.8);
  /* Never taller than the screen: shrink the width instead, keeping the photo's shape. */
  width: min(100%, calc(78svh * var(--ratio, 0.8)));
  margin-inline: auto;
  background: var(--paper-deep);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.slide.is-active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
}

.slide figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.4rem 0.6rem;
  background: rgb(244 245 242 / 0.9);
  font-size: 1rem;
  font-style: italic;
}

.slideshow--empty {
  aspect-ratio: 3 / 2;
  background: var(--paper-deep);
}

.slideshow--empty img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

.slideshow__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(244 245 242 / 0.88);
  box-shadow: 0 1px 4px rgb(31 38 34 / 0.18);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}

.slideshow__arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slideshow__arrow--prev {
  left: 10px;
}

.slideshow__arrow--next {
  right: 10px;
}

@media (hover: hover) {
  .slideshow__arrow:hover {
    background: var(--paper);
    color: var(--moss);
  }
}

.slideshow__count {
  margin: 0.5rem 0 0;
  text-align: right;
  font-family: var(--display);
  font-size: var(--fs-label);
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}


/* --- About: text on the left, the three photo carousels on the right (wide screens); text then photos elsewhere --- */
.page--about { max-width: 72rem; }

.gallery__group h2 { margin: 2.5rem 0 0.75rem; }

@media (min-width: 1100px) {
  .page--about {
    display: grid;
    grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: start;
  }

  /* The text stays in view while the carousels scroll past beside it. */
  .about__text { position: sticky; top: 1.5rem; }

  .gallery__group:first-child h2 { margin-top: 0.5rem; }

  /* Three carousels share the column, so each is kept to about half a screen tall. */
  .page--about .slideshow__frame { width: min(100%, calc(52svh * var(--ratio, 0.8))); margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .slide,
  .slideshow__arrow { transition: none; }
}