/* =========================================================
   SEAHOLM DRAWING & PAINTING
   Main static-site stylesheet
   ========================================================= */


/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

* {
  box-sizing: border-box;
}


html {
  -webkit-text-size-adjust: 100%;
}


body {
  min-height: 100vh;
  margin: 0;

  display: flex;
  flex-direction: column;

  background: #ffffff;
  color: #333333;

  font-family:
    -apple-system,
    system-ui,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  font-size: 16px;
  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
}


img {
  max-width: 100%;
}


a {
  color: inherit;
}


.site-wrap {
  width: min(1080px, calc(100% - 48px));
  margin-inline: auto;
}



/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: #ffffff;
}


.header-inner {
  min-height: 104px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;
}


.logo-link {
  display: block;
  flex: 0 0 auto;

  margin-left: -18px;

  line-height: 0;
}


.site-logo {
  display: block;

  width: 297px;
  height: auto;
}



/* ---------------------------------------------------------
   MAIN NAVIGATION
   --------------------------------------------------------- */

.site-nav {
  width: 470px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 0;

  white-space: nowrap;
}


.site-nav > a,
.section-nav-main {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #202020;

  font-size: 15px;
  font-weight: 600;
  line-height: 19.5px;

  text-decoration: none;
  text-transform: uppercase;

  white-space: nowrap;

  transition: color 0.12s ease;
}


.site-nav > a:hover,
.section-nav-main:hover {
  color: #777777;
}


/* Main active-page indicator */

.site-nav > a[aria-current="page"]::after,
.section-nav-main[aria-current="page"]::after {
  content: "";

  position: absolute;

  left: -12px;
  right: -12px;
  bottom: -34px;

  height: 2px;

  background: #777777;
}



/* ---------------------------------------------------------
   SECTION SUB-NAVIGATION
   Used by Gallery, Available, and future parent pages.
   The active child is center-locked beneath its parent.
   --------------------------------------------------------- */

.section-nav-group {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;
}


/*
   Creates real white space inside the sticky header for
   a page that has child navigation.
*/

.section-header-space {
  height: 64px;
}


/*
   The active child link is the normal-flow item in this
   absolute block. The block is therefore exactly as wide
   as that active link, keeping its center locked to the
   exact center of the parent link above.
*/

.section-subnav {
  position: absolute;

  top: calc(100% + 70px);
  left: 50%;

  width: max-content;

  transform: translateX(-50%);

  white-space: nowrap;

  z-index: 1;
}


.section-subnav-left,
.section-subnav-right {
  position: absolute;

  top: 0;

  display: flex;
  align-items: center;

  gap: 26px;

  width: max-content;
}


.section-subnav-left {
  right: calc(100% + 26px);
}


.section-subnav-right {
  left: calc(100% + 26px);
}


.section-subnav a {
  position: relative;

  display: block;

  color: #202020;

  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;

  text-decoration: none;
  text-transform: uppercase;

  white-space: nowrap;

  transition: color 0.12s ease;
}


.section-subnav a:hover {
  color: #777777;
}


.section-subnav a[aria-current="page"]::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -5px;

  height: 1px;

  background: #777777;
}


/* ---------------------------------------------------------
   AVAILABLE HELP PILL
   Utility link within the Available submenu
   --------------------------------------------------------- */

.section-subnav a.section-help-pill {
  display: block;

  padding: 0 8px;

  border: 0;
  border-radius: 999px;

  box-shadow: inset 0 0 0 1px #aaaaaa;

  background: #ffffff;
  color: #555555;

  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;

  transition:
    color 0.12s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}


.section-subnav a.section-help-pill:hover {
  color: #202020;
  background: #f7f7f7;
  box-shadow: inset 0 0 0 1px #777777;
}


.section-subnav a.section-help-pill[aria-current="page"] {
  color: #202020;
  background: #f3f3f3;
  box-shadow: inset 0 0 0 1px #666666;
}


/* The pill itself indicates the active Help page,
   so it does not need the standard child underline. */

.section-subnav a.section-help-pill[aria-current="page"]::after {
  display: none;
}




/* ---------------------------------------------------------
   MAIN
   --------------------------------------------------------- */

.site-main {
  flex: 1;
}



/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.intro-page {
  display: grid;

  grid-template-columns:
    minmax(0, 530px)
    minmax(0, 1fr);

  column-gap: 60px;

  align-items: start;

  padding-top: 64px;
  padding-bottom: 90px;
}


.intro-copy {
  max-width: 530px;

  padding-top: 65px;
}


.intro-copy p {
  margin: 0 0 24px 0;

  font-size: 18px;
  line-height: 1.5;
}


.intro-lead {
  margin-bottom: 18px !important;

  font-size: 18px !important;
  font-weight: 600;
  line-height: 1.2;
}


.intro-copy p:last-child {
  margin-bottom: 0;
}


.intro-copy .answers-signoff {
  margin-bottom: 0;
}


.intro-hero {
  width: min(100%, 470px);

  margin: 0;

  justify-self: end;
}


.intro-hero img {
  display: block;

  width: 100%;
  height: auto;
}




/* ---------------------------------------------------------
   AVAILABLE INTRO
   --------------------------------------------------------- */

.available-intro {
  max-width: 620px;

  padding-top: 80px;
}


.available-intro p {
  margin: 0 0 24px 0;

  font-size: 18px;
  line-height: 1.5;
}


.available-intro p:last-child {
  margin-bottom: 0;
}


.available-intro-title {
  font-size: 18px;
  font-weight: 600;

  text-decoration: none;
}


.available-intro-title:hover {
  color: #777777;
}


.available-page .artifacts-gallery {
  padding-top: 48px;
}


/* ---------------------------------------------------------
   GALLERY / PROCESS / ARTIFACTS / EXPENSIVE
   --------------------------------------------------------- */

.gallery {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: 28px;
  row-gap: 44px;

  padding-top: 80px;
  padding-bottom: 80px;
}


.artifacts-gallery,
.expensive-gallery {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


.artwork {
  margin: 0;
}


.art-box {
  width: 100%;
  aspect-ratio: 1 / 1;

  padding: 6px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;


  background: #000000;
}


.art-link {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 0;
}


.art-box img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}



/* ---------------------------------------------------------
   ARTWORK CAPTIONS
   --------------------------------------------------------- */

.art-caption {
  margin-top: 13px;

  text-align: left;

  color: #333333;

  font-size: 15px;
  line-height: 1.5;
}


.art-caption-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;

  gap: 8px;
}


.art-title {
  font-weight: 600;
}


.art-medium {
  margin-top: 2px;

  font-weight: 400;
}


.art-dimensions {
  margin-top: 0;

  font-weight: 400;
}


.art-year {
  margin-top: 0;

  font-weight: 400;
}



/* ---------------------------------------------------------
   PURCHASE PILL
   Existing class name retained for site compatibility.
   --------------------------------------------------------- */

.availability-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 8px;

  border: 1px solid #888888;
  border-radius: 999px;

  color: #444444;
  background: #ffffff;

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;

  text-decoration: none;

  transition:
    color 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}


.availability-pill:hover {
  color: #202020;
  background: #f3f3f3;
  border-color: #555555;
}




/* Artifact captions keep the purchase pill on its own line.
   The pill inherits the caption font size so the BUY action and
   price remain easy to read. */

.artifact-pill-row {
  margin-top: 6px;
}


.artifacts-gallery .availability-pill,
.expensive-gallery .availability-pill {
  font-size: inherit;
  font-weight: 600;
}




/* ---------------------------------------------------------
   EXPENSIVE SHIPPING DESTINATION SELECTOR
   Native details/summary: no JavaScript required.
   --------------------------------------------------------- */

.shipping-choice {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.shipping-choice > summary.availability-pill {
  cursor: pointer;
  list-style: none;
}

.shipping-choice > summary::-webkit-details-marker {
  display: none;
}

.shipping-choice > summary:focus-visible,
.shipping-choice-link:focus-visible {
  outline: 2px solid #555555;
  outline-offset: 3px;
}

.shipping-choice-options {
  width: min(320px, calc(100vw - 48px));
  max-width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #ffffff;
}

.shipping-choice-heading {
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 600;
}

.shipping-choice-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #aaaaaa;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.shipping-choice-link + .shipping-choice-link {
  margin-top: 8px;
}

.shipping-choice-link:hover {
  background: #f3f3f3;
  border-color: #555555;
}

.shipping-choice-total {
  font-weight: 600;
  white-space: nowrap;
}

.shipping-choice-note {
  margin: 10px 0 0;
  color: #666666;
  font-size: 12px;
  line-height: 1.45;
}

/* ---------------------------------------------------------
   ANSWERS
   --------------------------------------------------------- */

.answers-page {
  padding-top: 80px;
  padding-bottom: 100px;
}


.answers-copy {
  max-width: 780px;
}


.answers-copy p {
  margin: 0 0 24px 0;
}


.answers-copy .answers-signoff {
  margin-top: 36px;
  margin-bottom: 4px;
}


.answers-copy .answers-email {
  margin-bottom: 0;
}


.answers-email a {
  font-weight: 600;
  text-decoration: none;
}


.answers-email a:hover {
  text-decoration: underline;
}




/* ---------------------------------------------------------
   HELP
   --------------------------------------------------------- */

.help-page {
  padding-top: 80px;
  padding-bottom: 100px;
}


.help-copy {
  max-width: 780px;
}


.help-title {
  margin: 0 0 28px 0;

  color: #333333;

  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}


.help-intro {
  margin: 0 0 48px 0;

  font-size: 18px;
  line-height: 1.6;
}


.help-item {
  margin: 0 0 36px 0;
}


.help-item h2,
.help-contact h2,
.help-subscribe h2 {
  margin: 0 0 8px 0;

  color: #333333;

  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}


.help-item p,
.help-contact p,
.help-subscribe p {
  margin: 0;

  font-size: 18px;
  line-height: 1.6;
}


.help-copy a {
  font-weight: 600;
  text-decoration: none;
}


.help-copy a:hover {
  text-decoration: underline;
}


.help-contact {
  margin-top: 52px;
  padding-top: 32px;

  border-top: 1px solid #dddddd;
}


.help-subscribe {
  margin-top: 44px;
}




/* ---------------------------------------------------------
   TOKYO SOLOS
   --------------------------------------------------------- */

.tokyo-solos {
  padding-top: 80px;
  padding-bottom: 100px;
}


.tokyo-solos-title {
  width: 80%;

  margin: 0 auto 28px auto;

  color: #333333;

  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}


.tokyo-solos-intro {
  margin-top: 0;
  margin-bottom: 70px;
}

.tokyo-solos-intro + .tokyo-solo-entry {
  margin-top: 70px;
}


.tokyo-solo-entry {
  margin: 0;
}


.tokyo-solo-entry + .tokyo-solo-entry {
  margin-top: 96px;
  padding-top: 96px;

  border-top: 1px solid #dddddd;
}


.tokyo-solo-heading {
  width: 80%;

  margin: 0 auto 24px auto;

  color: #333333;

  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
}


.tokyo-solo-image {
  width: 80%;

  margin-right: auto;
  margin-left: auto;
}


.tokyo-solo-image img {
  display: block;

  width: 100%;
  height: auto;
}


.tokyo-solo-copy {
  width: 80%;
  max-width: none;

  margin: 34px auto 0 auto;
}


.tokyo-solo-copy p {
  margin: 0 0 28px 0;

  font-size: 18px;
  line-height: 1.65;

  text-align: justify;
  text-justify: inter-word;
}


.tokyo-solo-copy p:last-child {
  margin-bottom: 0;
}


.tokyo-solo-japanese {
  line-height: 1.8 !important;
}


.tokyo-solo-photo-block {
  margin-top: 46px;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.site-footer {
  background: #000000;
  color: #ffffff;

  text-align: center;

  font-size: 16px;
}


.site-footer .site-wrap {
  padding-top: 20px;
  padding-bottom: 20px;
}


.site-footer p {
  margin: 0;
}


.site-footer a {
  font-weight: 600;
  text-decoration: none;
}


.site-footer a:hover {
  text-decoration: underline;
}



/* ---------------------------------------------------------
   TABLET / SMALL DESKTOP
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {

  .header-inner {
    min-height: auto;

    padding-top: 28px;
    padding-bottom: 26px;

    flex-direction: column;
    align-items: flex-start;

    gap: 24px;
  }


  .logo-link {
    margin-left: -12px;
  }


  .site-nav {
    width: 100%;

    justify-content: flex-start;
    flex-wrap: wrap;

    gap: 20px 28px;
  }


  .site-nav > a[aria-current="page"]::after,
  .section-nav-main[aria-current="page"]::after {
    bottom: -9px;
  }


  .section-header-space {
    height: 52px;
  }


  .section-subnav {
    top: calc(100% + 26px);
  }


  .section-subnav-left,
  .section-subnav-right {
    gap: 24px;
  }


  .section-subnav-left {
    right: calc(100% + 24px);
  }


  .section-subnav-right {
    left: calc(100% + 24px);
  }


  .intro-page {
    grid-template-columns:
      minmax(0, 340px)
      minmax(0, 1fr);

    column-gap: 44px;

    padding-top: 60px;
  }


  .intro-copy {
    padding-top: 80px;
  }


  .answers-page {
    padding-top: 60px;
  }


  .help-page {
    padding-top: 60px;
  }


  .tokyo-solos {
    padding-top: 60px;
    padding-bottom: 80px;
  }


  .tokyo-solos-title {
    width: 90%;

    margin-bottom: 26px;
  }


  .tokyo-solos-intro {
    margin-bottom: 58px;
  }


  .tokyo-solo-heading,
  .tokyo-solo-image,
  .tokyo-solo-copy {
    width: 90%;
  }


  .tokyo-solo-entry + .tokyo-solo-entry {
    margin-top: 76px;
    padding-top: 76px;
  }


  .available-intro {
    padding-top: 60px;
  }


  .available-page .artifacts-gallery {
    padding-top: 40px;
  }


  .gallery {
    padding-top: 60px;

    column-gap: 20px;
    row-gap: 38px;
  }


  .artifacts-gallery,
  .expensive-gallery {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}



/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media screen and (max-width: 560px) {

  /* On phones, allow the header to scroll away with the page. */
  .site-header {
    position: static;
  }

  .site-wrap {
    width: calc(100% - 24px);
  }


  .site-logo {
    width: min(297px, 85vw);
  }


  .logo-link {
    margin-left: 0;
  }


  /* Phone navigation: three links on row one, two on row two. */
  .site-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 18px;
    justify-items: center;
    align-items: center;
  }


  .site-nav > :nth-child(-n + 3) {
    grid-column: span 2;
  }


  .site-nav > :nth-child(n + 4) {
    grid-column: span 3;
  }


  /* Keep active-page underlines sized to the link, not the grid cell. */
  .site-nav > a,
  .site-nav > .section-nav-group {
    justify-self: center;
  }


  .site-nav > a,
  .section-nav-main {
    font-size: 14px;
    line-height: 1.3;
  }


  /*
     On phones, child navigation becomes its own centered row
     beneath the main navigation. This avoids collisions when
     the main navigation wraps while preserving the desktop
     center-lock behavior above 560px.
  */

  .gallery-page .site-nav,
  .available-page .site-nav {
    position: relative;

    padding-bottom: 42px;
  }


  .gallery-page .section-nav-group,
  .available-page .section-nav-group {
    position: static;
  }


  .gallery-page .section-header-space,
  .available-page .section-header-space {
    height: 0;
  }


  .gallery-page .section-subnav,
  .available-page .section-subnav {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    width: 100%;

    transform: none;
  }


  .gallery-page .section-subnav-left,
  .gallery-page .section-subnav-right,
  .available-page .section-subnav-left,
  .available-page .section-subnav-right {
    position: static;

    display: flex;
    align-items: center;

    gap: 18px;

    width: auto;
  }


  .section-subnav a {
    font-size: 12px;
  }


  .intro-page {
    display: block;

    padding-top: 48px;
    padding-bottom: 70px;
  }


  .intro-copy {
    max-width: none;

    padding-top: 0;
  }


  .intro-copy p {
    font-size: 17px;
  }


  .intro-hero {
    width: 100%;
    max-width: 480px;

    margin: 48px auto 0 auto;
  }


  .answers-page {
    padding-top: 48px;
    padding-bottom: 70px;
  }


  .help-page {
    padding-top: 48px;
    padding-bottom: 70px;
  }


  .help-title {
    font-size: 22px;
  }


  .help-intro,
  .help-item p,
  .help-contact p,
  .help-subscribe p {
    font-size: 17px;
  }


  .help-item h2,
  .help-contact h2,
  .help-subscribe h2 {
    font-size: 17px;
  }


  .tokyo-solos {
    padding-top: 48px;
    padding-bottom: 70px;
  }


  .tokyo-solos-title {
    width: 100%;

    margin-bottom: 24px;

    font-size: 22px;
  }


  .tokyo-solos-intro {
    margin-bottom: 48px;
  }


  .tokyo-solo-heading,
  .tokyo-solo-image,
  .tokyo-solo-copy {
    width: 100%;
  }


  .tokyo-solo-heading {
    margin-bottom: 18px;

    font-size: 18px;
  }


  .tokyo-solo-copy {
    margin-top: 26px;
  }


  .tokyo-solo-copy p {
    margin-bottom: 24px;

    font-size: 17px;
    line-height: 1.6;
  }


  .tokyo-solo-entry + .tokyo-solo-entry {
    margin-top: 60px;
    padding-top: 60px;
  }


  .tokyo-solo-photo-block {
    margin-top: 34px;
  }


  .available-intro {
    max-width: none;

    padding-top: 44px;
  }


  .available-intro p,
  .available-intro-title {
    font-size: 17px;
  }


  .available-page .artifacts-gallery {
    padding-top: 32px;
  }


  .gallery {
    grid-template-columns: 1fr;

    padding-top: 44px;
    padding-bottom: 60px;

    row-gap: 38px;
  }


  .artifacts-gallery,
  .expensive-gallery {
    grid-template-columns: 1fr;
  }


  .art-caption {
    font-size: 14px;
  }


  .availability-pill {
    font-size: 9px;
  }


  .site-footer {
    font-size: 14px;
  }

}

/* ---------------------------------------------------------
   GALLERY CLICK PAGES
   One shared detail file; :target reveals the clicked artwork.
   Main image is image 01. Optional _alt images begin at 02.
   --------------------------------------------------------- */

.gallery-detail {
  padding-top: 80px;
  padding-bottom: 100px;
}

/* Show only the selected click page, even without JavaScript. */
.gallery-detail-item {
  display: none;
  scroll-margin-top: 190px;
}

.gallery-detail-item:target,
.gallery-detail-page.detail-ready .gallery-detail-item.is-active {
  display: block;
}

/* A directly opened detail file defaults to its first artwork. */
.gallery-detail-page:not(:has(.gallery-detail-item:target)):not(.detail-ready)
.gallery-detail-item:first-child {
  display: block;
}

.gallery-detail-main,
.gallery-detail-alt,
.gallery-detail-video,
.gallery-detail-caption {
  width: 80%;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

.gallery-detail-main {
  margin-top: 0;
  margin-bottom: 0;
}

.gallery-detail-main img,
.gallery-detail-alt img {
  display: block;
  width: 100%;
  height: auto;
  border: 5px solid #000000;
}

/* Unlisted YouTube artwork videos use the same width and black frame as images. */
.gallery-detail-video {
  margin-top: 30px;
  margin-bottom: 0;
  overflow: hidden;
  border: 5px solid #000000;
  background: #000000;
}

.gallery-detail-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.gallery-detail-caption {
  margin-top: 18px;
  color: #333333;
  font-size: 15px;
  line-height: 1.5;
}

.gallery-detail-alts {
  margin-top: 54px;
}

.gallery-detail-alt {
  margin-top: 0;
  margin-bottom: 44px;
}

.gallery-detail-alt:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 900px) {
  .gallery-detail {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .gallery-detail-main,
  .gallery-detail-alt,
  .gallery-detail-video,
  .gallery-detail-caption {
    width: 90%;
  }
}

@media screen and (max-width: 560px) {
  .gallery-detail {
    padding-top: 44px;
    padding-bottom: 70px;
  }

  .gallery-detail-main,
  .gallery-detail-alt,
  .gallery-detail-video,
  .gallery-detail-caption {
    width: 100%;
  }

  .gallery-detail-caption {
    font-size: 14px;
  }

  .gallery-detail-alts {
    margin-top: 38px;
  }

  .gallery-detail-alt {
    margin-bottom: 30px;
  }
}

/* ---------------------------------------------------------
   PROCESS — CHRONOLOGICAL ENTRIES
   Text on the left, images/videos on the right; newest first.
   --------------------------------------------------------- */

.process-entries {
  padding-top: 80px;
  padding-bottom: 100px;
}

.process-entry {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: 48px;
  align-items: start;
}

/* Separate successive entries with a single quiet rule. */
.process-entry + .process-entry {
  margin-top: 72px;
  padding-top: 72px;
  border-top: 1px solid #dddddd;
}

.process-entry-date {
  display: block;
  margin-bottom: 10px;
  color: #666666;
  font-size: 15px;
  line-height: 1.5;
}

.process-entry-title {
  margin: 0 0 18px;
  color: #333333;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

.process-entry-copy p {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.55;
}

.process-entry-copy p:last-child {
  margin-bottom: 0;
}

.process-entry-media {
  min-width: 0;
}

.process-video {
  width: 100%;
  overflow: hidden;
  border: 5px solid #000000;
  background: #000000;
}

.process-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

@media screen and (max-width: 900px) {
  .process-entries {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .process-entry {
    column-gap: 28px;
  }
}

@media screen and (max-width: 560px) {
  .process-entries {
    padding-top: 44px;
    padding-bottom: 70px;
  }

  .process-entry {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .process-entry + .process-entry {
    margin-top: 52px;
    padding-top: 52px;
  }

  .process-entry-title {
    font-size: 22px;
  }

  .process-entry-copy p {
    font-size: 17px;
  }
}


/* =========================================================
   PHONE NAVIGATION — VERTICAL MAIN MENU / INLINE SUBMENUS
   Only affects screens 560px wide or narrower.
   Desktop and tablet layouts above 560px remain unchanged.
   ========================================================= */
@media screen and (max-width: 560px) {

  /* Maintain the earlier mobile-only non-sticky header. */
  .site-header {
    position: static;
  }

  .header-inner {
    gap: 37px;
    padding-bottom: 10px;
  }

  /* One main link per row, flush-left with space for the bullet. */
  .site-nav,
  .gallery-page .site-nav,
  .available-page .site-nav {
    position: static;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    justify-items: unset;
    width: 100%;
    padding: 0 0 0 14px;
    gap: 8px;
  }

  .site-nav > a,
  .site-nav > .section-nav-group {
    grid-column: auto;
    justify-self: auto;
    align-self: flex-start;
  }

  .site-nav > a,
  .section-nav-main {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
  }

  /* Main sections: bullet only, never the desktop underline. */
  .site-nav > a[aria-current="page"]::after,
  .section-nav-main[aria-current="page"]::after {
    content: none;
    display: none;
  }

  .site-nav > a[aria-current="page"]::before,
  .section-nav-main[aria-current="page"]::before {
    content: "•";
    position: absolute;
    left: -14px;
    top: 0;
    color: #202020;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }

  /* Put each submenu immediately under its own main link. */
  .site-nav > .section-nav-group,
  .gallery-page .section-nav-group,
  .available-page .section-nav-group {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
  }

  .section-header-space,
  .gallery-page .section-header-space,
  .available-page .section-header-space {
    height: 0;
  }

  .section-subnav,
  .gallery-page .section-subnav,
  .available-page .section-subnav {
    position: static;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    margin-top: 5px;
    margin-bottom: 4px;
    padding-left: 14px;
    column-gap: 21px;
    row-gap: 8px;
    transform: none;
    white-space: normal;
  }

  /* Existing markup nests earlier/later links around the active link.
     Flatten those groups to keep the visual order consistent. */
  .section-subnav-left,
  .section-subnav-right,
  .gallery-page .section-subnav-left,
  .gallery-page .section-subnav-right,
  .available-page .section-subnav-left,
  .available-page .section-subnav-right {
    display: contents;
  }

  .section-subnav a {
    position: relative;
    display: block;
    padding: 0;
    color: #202020;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
  }

  /* Consistent order regardless of which child is currently selected. */
  .section-subnav a[href="gallery.html"],
  .section-subnav a[href="available.html"] { order: 1; }
  .section-subnav a[href="gallery-2.html"],
  .section-subnav a[href="expensive.html"] { order: 2; }
  .section-subnav a[href="gallery-3.html"],
  .section-subnav a[href="help.html"] { order: 3; }

  /* Quiet separators between submenu items (outside underlines). */
  .section-subnav a[href="gallery-2.html"]::before,
  .section-subnav a[href="gallery-3.html"]::before,
  .section-subnav a[href="expensive.html"]::before,
  .section-subnav a[href="help.html"]::before {
    content: "|";
    position: absolute;
    left: -12px;
    top: 0;
    color: #999999;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
  }

  /* Child items: underline only the active page. */
  .section-subnav a[aria-current="page"]::after,
  .section-subnav a.section-help-pill[aria-current="page"]::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: #777777;
  }

  /* HELP is a normal child link on phones, not a desktop-style pill. */
  .section-subnav a.section-help-pill,
  .section-subnav a.section-help-pill[aria-current="page"],
  .section-subnav a.section-help-pill:hover {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #202020;
    background: transparent;
    font-size: 12px;
    line-height: 20px;
  }
}


/* =========================================================
   MOBILE HEADER REFINEMENT — 27 OCTOBER 2026
   Phone-only adjustment. Nothing in this block applies at
   widths above 560px; desktop CSS remains unchanged.
   ========================================================= */
@media screen and (max-width: 560px) {

  /* Keep the logo in the bullet column, 14px to the left of
     the main-menu text, and let it occupy more header width.
     Preserve the image's original proportions. */
  .logo-link {
    margin-left: 0;
  }

  .site-logo {
    width: min(350px, calc(100vw - 24px));
    height: auto;
  }

  /* Submenus start exactly at the main menu's text edge. */
  .section-subnav,
  .gallery-page .section-subnav,
  .available-page .section-subnav {
    padding-left: 0;
  }

  /* HELP: outlined pill, with the existing 12px font size. */
  .section-subnav a.section-help-pill {
    display: block;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px #aaaaaa;
    color: #555555;
    background: #ffffff;
    font-size: 12px;
    line-height: 20px;
  }

  .section-subnav a.section-help-pill:hover {
    color: #202020;
    background: #f7f7f7;
    box-shadow: inset 0 0 0 1px #777777;
  }

  /* Filled dark pill marks active HELP; no underline. */
  .section-subnav a.section-help-pill[aria-current="page"],
  .section-subnav a.section-help-pill[aria-current="page"]:hover {
    padding: 0 8px;
    border-radius: 999px;
    color: #ffffff;
    background: #222222;
    box-shadow: inset 0 0 0 1px #222222;
  }

  .section-subnav a.section-help-pill[aria-current="page"]::after {
    content: none;
    display: none;
  }
}


/* =========================================================
   INTRO ARTWORK — PHONE-ONLY COMPOSITION
   A duplicate of the existing Intro artwork is displayed
   beside the vertical main menu at 560px and below.
   The original figure retains its position above 560px.
   ========================================================= */
.intro-header-hero {
  display: none;
}

@media screen and (max-width: 560px) {
  /* On INTRO only, the logo spans the top; the navigation
     and artwork share the next row. All other pages retain
     their existing header. */
  .intro-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 36.5%) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 37px;
    align-items: start;
  }

  .intro-header-inner > .logo-link {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .intro-header-inner > .site-nav {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }

  .intro-header-inner > .intro-header-hero {
    display: block;
    grid-column: 2;
    grid-row: 2;
    width: calc(100% - 14px);
    min-width: 0;
    margin: 0;
  }

  .intro-header-hero img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* The full-width copy follows the entire artwork, not
     just the shorter navigation column. */
  .intro-page {
    padding-top: 20px;
  }

  .intro-page .intro-hero {
    display: none;
  }
}


/* =========================================================
   INTRO MOBILE FINISHING ADJUSTMENTS — 27 OCTOBER 2026
   INTRO only, and phones 560px wide or narrower.
   Keep the logo's left edge fixed; extend its right edge
   slightly beyond the image. Align copy to menu text.
   ========================================================= */
@media screen and (max-width: 560px) {
  .intro-header-inner .site-logo {
    /* The image ends 14px inside the page; the logo extends
       about 12px beyond it without moving its left edge. */
    width: calc(100vw - 26px);
    height: auto;
  }

  .intro-page .intro-copy {
    /* Main links begin 14px inside the wrap, after the bullet
       column. The right edge is eased inward just 4px. */
    padding-left: 14px;
    padding-right: 4px;
  }
}

/* =========================================================
   MOBILE LOGO SIZE — ALL PAGES
   Carefully scoped to phone widths only. No changes to
   layout positioning, image geometry, or page backgrounds.
   ========================================================= */
@media screen and (max-width: 560px) {
  .site-logo,
  .intro-header-inner .site-logo {
    /* Keep the left edge anchored, with the M just past
       the right edge of the INTRO artwork at phone widths. */
    width: calc(100vw - 32px);
    height: auto;
  }
}


/* =========================================================
   MOBILE REFINEMENT — PROCESS + TOKYO SOLOS, 28 OCT 2026
   Match the approved INTRO text margins (14px extra left,
   4px extra right).  On Tokyo Solos only, present each
   exhibition's images before its associated writing.
   Desktop styling and INTRO body remain untouched.
   ========================================================= */
@media screen and (max-width: 560px) {
  .process-entries {
    padding-left: 14px;
    padding-right: 4px;
  }

  .tokyo-solos {
    /* 12px site-wrap margin + 14px inner padding = 26px each side. */
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Preserve the desktop's natural content order on phones:
     heading, main photo, English copy, guest montage. */
  .tokyo-solo-japanese {
    display: none;
  }

  /* Avoid extra bottom spacing where a hidden translation followed English. */
  .tokyo-solo-copy p:not(.tokyo-solo-japanese) {
    margin-bottom: 0;
  }
}


/* =========================================================
   PROCESS — MOBILE MEDIA BEFORE BODY COPY
   Phone only: date, title, video/image, then writing.
   Keeps the existing HTML and the desktop two-column layout.
   ========================================================= */
@media screen and (max-width: 560px) {
  .process-entry {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 0;
  }

  /* Let the children of the copy column participate in the
     mobile entry layout without changing their source order. */
  .process-entry-copy {
    display: contents;
  }

  .process-entry-date {
    order: 1;
  }

  .process-entry-title {
    order: 2;
  }

  .process-entry-media {
    order: 3;
    margin-bottom: 24px;
  }

  /* Any paragraphs or other writing follow the media,
     retaining their original order within each entry. */
  .process-entry-copy > :not(.process-entry-date):not(.process-entry-title) {
    order: 4;
  }
}

/* =========================================================
   GALLERY — NATURAL-ASPECT ART FRAMES (PHONE ONLY)
   Pages One / Two / Three. Keep the new 4px black
   surround, but let the image determine the frame height.
   All desktop styles and artwork detail pages are untouched.
   ========================================================= */
@media screen and (max-width: 560px) {
  /* Match the INTRO body-copy inset within the site wrapper. */
  .gallery-page .gallery {
    padding-left: 14px;
    padding-right: 4px;
  }

  /* Remove the fixed square; the black surround now follows
     the image's own rectangular or square proportions. */
  .gallery-page .gallery .art-box {
    aspect-ratio: auto;
    height: auto;
    display: block;
    padding: 4px;
  }

  .gallery-page .gallery .art-link {
    display: block;
    width: 100%;
    height: auto;
  }

  .gallery-page .gallery .art-box img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}


/* =========================================================
   AVAILABLE + CLICK PAGES — APPROVED MOBILE ARTWORK TREATMENT
   28 October 2026 — phones only (<= 560px).
   Same insets as INTRO: 14px left + 4px right within
   the existing 12px mobile .site-wrap margins.
   The frame follows each original image's natural aspect ratio;
   a 4px black surround matches GALLERY pages One–Three.
   No desktop/tablet styles are changed.
   ========================================================= */
@media screen and (max-width: 560px) {
  /* Artifacts and Expensive explanatory text. */
  .available-page .available-intro {
    padding-left: 14px;
    padding-right: 4px;
  }

  /* Artifacts and Expensive listing cards. Does not affect
     the Gallery pages, which retain their approved rules. */
  .available-page .gallery {
    padding-left: 14px;
    padding-right: 4px;
  }

  .available-page .gallery .art-box {
    aspect-ratio: auto;
    height: auto;
    display: block;
    padding: 4px;
  }

  .available-page .gallery .art-link {
    display: block;
    width: 100%;
    height: auto;
  }

  .available-page .gallery .art-box img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Help uses the same text inset, without altering its copy. */
  .available-page .help-page {
    padding-left: 14px;
    padding-right: 4px;
  }

  /* All three click-page systems: Gallery, Artifacts, Expensive.
     Insets apply to artwork, alternates, video and captions. */
  .gallery-detail-page .gallery-detail {
    padding-left: 14px;
    padding-right: 4px;
  }

  .gallery-detail-page .gallery-detail-main img,
  .gallery-detail-page .gallery-detail-alt img {
    border-width: 4px;
  }

  /* Existing embedded videos keep their 16:9 aspect ratio.
     Their black surround matches the artwork's 4px frame. */
  .gallery-detail-page .gallery-detail-video {
    border-width: 4px;
  }
}