/*
 * xuanyi.art refinements, layered on top of the Adobe Portfolio "geometric" theme.
 * Linked after the theme stylesheets on every page (scripts/refresh_from_adobe.py re-adds the link).
 */

/* ---------- Gallery grids (home, Book, ...) ---------- */

:root {
  --tile-gap: 14px;
  --grid-inset: 28px; /* lines the grid up with the logo and menu */
}

.project-covers {
  gap: var(--tile-gap);
  padding-left: var(--grid-inset);
  padding-right: var(--grid-inset);
}

.project-cover {
  width: calc((100% - 3 * var(--tile-gap)) / 4);
  overflow: hidden;
}

@media (max-width: 932px) {
  .project-cover { width: calc((100% - var(--tile-gap)) / 2); }
}

@media (max-width: 540px) {
  :root { --grid-inset: 16px; }
  .project-cover { width: 100%; }
}

/* Slow zoom on hover */
.project-cover .cover__img {
  transition: scale 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.project-cover:hover .cover__img {
  scale: 1.04;
}

/* Soft dark gradient so titles stay readable on any image (the theme had none) */
.project-cover .cover-image {
  position: relative;
}

.project-cover .cover-image:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0) 70%) !important;
  opacity: 0;
  transition: opacity 0.45s ease !important;
  pointer-events: none;
  z-index: 1;
}

.project-cover:hover .cover-image:after {
  opacity: 1;
}

/* Title and year: smaller, anchored bottom-left, rising in on hover */
.project-cover .details-wrap {
  z-index: 2;
  top: 0;
  bottom: 0;
  height: 100%;
  padding: 0 !important;
}

.project-cover .details {
  align-items: flex-end;
  height: 100%;
}

.project-cover .details-inner {
  padding: 0 22px 20px !important;
  text-align: left;
}

.project-cover .title {
  float: none;
  display: block;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  transform: translateY(8px);
  transition: transform 0.45s ease;
}

.project-cover .date {
  float: none;
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
  transform: translateY(8px);
  transition: transform 0.45s ease 0.05s;
}

.project-cover:hover .title,
.project-cover:hover .date {
  transform: none;
}

/* Touch screens have no hover: keep titles visible over the gradient */
@media (hover: none) {
  .project-cover .cover-image:after { opacity: 1; }
  .project-cover .details-wrap { opacity: 1 !important; }
  .project-cover .title,
  .project-cover .date { transform: none; }
}

/* ---------- Cookie notice: quieter, in the site's body font ---------- */

.cookie-banner p {
  font-family: vcsm, sans-serif;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.cookie-banner .consent-link,
.cookie-banner .decline-link {
  margin-left: 14px;
  text-underline-offset: 3px;
}

/* ---------- Artwork images: project pages and painting grids ---------- */
/* The theme gave no hover response here (only a zoom-in cursor). Now the artwork eases in slightly
   inside its frame and a small "view larger" mark appears. Colours are never dimmed. */

.project-module-image .lightbox-link,
.grid__item-container {
  position: relative;
  overflow: hidden;
}

.project-module-image .lightbox-link img,
.grid__item-container .grid__item-image {
  transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.project-module-image .lightbox-link::after,
.grid__item-container::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.38)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E")
    center / 16px no-repeat;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

.project-module-image .module-caption-container .rich-text {
  letter-spacing: 0.02em;
  transition: color 0.35s ease;
}

@media (hover: hover) {
  .project-module-image .lightbox-link:hover img,
  .grid__item-container:hover .grid__item-image {
    scale: 1.025;
  }

  .project-module-image .lightbox-link:hover::after,
  .grid__item-container:hover::after {
    opacity: 1;
    transform: none;
  }

  .project-module-image:hover .module-caption-container .rich-text {
    color: #555;
  }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .project-cover .cover__img,
  .project-module-image .lightbox-link img,
  .grid__item-container .grid__item-image {
    transition: none;
    scale: none !important;
  }
}

/* ---------- Cursor ---------- */
/* The theme shows a magnifier (zoom-in / zoom-out) over artwork and inside the full-size viewer;
   use the ordinary pointing hand instead. Clicking still opens the viewer and zooms inside it. */

.lightbox-link,
.grid__item-container,
.lightbox-content.zoomable,
html.lightbox-zoomed .lightbox-content {
  cursor: pointer;
}

/* ---------- Full-size viewer (lightbox) ---------- */
/* The theme stretched artwork edge to edge over a 94% white veil, so the page showed through.
   Now: an opaque white gallery wall, the artwork framed with breathing room, and quiet dark
   controls. White stays the backdrop on purpose: 31 of the 122 artworks are scans with white paper
   edges, which disappear on white but would show as borders on a dark backdrop.
   Clicking the image still zooms to full size (html.lightbox-zoomed). */

#lightbox-blocking {
  background: #fff !important;
  opacity: 1 !important;
}

html:not(.lightbox-zoomed) #lightbox-wrap .lightbox-content img {
  max-width: min(84vw, calc(100vw - 220px)) !important;
  max-height: 84vh !important;
  width: auto !important;
  height: auto !important;
  animation: xy-viewer-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes xy-viewer-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Arrows: always faintly visible, darker on hover */
#lightbox-inner-wrap .next,
#lightbox-inner-wrap .prev {
  opacity: 1;
  width: 18vw;
}

#lightbox-inner-wrap .next svg,
#lightbox-inner-wrap .prev svg {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

#lightbox-inner-wrap .next:hover svg,
#lightbox-inner-wrap .prev:hover svg {
  opacity: 1;
}

#lightbox-inner-wrap .next svg { right: 32px; }
#lightbox-inner-wrap .prev svg { left: 32px; }

#lightbox-inner-wrap svg .lightbox-icon-bg {
  fill: #111;
  opacity: 0.05;
  transition: opacity 0.3s ease;
}

#lightbox-inner-wrap svg:hover .lightbox-icon-bg {
  opacity: 0.1;
}

#lightbox-inner-wrap .next svg .lightbox-icon-arrow,
#lightbox-inner-wrap .prev svg .lightbox-icon-arrow {
  fill: #222;
}

/* Close: dark cross in the same quiet circle */
#lightbox-inner-wrap .close {
  top: 28px;
  right: 28px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

#lightbox-inner-wrap .close:hover { opacity: 1; }
#lightbox-inner-wrap .close circle { display: block; }
#lightbox-inner-wrap .close .lightbox-icon-bg { fill: #111; opacity: 0.05; }
#lightbox-inner-wrap .close .lightbox-icon-close { fill: #222; }

/* The cookie notice (z-index 99999) sat on top of the viewer */
html.lightbox-enabled .cookie-banner { display: none !important; }

@media (max-width: 540px) {
  html:not(.lightbox-zoomed) #lightbox-wrap .lightbox-content img {
    max-width: 94vw !important;
    max-height: 80vh !important;
  }
  #lightbox-inner-wrap .next svg { right: 8px; }
  #lightbox-inner-wrap .prev svg { left: 8px; }
  #lightbox-inner-wrap .close { top: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.lightbox-zoomed) #lightbox-wrap .lightbox-content img { animation: none; }
}

/* ---------- Contact page ---------- */
/* Replaces Adobe's form (it posted to Adobe's servers) with one centred composition: the email
   address as the focus, two actions, and the social links by name. Markup comes from
   scripts/refresh_from_adobe.py (EMAIL_BLOCK). */

.contact-panel {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 16px 0;
  text-align: center;
  font-family: vcsm, sans-serif;
  color: #111;
}

.contact-panel__label {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.contact-panel__email,
.contact-panel__elsewhere a {
  color: #111;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.contact-panel__email:hover,
.contact-panel__elsewhere a:hover {
  background-size: 100% 1px;
}

.contact-panel__email {
  display: inline-block;
  padding-bottom: 6px;
  font-family: gmsj, Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: 0.005em;
  overflow-wrap: anywhere;
}

.contact-panel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.contact-panel__button {
  -webkit-appearance: none;
  appearance: none;
  min-width: 168px;
  padding: 16px 26px;
  border: 1px solid #111;
  border-radius: 0;
  background: transparent;
  color: #111;
  font: 600 12px/1 vcsm, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.contact-panel__button:hover {
  background: #111;
  color: #fff;
}

.contact-panel__button--solid {
  background: #111;
  color: #fff;
}

.contact-panel__button--solid:hover {
  background: #3a3a3a;
  border-color: #3a3a3a;
}

.contact-panel__elsewhere {
  margin-top: 80px;
  padding-top: 44px;
  border-top: 1px solid #ececec;
}

.contact-panel__elsewhere ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-panel__elsewhere a {
  padding-bottom: 4px;
  font-size: 15px;
  font-weight: 600;
}

.contact-panel__elsewhere a span {
  margin-left: 6px;
  font-weight: 400;
  color: #9a9a9a;
}

@media (max-width: 540px) {
  .contact-panel__actions { flex-direction: column; align-items: stretch; }
  .contact-panel__elsewhere { margin-top: 56px; padding-top: 32px; }
  .contact-panel__elsewhere ul { flex-direction: column; align-items: center; }
}

/* Page intros: balanced line breaks (no single stranded words) */
.page-header .description {
  text-wrap: balance;
}

/* ---------- Award page ---------- */
/* Adobe's four free-text blocks are rebuilt as an honours list (public/award.html): one section per
   project with a link to it, and rows of year | achievement + place. */

.page-header--centered {
  text-align: center;
}

.page-header--centered .title,
.page-header--centered .description {
  text-align: center !important;
}

.page-header--centered .description {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

.awards {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px 40px;
  font-family: vcsm, sans-serif;
  color: #111;
}

.awards__section {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  padding: 48px 0;
  border-top: 1px solid #e8e8e8;
}

.awards__section:first-child {
  border-top: 0;
  padding-top: 8px;
}

.awards__head {
  align-self: start;
  position: sticky;
  top: 120px;
}

.awards__title {
  margin: 0;
  font-family: gmsj, Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  color: #111;
}

.awards__period {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.awards__link {
  display: inline-block;
  margin-top: 22px;
  padding-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #111;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}

.awards__link span {
  display: inline-block;
  transition: transform 0.35s ease;
}

.awards__link:hover span {
  transform: translateX(4px);
}

.awards__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.awards__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid #f0f0f0;
}

.awards__item:first-child {
  padding-top: 4px;
}

.awards__item:last-child {
  border-bottom: 0;
}

.awards__year {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #9a9a9a;
  padding-top: 3px;
}

.awards__text {
  font-size: 17px;
  line-height: 1.5;
  color: #111;
}

.awards__context {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a9a9a;
}

@media (max-width: 860px) {
  .awards__section { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .awards__head { position: static; }
}

@media (max-width: 540px) {
  .awards { padding: 0 16px 24px; }
  .awards__item { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .awards__text { font-size: 16px; }
}

/* ---------- About page ---------- */

.page-header .description:empty {
  display: none;
}

.about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 28px 40px;
  font-family: vcsm, sans-serif;
  color: #111;
}

.about__figure {
  margin: 0;
  align-self: start;
  position: sticky;
  top: 110px;
}

.about__image-link {
  display: block;
  overflow: hidden;
}

.about__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.about__image-link:hover .about__image {
  scale: 1.025;
}

.about__caption {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #9a9a9a;
}

.about__caption a {
  color: #555;
  text-decoration: none;
}

.about__caption a:hover {
  color: #111;
}

.about__body p {
  margin: 0 0 1.2em;
  font-size: 17px;
  line-height: 1.75;
  color: #444;
}

.about__body .about__lead {
  margin-bottom: 1em;
  font-family: gmsj, Georgia, serif;
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.3;
  color: #111;
}

.about__highlights,
.about__contact {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #ececec;
}

.about__body .about__label {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.about__highlights ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.about__highlights li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 10px 0;
  font-size: 16px;
  line-height: 1.5;
  color: #111;
}

.about__hl-year {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #9a9a9a;
  padding-top: 2px;
}

.about__email {
  display: inline-block;
  margin-right: 28px;
  font-family: gmsj, Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  color: #111;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  padding-bottom: 4px;
}

.about__email:hover {
  background-size: 100% 1px;
}

.about__more {
  display: inline-block;
  padding-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #111;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}

.about__more span {
  display: inline-block;
  transition: transform 0.35s ease;
}

.about__more:hover span {
  transform: translateX(4px);
}

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: 40px; }
  .about__figure { position: static; max-width: 520px; }
}

@media (max-width: 540px) {
  .about { padding: 0 16px 24px; }
  .about__body p { font-size: 16px; }
  .about__email { display: block; margin: 0 0 14px; font-size: 20px; overflow-wrap: anywhere; }
}

/* ---------- Shop page ---------- */

.shop {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 28px 40px;
  font-family: vcsm, sans-serif;
  color: #111;
}

.shop__book {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 72px;
  align-items: start;
}

.shop__cover {
  display: block;
  overflow: hidden;
  background: #8e8e8e;
}

.shop__cover img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.shop__cover:hover img {
  scale: 1.025;
}

.shop__label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.shop__label--list {
  margin-top: 40px;
}

.shop__title {
  margin: 0 0 18px;
  font-family: gmsj, Georgia, serif;
  font-weight: 600;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.1;
  color: #111;
}

.shop__text {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.7;
  color: #444;
}

.shop__meta {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #9a9a9a;
}

.shop__stores {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ececec;
}

.shop__stores a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 2px;
  border-bottom: 1px solid #ececec;
  font-size: 16px;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  transition: padding 0.35s ease, color 0.35s ease;
}

.shop__stores a:hover {
  padding-left: 8px;
}

.shop__arrow {
  color: #9a9a9a;
  transition: transform 0.35s ease, color 0.35s ease;
}

.shop__stores a:hover .shop__arrow {
  color: #111;
  transform: translateX(4px);
}

.shop__more {
  display: inline-block;
  padding-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #111;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}

.shop__gallery {
  margin-top: 96px;
  padding: 56px 24px;
  border-top: 1px solid #ececec;
  text-align: center;
}

.shop__gallery-text {
  margin: 0 0 28px;
  font-family: gmsj, Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.35;
  color: #111;
}

.shop__button {
  display: inline-block;
  padding: 16px 26px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.shop__button:hover {
  background: #3a3a3a;
}

@media (max-width: 860px) {
  .shop__book { grid-template-columns: 1fr; gap: 36px; }
  .shop__cover { max-width: 560px; }
  .shop__gallery { margin-top: 64px; padding: 44px 0; }
}

@media (max-width: 540px) {
  .shop { padding: 0 16px 24px; }
  .shop__button { display: block; }
}

/* ---------- Site-wide layout (option A) ---------- */
/* Every page gets the home page's look: warm paper background and the fixed left sidebar
   (inserted between <!-- xy-sidebar --> markers by scripts/build_home.py). Adobe's top header,
   mobile menu and footer are hidden; the sidebar carries the menu, social links and ©. */

html,
body {
  background: #F2EFEA !important;
}

.site-wrap,
.site-container,
.site-content,
.site-content > main,
.page-container,
.page {
  background: transparent !important;
}

.js-responsive-nav,
.site-header,
.site-footer {
  display: none !important;
}

.site-wrap {
  width: auto !important;
  margin-left: 250px;
  padding-right: 40px;
}

.site-container {
  max-width: 1600px;
}

.site-content {
  padding-top: 44px;
}

.xy-side {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 20;
  width: 250px;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  background: #F2EFEA;
  font-family: vcsm, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.xy-side a {
  text-decoration: none;
}

.xy-side .logo img {
  display: block;
  width: 132px;
  height: auto;
}

.xy-side nav,
.xy-side .social {
  display: grid;
  gap: 10px;
  font-size: 13px;
  line-height: 1.35;
}

.xy-side nav {
  margin-top: 40px;
}

.xy-side .social {
  margin-top: 26px;
}

.xy-side nav a,
.xy-side .social a {
  width: max-content;
  color: #666;
  transition: color 0.3s;
}

.xy-side nav a:hover,
.xy-side .social a:hover,
.xy-side nav a.on {
  color: #1a1a1a;
}

.xy-side nav a.on {
  font-weight: 600;
}

.xy-side .note {
  margin: auto 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #8a8a8a;
}

@media (max-width: 900px) {
  .site-wrap {
    margin-left: 0;
    padding-right: 0;
  }

  .site-content {
    padding-top: 8px;
  }
}

/* ---------- Colour switch: Paper (default) and Ink ---------- */
/* The sidebar's switch (site.js) sets html[data-theme="dark"]. Ink is a deep warm charcoal with cream
   text, from the same warm family as the paper background, so the artwork's colours stay the focus. */

.xy-side .theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  margin-top: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 13px/1 vcsm, sans-serif;
  color: #666;
}

.xy-side .theme-toggle:hover { color: #1a1a1a; }

.theme-toggle__track {
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: #d9d3c9;
  transition: background 0.3s;
}

.theme-toggle__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}


html[data-theme="dark"] {
  --ink-bg: #1b1916;
  --ink-text: #ede6da;
  --ink-body: #c9c1b4;
  --ink-muted: #8c857a;
  --ink-line: #36312b;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .xy-side {
  background: var(--ink-bg) !important;
  color: var(--ink-text);
}

html[data-theme="dark"] .theme-toggle__track { background: var(--ink-text); }
html[data-theme="dark"] .theme-toggle__dot { transform: translateX(14px); background: var(--ink-bg); box-shadow: none; }
html[data-theme="dark"] .xy-side .logo img { filter: invert(1) brightness(1.55); }
html[data-theme="dark"] .xy-side nav a,
html[data-theme="dark"] .xy-side .social a,
html[data-theme="dark"] .xy-side .theme-toggle { color: #a39e95; }
html[data-theme="dark"] .xy-side nav a:hover,
html[data-theme="dark"] .xy-side nav a.on,
html[data-theme="dark"] .xy-side .social a:hover,
html[data-theme="dark"] .xy-side .theme-toggle:hover { color: var(--ink-text); }
html[data-theme="dark"] .xy-side .note { color: var(--ink-muted); }

/* Adobe's page text (titles, intros, rich text with inline colours, captions) */
html[data-theme="dark"] .page-header .title,
html[data-theme="dark"] .project-module-text h1,
html[data-theme="dark"] .project-module-text h2 { color: var(--ink-text) !important; }
html[data-theme="dark"] .page-header .description,
html[data-theme="dark"] .page-header .date,
html[data-theme="dark"] .page-header .custom1,
html[data-theme="dark"] .rich-text,
html[data-theme="dark"] .rich-text * { color: var(--ink-body) !important; }
html[data-theme="dark"] .rich-text a { color: var(--ink-text) !important; }
html[data-theme="dark"] .project-module-image:hover .module-caption-container .rich-text,
html[data-theme="dark"] .project-module-image:hover .module-caption-container .rich-text * { color: var(--ink-text) !important; }

/* Award */
html[data-theme="dark"] .awards,
html[data-theme="dark"] .awards__title,
html[data-theme="dark"] .awards__text,
html[data-theme="dark"] .awards__link { color: var(--ink-text); }
html[data-theme="dark"] .awards__period,
html[data-theme="dark"] .awards__year,
html[data-theme="dark"] .awards__context { color: var(--ink-muted); }
html[data-theme="dark"] .awards__section { border-top-color: var(--ink-line); }
html[data-theme="dark"] .awards__item { border-bottom-color: var(--ink-line); }

/* About */
html[data-theme="dark"] .about,
html[data-theme="dark"] .about__body .about__lead,
html[data-theme="dark"] .about__highlights li,
html[data-theme="dark"] .about__email,
html[data-theme="dark"] .about__more,
html[data-theme="dark"] .about__caption a:hover { color: var(--ink-text); }
html[data-theme="dark"] .about__body p { color: var(--ink-body); }
html[data-theme="dark"] .about__body .about__label,
html[data-theme="dark"] .about__hl-year,
html[data-theme="dark"] .about__caption { color: var(--ink-muted); }
html[data-theme="dark"] .about__caption a { color: #a39e95; }
html[data-theme="dark"] .about__highlights,
html[data-theme="dark"] .about__contact { border-top-color: var(--ink-line); }

/* Shop */
html[data-theme="dark"] .shop,
html[data-theme="dark"] .shop__title,
html[data-theme="dark"] .shop__stores a,
html[data-theme="dark"] .shop__more,
html[data-theme="dark"] .shop__gallery-text { color: var(--ink-text); }
html[data-theme="dark"] .shop__text { color: var(--ink-body); }
html[data-theme="dark"] .shop__label,
html[data-theme="dark"] .shop__meta,
html[data-theme="dark"] .shop__arrow { color: var(--ink-muted); }
html[data-theme="dark"] .shop__stores a:hover .shop__arrow { color: var(--ink-text); }
html[data-theme="dark"] .shop__stores,
html[data-theme="dark"] .shop__stores a,
html[data-theme="dark"] .shop__gallery { border-color: var(--ink-line); }
html[data-theme="dark"] .shop__button { background: var(--ink-text); color: var(--ink-bg); }
html[data-theme="dark"] .shop__button:hover { background: #fff; }

/* Contact */
html[data-theme="dark"] .contact-panel,
html[data-theme="dark"] .contact-panel__email,
html[data-theme="dark"] .contact-panel__elsewhere a { color: var(--ink-text); }
html[data-theme="dark"] .contact-panel__label,
html[data-theme="dark"] .contact-panel__elsewhere a span { color: var(--ink-muted); }
html[data-theme="dark"] .contact-panel__elsewhere { border-top-color: var(--ink-line); }
html[data-theme="dark"] .contact-panel__button { border-color: var(--ink-text); color: var(--ink-text); }
html[data-theme="dark"] .contact-panel__button:hover { background: var(--ink-text); color: var(--ink-bg); }
html[data-theme="dark"] .contact-panel__button--solid { background: var(--ink-text); color: var(--ink-bg); }
html[data-theme="dark"] .contact-panel__button--solid:hover { background: #fff; border-color: #fff; }

/* Full-size viewer follows the theme */
html[data-theme="dark"] #lightbox-blocking { background: var(--ink-bg) !important; }
html[data-theme="dark"] #lightbox-inner-wrap svg .lightbox-icon-bg { fill: #fff; opacity: 0.08; }
html[data-theme="dark"] #lightbox-inner-wrap .next svg .lightbox-icon-arrow,
html[data-theme="dark"] #lightbox-inner-wrap .prev svg .lightbox-icon-arrow,
html[data-theme="dark"] #lightbox-inner-wrap .close .lightbox-icon-close { fill: var(--ink-text); }
html[data-theme="dark"] #lightbox-inner-wrap .close .lightbox-icon-bg { fill: #fff; }

/* ---------- Sidebar: desktop column / phone top bar + menu ---------- */
/* Shared by the home page and every other page (both use <aside class="side">). On desktop the sidebar
   is the fixed column; on phones it becomes a slim sticky bar (logo + menu button) and the menu opens
   full-screen. site.js toggles .is-open on the sidebar. */

.side__menu,
.side .theme-toggle--bar {
  display: none;
}

.side__panel {
  display: flex;
  flex: 1;
  flex-direction: column;
}

@media (max-width: 900px) {
  .side {
    position: sticky !important;
    top: 0;
    bottom: auto !important;
    z-index: 40;
    display: block !important;
    width: auto !important;
    height: auto;
    padding: 12px 20px !important;
    background: #F2EFEA;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .side__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .side .logo img {
    width: 104px !important;
  }

  .side__menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0 10px;
    border: 0;
    background: none;
    cursor: pointer;
    color: #1a1a1a;
  }

  .side__menu span {
    display: block;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.3s ease;
  }

  .side.is-open .side__menu span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .side.is-open .side__menu span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  .side__panel {
    display: none;
    position: fixed;
    top: 69px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 20px 32px;
    overflow-y: auto;
    background: #F2EFEA;
  }

  .side.is-open .side__panel {
    display: flex;
  }

  .side .side__panel nav {
    display: grid !important;
    grid-auto-flow: row !important;
    gap: 4px !important;
    margin-top: 0 !important;
    font-family: gmsj, Georgia, serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 1.25;
  }

  .side .side__panel nav a {
    color: #1a1a1a;
  }

  .side .side__panel nav a.on {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }

  .side .side__panel .social {
    display: flex !important;
    gap: 24px !important;
    margin-top: 34px !important;
    font-size: 15px;
  }

  /* Phones: the colour switch sits in the top bar, always in reach, instead of inside the menu. */
  .side .side__panel .theme-toggle {
    display: none;
  }

  .side .side__bar .theme-toggle--bar {
    display: flex;
    margin: 0 14px 0 auto;
    padding: 10px 0;
    font-size: 13px;
  }

  .side .side__panel .note {
    margin-top: auto !important;
    padding-top: 32px;
  }

  html.menu-open,
  html.menu-open body {
    overflow: hidden;
  }

  html[data-theme="dark"] .side,
  html[data-theme="dark"] .side__panel {
    background: #1b1916 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="dark"] .side__menu,
  html[data-theme="dark"] .side .side__panel nav a {
    color: #ede6da;
  }
}

/* ---------- Accent: brick (Paper) / clay (Ink) ---------- */
/* Taken from the artwork itself: the brick red of "Reflection not mine" and the dusty clay of the picture
   books. Used sparingly, only for the current page, hovers and the switch, so the artwork stays the colour
   on the page. The "html body" prefix outranks the sidebar rules above and the home page's inline styles. */

html {
  --accent: #8e2a24;
}

html[data-theme="dark"] {
  --accent: #d5a581;
}

html body .side nav a.on,
html body .side nav a:hover,
html body .side .social a:hover,
html body .side .theme-toggle:hover,
html body .cap a:hover b,
html[data-theme="dark"] body .side nav a.on,
html[data-theme="dark"] body .side nav a:hover,
html[data-theme="dark"] body .side .social a:hover,
html[data-theme="dark"] body .side .theme-toggle:hover,
html[data-theme="dark"] body .cap a:hover b {
  color: var(--accent);
}

html body .side .theme-toggle:hover .theme-toggle__track {
  background: color-mix(in srgb, var(--accent) 35%, #d9d3c9);
}

html[data-theme="dark"] body .side .theme-toggle__track,
html[data-theme="dark"] body .side .theme-toggle:hover .theme-toggle__track {
  background: var(--accent);
}

/* ---------- Book page: an editorial index of the books (scripts/build_book_page.py) ---------- */
/* Each written-and-illustrated book is a spread: a large image beside its number, title, details and a short
   description, alternating sides down the page. The other book work follows as two quieter cards. */

.books {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 0 60px;
  font-family: vcsm, sans-serif;
  color: #1a1a1a;
}

/* The Book page used to be an Adobe gallery page, whose theme CSS has no page-title styles; match the
   other pages' title (About, Award) here. */
.page:has(.books, .ser) .page-header .title {
  margin: 0;
  font-family: gmsj, Georgia, serif;
  font-weight: 700;
  font-size: clamp(42px, 5vw, 60px);
  line-height: 1.15;
  color: #111;
}

.page:has(.books, .ser) .page-header .description {
  font-family: vcsm, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  color: #999;
}

.page:has(.books, .ser) .page-header {
  margin-bottom: 72px;
}

.books__list {
  display: grid;
  gap: 120px;
}

.book {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.book--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.book--flip .book__img { order: 2; }

.book__img {
  display: block;
  overflow: hidden;
}

.book__img img,
.books__card-img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.book__img:hover img,
.books__card:hover .books__card-img img {
  transform: scale(1.025);
}

.book__num {
  display: block;
  font-family: gmsj, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--accent, #8e2a24);
}

.book__title {
  margin: 10px 0 0;
  font-family: gmsj, Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.005em;
}

.book__title a { color: inherit; text-decoration: none; }

.book__meta {
  display: block;
  margin: 16px 0 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7a7a;
}

.book__desc {
  margin: 18px 0 0;
  max-width: 400px;
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
}

.book__link {
  display: inline-block;
  margin-top: 26px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.3s;
}

.book__link span { display: inline-block; transition: transform 0.3s ease; }
.book__link:hover { color: var(--accent, #8e2a24); }
.book__link:hover span { transform: translateX(4px); }

.books__more {
  margin-top: 140px;
  padding-top: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.books__label {
  margin: 0 0 32px;
  font-family: vcsm, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a7a7a;
}

.books__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.books__card { display: block; color: inherit; text-decoration: none; }

.books__card-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.books__card-img img { height: 100%; object-fit: cover; }

.books__card-title {
  display: block;
  margin-top: 18px;
  font-family: gmsj, Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
}

.books__card .book__meta { margin-top: 10px; }

.books__card-desc {
  display: block;
  margin-top: 10px;
  max-width: 440px;
  font-size: 15px;
  line-height: 1.65;
  color: #4a4a4a;
}

@media (max-width: 1100px) {
  .book { gap: 40px; }
}

@media (max-width: 900px) {
  .books { padding: 0 20px 48px; }
  .page:has(.books, .ser) .page-header { margin-bottom: 44px; padding: 0 20px; }
  .page:has(.books, .ser) .page-header .description { font-size: 17px; }
  .books__list { gap: 72px; }
  .book,
  .book--flip { grid-template-columns: 1fr; gap: 22px; }
  .book--flip .book__img { order: 0; }
  .book__title { font-size: 34px; }
  .book__desc { max-width: none; font-size: 15px; }
  .books__more { margin-top: 88px; }
  .books__cards { grid-template-columns: 1fr; gap: 56px; }
}

html[data-theme="dark"] .books,
html[data-theme="dark"] .book__link { color: var(--ink-text); }
html[data-theme="dark"] .book__desc,
html[data-theme="dark"] .books__card-desc { color: var(--ink-body); }
html[data-theme="dark"] .book__meta,
html[data-theme="dark"] .books__label { color: var(--ink-muted); }
html[data-theme="dark"] .books__more { border-top-color: var(--ink-line); }

/* ---------- Series pages: Editorial, Commercial, Painting, book details (scripts/build_series_pages.py) ---------- */
/* A project: number, title and meta on the left, notes and a facts list on the right, then the artwork in
   rows where every image is the same height (columns sized by each image's ratio, like the home page). */

.ser {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 60px;
  font-family: vcsm, sans-serif;
  color: #1a1a1a;
}

.ser__project + .ser__project {
  margin-top: 130px;
  padding-top: 56px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ser__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 64px;
  margin-bottom: 56px;
}

.ser__num {
  display: block;
  font-family: gmsj, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--accent, #8e2a24);
}

.ser__title {
  margin: 10px 0 0;
  font-family: gmsj, Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.05;
}

.ser__meta {
  margin: 16px 0 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7a7a;
}

.ser__notes p {
  margin: 0 0 14px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
}

.ser__notes p:first-child {
  font-family: gmsj, Georgia, serif;
  font-size: 21px;
  line-height: 1.5;
  color: #1a1a1a;
}

.ser__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 28px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 14px;
  line-height: 1.5;
}

.ser__facts dt {
  padding-top: 2px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7a7a;
}

.ser__facts dd { margin: 0; color: #1a1a1a; }

.ser__row {
  display: grid;
  grid-template-columns: var(--cols, 1fr);
  gap: 28px;
  align-items: start;
}

.ser__row + .ser__row { margin-top: 28px; }
.ser__row--grid { gap: 14px; }
.ser__row--grid + .ser__row--grid { margin-top: 14px; }

.ser__fig { margin: 0; }

.ser__img {
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.ser__img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ser__img:hover img { transform: scale(1.02); }

.ser__cap {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #7a7a7a;
}

.ser__cap span {
  font-family: gmsj, Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: #1a1a1a;
}

.ser__note {
  margin: 80px 0 0;
  font-size: 13px;
  color: #7a7a7a;
}

@media (max-width: 900px) {
  .ser { padding: 0 20px 48px; }
  .ser__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .ser__notes p:first-child { font-size: 19px; }
  .ser__project + .ser__project { margin-top: 80px; padding-top: 40px; }
}

@media (max-width: 560px) {
  /* Phones: landscape rows stack; rows of portraits and the sketchbook grid stay side by side. */
  .ser__row:not(.ser__row--portraits):not(.ser__row--grid) { grid-template-columns: 1fr; }
  .ser__row--portraits { gap: 12px; }
  .ser__row--grid { gap: 8px; }
  .ser__row--grid + .ser__row--grid { margin-top: 8px; }
}

html[data-theme="dark"] .ser,
html[data-theme="dark"] .ser__notes p:first-child,
html[data-theme="dark"] .ser__facts dd,
html[data-theme="dark"] .ser__cap span { color: var(--ink-text); }
html[data-theme="dark"] .ser__notes p { color: var(--ink-body); }
html[data-theme="dark"] .ser__meta,
html[data-theme="dark"] .ser__facts dt,
html[data-theme="dark"] .ser__cap,
html[data-theme="dark"] .ser__note { color: var(--ink-muted); }
html[data-theme="dark"] .ser__project + .ser__project,
html[data-theme="dark"] .ser__facts { border-top-color: var(--ink-line); }

html:not([data-theme="dark"]) .ser__img--on-white img { mix-blend-mode: multiply; }

/* Detail pages: the book cover and facts sit in the side column beside the notes; a "Next" link at the end. */
.ser__name .ser__fig { max-width: 340px; }
.ser__name .ser__fig + .ser__facts { margin-top: 28px; }
.ser__name > .ser__facts:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.ser__next {
  display: block;
  margin-top: 120px;
  padding: 40px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-family: gmsj, Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.1;
  color: #1a1a1a;
  text-decoration: none;
}

.ser__next span {
  display: block;
  margin-bottom: 12px;
  font-family: vcsm, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a7a7a;
}

.ser__next i { display: inline-block; font-style: normal; transition: transform 0.3s ease; }
.ser__next:hover { color: var(--accent, #8e2a24); }
.ser__next:hover i { transform: translateX(6px); }

@media (max-width: 900px) {
  .ser__name .ser__fig { max-width: 240px; }
  .ser__next { margin-top: 72px; }
}

html[data-theme="dark"] .ser__next { color: var(--ink-text); border-top-color: var(--ink-line); }
html[data-theme="dark"] .ser__next span { color: var(--ink-muted); }
html[data-theme="dark"] .ser__next:hover { color: var(--accent); }

/* ---------- Phone menu (≤900px): a contents page ---------- */
/* Work sections are large serif lines, numbered like chapters, with hairline rules; Award, About, Shop and
   Contact sit below in a quieter two-column row; a featured artwork and the email fill the foot. Items fade
   up in turn when the menu opens. The feature and email are phone-only. On desktop the two groups just get a
   small gap between them. */

.side .side__feature,
.side .side__mail { display: none; }

@media (min-width: 901px) {
  .side nav a:not(.nav--minor) + a.nav--minor { margin-top: 14px; }
}

@media (max-width: 900px) {
  .side .side__panel { padding: 8px 20px 28px; }

  .side .side__panel nav {
    grid-template-columns: 1fr 1fr;
    gap: 0 24px !important;
    counter-reset: chapter;
  }

  .side .side__panel nav a:not(.nav--minor) {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 16px;
    width: auto !important;
    padding: 11px 0 9px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    counter-increment: chapter;
    text-decoration: none;
  }

  .side .side__panel nav a:not(.nav--minor)::before {
    content: counter(chapter, decimal-leading-zero);
    min-width: 20px;
    font-family: vcsm, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #9a948a;
  }

  .side .side__panel nav a:not(.nav--minor)::after {
    content: "→";
    margin-left: auto;
    font-family: vcsm, sans-serif;
    font-size: 16px;
    color: transparent;
    transition: color 0.3s, transform 0.3s;
  }

  .side .side__panel nav a.on { text-decoration: none; }
  .side .side__panel nav a.on::before,
  .side .side__panel nav a.on::after { color: var(--accent); }

  .side .side__panel nav a.nav--minor {
    width: auto !important;
    justify-self: start;
    text-align: left;
    padding: 16px 0 2px;
    font-weight: 400;
    font-family: vcsm, sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #555;
  }

  .side .side__panel nav a.nav--minor.on,
  html[data-theme="dark"] .side .side__panel nav a.nav--minor.on { color: var(--accent); }

  .side .side__panel .social {
    gap: 22px !important;
    margin-top: 26px !important;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* The feature takes whatever height is left, so a tall phone shows more of the picture instead of a gap. */
  .side .side__feature {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    padding-top: 28px;
    color: inherit;
    text-decoration: none;
  }

  /* The frame takes the leftover height (at least 150px; the panel scrolls if there isn't that much) and the
     picture fills it. Sizing the <img> itself as the flex item overflowed on iPhone Safari, drawing the caption,
     email and note on top of the picture. */
  .side .side__feature-frame {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: 150px;
    overflow: hidden;
  }

  .side .side__feature img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.25s ease;
  }

  .side .side__feature-cap {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #7a7a7a;
  }

  .side .side__feature b {
    margin-right: 6px;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .side .side__mail {
    display: block;
    margin-top: 22px;
    font-family: gmsj, Georgia, serif;
    font-style: italic;
    font-size: 20px;
    color: #1a1a1a;
  }

  .side .side__panel .note {
    margin-top: 10px !important;
    padding-top: 0;
  }

  /* Fade up in turn when the menu opens. */
  @keyframes xy-menu-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

  .side.is-open .side__panel nav a,
  .side.is-open .side__panel .social,
  .side.is-open .side__feature,
  .side.is-open .side__mail,
  .side.is-open .side__panel .note {
    animation: xy-menu-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .side.is-open .side__panel nav a:nth-child(2) { animation-delay: 0.04s; }
  .side.is-open .side__panel nav a:nth-child(3) { animation-delay: 0.08s; }
  .side.is-open .side__panel nav a:nth-child(4) { animation-delay: 0.12s; }
  .side.is-open .side__panel nav a:nth-child(5) { animation-delay: 0.16s; }
  .side.is-open .side__panel nav a.nav--minor { animation-delay: 0.22s; }
  .side.is-open .side__panel .social { animation-delay: 0.26s; }
  .side.is-open .side__feature { animation-delay: 0.3s; }
  .side.is-open .side__mail,
  .side.is-open .side__panel .note { animation-delay: 0.34s; }

  html[data-theme="dark"] .side .side__panel nav a:not(.nav--minor) { border-bottom-color: rgba(255, 255, 255, 0.1); }
  html[data-theme="dark"] .side .side__panel nav a:not(.nav--minor)::before { color: #8c857a; }
  html[data-theme="dark"] body .side .side__panel nav a.on::before,
  html[data-theme="dark"] body .side .side__panel nav a.on::after { color: var(--accent); }
  html[data-theme="dark"] .side .side__panel nav a.nav--minor { color: #a39e95; }
  html[data-theme="dark"] .side .side__mail { color: var(--ink-text); }
  html[data-theme="dark"] .side .side__feature-cap { color: #8c857a; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .side.is-open .side__panel * { animation: none !important; }
}

/* Home page artwork on white paper (build_home.py ON_WHITE): blended into the page colour in Paper mode. */
html:not([data-theme="dark"]) .work__img--on-white img { mix-blend-mode: multiply; }

/* ---------- Large screens (≥1600px): the sidebar text grows a little so it doesn't look tiny ---------- */
@media (min-width: 1600px) {
  .side .logo img { width: 150px !important; }
  .side nav a,
  .side .social a { font-size: 15px; }
  .side nav { gap: 12px !important; }
  .side .theme-toggle { font-size: 14px; }
  .side .note { font-size: 13px !important; }
}

/* ---------- Language switch: EN / 中 (site.js, assets/i18n/zh.json) ---------- */
/* Desktop: under the Dark switch at the foot of the sidebar menu. Phones: in the top bar, beside the colour switch. */
.side__switches {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 26px;
}

.side__switches .theme-toggle { margin-top: 0 !important; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font: 400 11px/1 vcsm, sans-serif;
  color: #7a7a7a;
}

.lang-toggle span {
  min-width: 24px;
  padding: 4px 6px;
  border-radius: 999px;
  text-align: center;
  letter-spacing: 0.06em;
  transition: background 0.25s, color 0.25s;
}

.lang-toggle__zh { font-size: 12px; }
html:not([lang="zh-CN"]) .lang-toggle__en,
html[lang="zh-CN"] .lang-toggle__zh { background: #1a1a1a; color: #f2efea; }
.lang-toggle:hover { border-color: rgba(0, 0, 0, 0.3); }

html[data-theme="dark"] .lang-toggle { border-color: rgba(255, 255, 255, 0.18); color: #a39e95; }
html[data-theme="dark"]:not([lang="zh-CN"]) .lang-toggle__en,
html[data-theme="dark"][lang="zh-CN"] .lang-toggle__zh { background: #ede6da; color: #1b1916; }

.side .lang-toggle--bar { display: none; }

@media (max-width: 900px) {
  .side .side__panel .side__switches { display: none; }
  .side .side__bar .lang-toggle--bar { display: inline-flex; margin-left: auto; }
  .side .side__bar .lang-toggle--bar + .theme-toggle--bar { margin-left: 14px; }
}

/* Chinese: CJK has no true italics, and its lines need a little more room. */
html[lang="zh-CN"] em,
html[lang="zh-CN"] i,
html[lang="zh-CN"] .fish--hero h1,
html[lang="zh-CN"] .ser__cap span,
html[lang="zh-CN"] .ser__notes p:first-child,
html[lang="zh-CN"] .fish__link,
html[lang="zh-CN"] .side__mail { font-style: normal; }
html[lang="zh-CN"] .fish--hero h1 { line-height: 1.25; letter-spacing: 0.02em; }
html[lang="zh-CN"] body { line-height: 1.75; }

/* ---------- Contact: the pointing hand (scripts/build_contact_page.py) ---------- */
/* The hand video plays once and stays on the pointing frame; the email button fades in at the fingertip (79.4% across, 86.9% down the video) as the
   finger points, and stays. Text sits top-left over the empty part of the video. */
.hand {
  position: relative;
  max-width: 1100px;
  margin: 24px auto 0;
  font-family: vcsm, sans-serif;
  color: #1a1a1a;
}

.hand__text {
  position: absolute;
  top: 6%;
  left: 0;
  z-index: 1;
  max-width: 36%;
}

.hand__label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #8e2a24);
}

.hand__title {
  margin: 18px 0 0;
  font: italic 500 clamp(48px, 6vw, 88px)/1 gmsj, Georgia, serif;
  color: #1a1a1a;
}

.hand__intro {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: #555;
}

.hand__stage {
  position: relative;
  width: 70%;
  margin: 0 14% 0 auto; /* room on the right for the email button at the fingertip */
  aspect-ratio: 1600 / 1024;
}

.hand__stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
}

.hand__cta {
  position: absolute;
  left: calc(79.4% + 8px);
  top: calc(86.9% + 4px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hand.js-hand:not(.is-pointing) .hand__cta {
  opacity: 0;
  transform: translate(-6px, -6px);
  pointer-events: none;
}

.hand__mail {
  display: block;
  padding: 16px 22px 15px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #f2efea;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s;
}

.hand__mail-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b8b0a3;
}

.hand__mail-address {
  font: 500 19px/1 gmsj, Georgia, serif;
}

.hand__mail i { display: inline-block; font-style: normal; transition: transform 0.3s ease; }
.hand__mail:hover { background: var(--accent, #8e2a24); }
.hand__mail:hover i { transform: translateX(4px); }

.hand__copy {
  margin-left: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 400 11px/1 vcsm, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a7a7a;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

.hand__copy:hover { color: #1a1a1a; }

.hand-elsewhere {
  max-width: 1100px;
  margin: auto auto 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: baseline;
  gap: 40px;
}

.hand-elsewhere ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hand-elsewhere a {
  font: 500 22px/1.2 gmsj, Georgia, serif;
  color: #1a1a1a;
  text-decoration: none;
}

.hand-elsewhere a span {
  margin-left: 10px;
  font: 400 12px/1 vcsm, sans-serif;
  color: #8a8a8a;
}

.hand-elsewhere a:hover { color: var(--accent, #8e2a24); }

/* Large screens: the hand, the button and the links grow with the window instead of leaving its lower half empty. */
@media (min-width: 1500px) {
  .hand,
  .hand-elsewhere { max-width: 1400px; }
  .hand__title { font-size: 104px; }
  .hand__intro { font-size: 18px; }
  .hand__mail { padding: 18px 26px 17px; }
  .hand__mail-address { font-size: 22px; }
}

/* Phones, and pads held upright: stacked. The text sits above, the hand below at full width, and the button
   just under the video, right-aligned, where the finger points. (Pads held sideways keep the side-by-side
   layout, with a little more room for the button; see below.) */
@media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) {
  .hand__text { position: static; max-width: 560px; }
  .hand__stage { width: 100%; margin: 8px 0 128px; }
  .hand__cta { left: auto; right: 0; top: calc(100% + 2px); align-items: flex-end; }
  .hand__mail { padding: 14px 18px 13px; }
  .hand__mail-address { font-size: 17px; }
  .hand__copy { margin-left: 0; margin-right: 18px; }
}

@media (min-width: 901px) and (max-width: 1180px) and (orientation: landscape) {
  .hand__stage { width: 64%; margin-right: 22%; }
  .hand__mail { padding: 14px 18px 13px; }
  .hand__mail-address { font-size: 17px; }
}

/* Pads: Elsewhere stays on one line. */
@media (min-width: 901px) and (max-width: 1180px) {
  .hand-elsewhere { gap: 28px; }
  .hand-elsewhere ul { flex-wrap: nowrap; gap: 26px; }
  .hand-elsewhere a { font-size: 19px; }
  .hand-elsewhere a span { display: none; }
}

@media (max-width: 900px) {
  .hand { margin-top: 0; padding: 0 20px; }
  .hand__text { max-width: none; }
  /* Phones: Elsewhere is a slim bar fixed to the bottom of the screen, with the app icons. */
  .contact-wrap { min-height: 0; padding-bottom: 64px; }
  .hand-elsewhere {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    max-width: none;
    width: auto !important;
    margin: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #f2efea;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .hand-elsewhere ul { flex-direction: row; flex-wrap: nowrap; gap: 26px; }
  .hand-elsewhere a { font-size: 0; }
  .hand-elsewhere a span { display: none; }
  .hand-elsewhere .sicon { width: 30px; height: 24px; }
  html.menu-open .hand-elsewhere { display: none; }
  html[data-theme="dark"] .hand-elsewhere { background: #1b1916; border-top-color: rgba(255, 255, 255, 0.1); }
}

html[data-theme="dark"] .hand,
html[data-theme="dark"] .hand__title,
html[data-theme="dark"] .hand-elsewhere a { color: var(--ink-text); }
html[data-theme="dark"] .hand__intro { color: var(--ink-body); }
html[data-theme="dark"] .hand__mail { background: var(--ink-text); color: var(--ink-bg); }
html[data-theme="dark"] .hand__mail-label { color: #6f6a62; }
html[data-theme="dark"] .hand__mail:hover { background: var(--accent); color: var(--ink-bg); }
html[data-theme="dark"] .hand__copy { color: var(--ink-muted); }
html[data-theme="dark"] .hand-elsewhere { border-top-color: var(--ink-line); }
html[lang="zh-CN"] .hand__title { font-style: normal; }

/* ---------- Social link icons (scripts/social_icons.py): sidebar, phone menu, Contact ---------- */
.sicon {
  flex: none;
  width: 1.45em;
  height: 1.16em;
}

.side .social a {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

/* The sidebar shows the social links as a row of icons only. */
.side .social {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 14px !important;
}

.side .social .sicon { width: 25px; height: 20px; margin-left: -4px; }
.side .social a:first-child .sicon { margin-left: -5px; }

.hand-elsewhere a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hand-elsewhere .sicon { width: 26px; height: 21px; }

/* Contact: the content fills the window height, with the Elsewhere links pinned to the bottom of the window. */
.contact-wrap {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 48px);
}

.contact-wrap .hand,
.contact-wrap .hand-elsewhere { width: 100%; box-sizing: border-box; }

.contact-wrap .hand { margin-bottom: 72px; }