/* johncheung.art — black and white, after the original Twenty Seventeen look:
   white page, black type, Nunito Sans titles and Halant text (Chinese: Noto Sans TC and Cactus Classical Serif), heavy spaced capitals for the name, thin grey rules.
   Colour comes only from the artworks. */
:root {
  --paper: #FFFFFF;
  --ink: #000000;
  --text: #222222;
  --muted: #6B6B6B;
  --rule: #E6E6E6;
  --well: #F2F2F2;
  /* English pages: Halant for text, Nunito Sans for titles; Chinese characters fall through to the Chinese fonts */
  --font: "Halant", "Cactus Classical Serif", "Songti TC", "PMingLiU", Georgia, serif;
  --title: "Nunito Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 46rem;
  --wide: 1120px;
  color-scheme: light;
}
/* dark mode only when the visitor turns it on with the toggle */
:root[data-theme="dark"] {
  --paper: #000000;
  --ink: #FFFFFF;
  --text: #E2E2E2;
  --muted: #9A9A9A;
  --rule: #262626;
  --well: #141414;
  color-scheme: dark;
}

/* Chinese pages (and Chinese bits marked lang="zh-Hant"): Cactus Classical Serif for text,
   Noto Sans TC for titles, used for the English words too so both scripts sit at the same size.
   Anything marked lang="en" (like the "English" switch) goes back to the English fonts. */
:root:lang(zh-Hant), [lang|="zh"] {
  --font: "Cactus Classical Serif", "Songti TC", "PMingLiU", serif;
  --title: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
[lang|="en"] {
  --font: "Halant", "Cactus Classical Serif", "Songti TC", "PMingLiU", Georgia, serif;
  --title: "Nunito Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.125rem; /* Halant runs small */
  line-height: 1.66;
  overflow-x: clip;
}
:lang(zh-Hant) body, body:lang(zh-Hant) { line-height: 1.85; font-size: 1.0625rem; }
/* the name is a wordmark: always Nunito Sans, in both languages */
.name, .masthead-name { font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* titles, menus and labels use the title font (Noto Sans TC for Chinese) */
.nav, .lang, .section-title, .index-title, .entry-head h1,
.prose h2, .prose h3, .prose h4, .year-n, .c-title, .thumb-kind, .back, .skip, .mode, .lb button { font-family: var(--title); }

/* ---------- home masthead: the portrait, full width ---------- */
.masthead { position: relative; height: min(78vh, 760px); min-height: 320px; overflow: hidden; background: var(--well); }
.masthead img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); }
.masthead::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.45)); }
.masthead-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) clamp(24px, 5vw, 56px); color: #FFFFFF; }
.masthead-name { margin: 0; font-size: clamp(1.75rem, 4.2vw, 2.5rem); font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.15; }
.tagline { margin: 4px 0 0; font-size: 1rem; opacity: 0.92; }

/* ---------- header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  padding: 14px max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter)));
}
.name { color: var(--ink); font-weight: 800; font-size: 0.875rem; letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; margin-right: auto; }
.k-home .name { visibility: hidden; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.nav a, .lang { color: var(--ink); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.nav a:hover, .nav a[aria-current], .lang:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.lang { border: 1px solid var(--ink); padding: 1px 8px; }
.mode { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; align-self: center; }
.mode svg { width: 18px; height: 18px; }
.mode:hover svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .mode svg { transition: transform 0.3s ease; } }
@media (max-width: 640px) {
  .k-home .name { display: none; }
  .nav { order: 3; width: 100%; overflow-x: auto; }
  .nav ul { flex-wrap: nowrap; gap: 18px; padding-bottom: 2px; }
  .nav li { white-space: nowrap; }
  .k-home .nav { order: 0; width: auto; flex: 1; }
}

main { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- headings ---------- */
.section-title, .index-title, .entry-head h1 {
  color: var(--ink);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-wrap: balance;
}
:lang(zh-Hant) .section-title, :lang(zh-Hant) .index-title, :lang(zh-Hant) .entry-head h1 { letter-spacing: 0.06em; }
.index-title { font-size: 1.125rem; margin: clamp(40px, 7vw, 72px) 0 24px; }
.section-title { font-size: 0.875rem; margin: 64px 0 16px; }

/* ---------- home ---------- */
.bio { max-width: var(--measure); margin: clamp(40px, 7vw, 72px) auto 0; }
.bio p:first-of-type { font-size: 1.25rem; }
:lang(zh-Hant) .bio p:first-of-type { font-size: 1.125rem; }
kbd { font: inherit; font-weight: 700; }
.recent .back { text-align: left; }

/* ---------- works: grouped by year ---------- */
.year { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0 32px; border-top: 1px solid var(--rule); padding: 24px 0 40px; }
.year-n { margin: 0; color: var(--ink); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1.3; font-variant-numeric: tabular-nums; position: sticky; top: 64px; align-self: start; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 36px 24px; }
.card > a, .card > div { display: flex; flex-direction: column; gap: 2px; text-decoration: none; height: 100%; }
.thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--well); margin-bottom: 10px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-title { color: var(--ink); font-weight: 700; line-height: 1.35; }
.card > a:hover .c-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.c-meta, .c-with { color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
.thumb-kind { display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 640px) {
  .year { grid-template-columns: 1fr; }
  .year-n { position: static; margin-bottom: 16px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 16px; }
}

/* ---------- entries ---------- */
.entry { max-width: var(--measure); margin: 0 auto; }
.entry-head { padding: clamp(40px, 7vw, 72px) 0 20px; }
.entry-head h1 { margin: 0; font-size: 1.125rem; }
.meta { margin: 6px 0 0; color: var(--muted); font-size: 1rem; }

.prose h2, .prose h3, .prose h4 { color: var(--ink); line-height: 1.3; }
.prose h2 { font-size: 1.25rem; font-weight: 700; margin: 2.2em 0 0.6em; }
.prose h3 { font-size: 1.0625rem; font-weight: 700; margin: 1.8em 0 0.5em; }
.prose h4 { font-size: 1rem; font-weight: 700; margin: 1.6em 0 0.4em; }
.prose p { margin: 0 0 1.25em; }
.prose pre { font-family: inherit; white-space: pre-wrap; font-size: 1.0625rem; line-height: 2; }

/* images and videos are as wide as the text */
.fig { margin: 32px 0; }
.fig > a { display: block; width: fit-content; margin: 0 auto; }
.fig img { max-height: 82vh; width: auto; }
figcaption { color: var(--muted); font-size: 0.9375rem; margin-top: 8px; text-align: center; }

/* galleries: even rows, every image in a row cropped to the same shape */
.gallery { display: grid; gap: 8px; margin: 32px 0; }
.gallery .row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.gallery .row img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }
.gallery .one { display: block; }
.gallery .one img { aspect-ratio: auto; object-fit: contain; width: auto; max-width: 100%; max-height: 82vh; }
.gallery .one .ph { width: fit-content; margin: 0 auto; }
.ph { display: block; cursor: zoom-in; }
.ph img { background: var(--well); }

.video { position: relative; aspect-ratio: 16 / 9; margin: 32px 0; background: #000; }
.video iframe, .video > button { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video.sc { aspect-ratio: auto; height: 450px; background: none; }
.video.frame { aspect-ratio: 4 / 3; background: #FFF; border: 1px solid var(--rule); }
.video > button { padding: 0; cursor: pointer; background: #000; }
.video > button img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; filter: grayscale(0.2); }
.play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: #FFF; }
.play::after { content: ""; position: absolute; left: 27px; top: 21px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #000; }
.video > button:hover img { opacity: 1; }

.back { margin: 48px 0 0; font-size: 0.875rem; font-weight: 600; }

/* ---------- footer ---------- */
.foot { max-width: var(--wide); margin: 96px auto 0; padding: 24px var(--gutter) 40px; border-top: 1px solid var(--rule); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 32px; font-size: 0.9375rem; }
.foot p { margin: 0; }
.foot a { color: var(--muted); }

/* ---------- lightbox ---------- */
.lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: rgba(0, 0, 0, 0.95); color: #FFF; }
.lb::backdrop { background: transparent; }
.lb[open] { display: grid; grid-template-rows: 1fr auto; }
.lb figure { margin: 0; display: grid; place-items: center; padding: 56px 64px 8px; min-height: 0; }
.lb img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; }
.lb figcaption { color: #B3B3B3; text-align: center; padding: 0 16px 20px; min-height: 1.6em; }
.lb button { position: absolute; background: none; border: 0; color: inherit; font: inherit; font-size: 0.875rem; font-weight: 600; padding: 12px 16px; cursor: pointer; }
.lb .x { top: 8px; right: 8px; }
.lb .pv, .lb .nx { top: 50%; transform: translateY(-50%); font-size: 2rem; font-weight: 300; }
.lb .pv { left: 4px; }
.lb .nx { right: 4px; }
.lb button:hover { text-decoration: underline; }
@media (max-width: 640px) { .lb figure { padding: 48px 8px 8px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }