/* =====================================================
     PORTFOLIO TOP ONLY

     Blog article UI must never appear here.
     ===================================================== */


  body.blog-detail-page:has(.portfolio-section)
  .nexus-article-actions,

  body.blog-detail-page:has(.portfolio-section)
  .nexus-author-footer,

  body.blog-detail-page:has(.portfolio-section)
  .nexus-prevnext-divider,

  body.blog-detail-page:has(.portfolio-section)
  .nexus-prevnext-nav,

  body.blog-detail-page:has(.portfolio-section)
  .series-neighbor-nav,

  body.blog-detail-page:has(.portfolio-section)
  .related-posts,

  body.blog-detail-page:has(.portfolio-section)
  .article-after-related {

    display: none !important;

    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
  }


  /* =====================================================
     Remove BlogArticle's bottom space on Portfolio TOP
     ===================================================== */

  body.blog-detail-page:has(.portfolio-section)
  .article-content {

    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }


  body.blog-detail-page:has(.portfolio-section)
  .article-card {

    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }


  body.blog-detail-page:has(.portfolio-section)
  .article-column {

    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    min-height: 0 !important;
  }


  body.blog-detail-page:has(.portfolio-section)
  .blog-layout {

    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    min-height: 0 !important;
  }


  /* =====================================================
     Existing site Footer
     Bring it directly up after Portfolio content
     ===================================================== */

  body.blog-detail-page:has(.portfolio-section)
  .site-footer {

    margin-top: 0 !important;
  }/* =========================================================
   PORTFOLIO + PROJECTS
   ========================================================= */

.portfolio-section,
.project-index-section {
  font-family:
    "Host Grotesk Variable",
    "Inter Variable",
    "Helvetica Neue",
    Arial,
    sans-serif;
}


/* =========================================================
   REMAINS 鬩包ｽｯ繝ｻ・ｶ驛｢譎｢・ｽ・ｻPAGE HEADER
   Match FRAGMENTS typography
   ========================================================= */

body:has(.portfolio-section) .article-header-archive {
  display: block !important;
  margin-bottom: 40px !important;
}

body:has(.portfolio-section) .article-header-archive .archive-heading {
  width: 100% !important;
}

body:has(.portfolio-section) .article-header-archive .archive-title {
  margin: 0 !important;

  color: #e7e8e4 !important;

  font-family:
    "Host Grotesk Variable",
    "Inter Variable",
    "Helvetica Neue",
    Arial,
    sans-serif !important;

  font-size:
    clamp(2.85rem, 4.35vw, 4.7rem) !important;

  font-weight: 800 !important;

  line-height: 0.9 !important;

  letter-spacing: -0.065em !important;

  text-transform: uppercase !important;
}

body:has(.portfolio-section) .article-header-archive .archive-kicker {
  margin: 0 0 11px !important;

  color: #b7ff00 !important;

  font-family:
    "Maple Mono",
    monospace !important;

  font-size: 0.66rem !important;

  font-weight: 700 !important;

  line-height: 1.2 !important;

  letter-spacing: 0.16em !important;

  text-transform: uppercase !important;
}

/* Portfolio index is not a blog post.
   Remove date / word count / reading time. */

body:has(.portfolio-section) .article-header-archive .meta-line,
body:has(.portfolio-section) .article-header-archive .group-meta-line {
  display: none !important;
}

/* Move subtitle underneath REMAINS */

body:has(.portfolio-section) .article-header-archive .archive-copy {
  display: block !important;

  width: min(610px, 100%) !important;
  max-width: 610px !important;

  margin: 14px 0 0 !important;
  padding: 0 0 15px !important;

  text-align: left !important;

  position: relative;
}

body:has(.portfolio-section) .article-header-archive .archive-subtitle {
  width: 100% !important;

  margin: 0 !important;

  color: #858b83 !important;

  font-family:
    "Inter Variable",
    "Helvetica Neue",
    Arial,
    sans-serif !important;

  font-size: 0.82rem !important;

  font-weight: 400 !important;

  line-height: 1.52 !important;

  letter-spacing: -0.01em !important;

  text-align: left !important;
}


body:has(.portfolio-section) .article-header-archive .archive-copy::after {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      rgba(255, 82, 0, 0.02) 0%,
      rgba(255, 82, 0, 0.06) 18%,
      rgba(255, 82, 0, 0.16) 42%,
      rgba(255, 82, 0, 0.40) 70%,
      rgba(255, 82, 0, 0.88) 100%
    );
}
body:has(.portfolio-section) .article-header-archive .archive-note {
  display: none !important;
}


/* =========================================================
   PORTFOLIO
   ========================================================= */

.portfolio-section {
  margin-top: 24px;

  font-family:
    "Host Grotesk Variable",
    "Inter Variable",
    "Helvetica Neue",
    Arial,
    sans-serif;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.portfolio-section-header {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 22px;

  padding: 0 0 14px;

  border-bottom:
    1px solid rgba(255,255,255,.09);
}


.portfolio-section-kicker {
  margin: 0 0 7px;

  color: #b7ff00;

  font-family:
    "Maple Mono",
    monospace;

  font-size: .60rem;
  font-weight: 700;

  letter-spacing: .15em;
}


.portfolio-section-header h2 {
  margin: 0;

  color: #d9dcd6;

  font-family:
    "Host Grotesk Variable",
    "Inter Variable",
    Arial,
    sans-serif;

  font-size:
    clamp(1.30rem, 2vw, 1.75rem);

  font-weight: 650;

  line-height: 1;

  letter-spacing: -.035em;
}


.portfolio-index {
  padding-bottom: 2px;

  color: #656b64;

  font-family:
    "Maple Mono",
    monospace;

  font-size: .58rem;

  letter-spacing: .12em;
}


/* =========================================================
   VISUAL GRID
   ========================================================= */

.portfolio-grid {
  display: grid;

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

  grid-auto-rows: 52px;

  gap: 14px;

  align-items: stretch;

  grid-auto-flow: dense;
}


.visual-card {
  min-width: 0;
}


.visual-card-main {
  grid-column: 1 / 9;
  grid-row: span 9;
}


.visual-card-tall {
  grid-column: 9 / 13;
  grid-row: span 12;
}


.visual-card-small {
  grid-column: 1 / 6;
  grid-row: span 6;
}


.visual-card-fragment {
  grid-column: 6 / 9;
  grid-row: span 6;
}
.visual-card-wide {
  grid-column: 1 / 8;
  grid-row: span 7;
}


.visual-card-portrait {
  grid-column: 8 / 13;
  grid-row: span 10;
}


.visual-card-extra-small {
  grid-column: 1 / 5;
  grid-row: span 6;
}


.visual-card-extra-wide {
  grid-column: 5 / 13;
  grid-row: span 6;
}


.visual-link {
  display: flex;

  flex-direction: column;

  height: 100%;

  color: inherit;

  text-decoration: none;
}


.visual-image {
  position: relative;

  flex: 1;

  min-height: 0;

  margin: 0;

  overflow: hidden;

  box-sizing: border-box;

  border:
    1px solid rgba(255,255,255,.12);

  background: #080908;

  transition:
    border-color 260ms ease,
    box-shadow 260ms ease;
}


.visual-image::after {
  position: absolute;

  inset: 0;

  content: "";

  border: 0;

  pointer-events: none;
}


.visual-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    grayscale(100%)
    brightness(.78)
    contrast(1.08);

  transform:
    scale(1.001);

  transition:
    filter 500ms ease,
    transform 700ms cubic-bezier(.2,.7,.2,1);
}


.visual-link:hover .visual-image img {
  filter:
    grayscale(35%)
    brightness(.88)
    contrast(1.05);

  transform:
    scale(1.025);
}


.visual-link:hover .visual-image {
  outline-color:
    rgba(255,82,0,.82);

  box-shadow:
    0 0 18px rgba(255,82,0,.16);
}

.visual-card:hover .visual-image,
.visual-link:hover .visual-image,
.visual-card:focus-within .visual-image {
  border-color:
    rgba(255,82,0,.9);

  box-shadow:
    0 0 18px rgba(255,82,0,.18);
}

.visual-link:hover .visual-image::after {
  border: 0;
}
.visual-overlay {
  position: absolute;

  z-index: 2;

  right: 13px;
  bottom: 12px;

  padding: 4px 7px;

  color: #dfe2dc;

  font-family:
    "Maple Mono",
    monospace;

  font-size: .54rem;
  font-weight: 650;

  letter-spacing: .11em;

  background:
    rgba(5,6,5,.74);

  opacity: 0;

  transform:
    translateY(5px);

  transition:
    opacity 220ms ease,
    transform 220ms ease;
}


.visual-link:hover .visual-overlay {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   IMAGE CAPTIONS
   ========================================================= */

.visual-meta {
  display: flex;

  flex: none;

  gap: 14px;

  align-items: flex-start;
  justify-content: space-between;

  min-height: 52px;

  padding: 9px 1px 0;
}


.visual-type {
  display: block;

  margin: 0 0 3px;

  color: #b7ff00;

  font-family:
    "Maple Mono",
    monospace;

  font-size: .53rem;
  font-weight: 700;

  letter-spacing: .12em;
}


.visual-meta h3 {
  margin: 0;

  color: #d8dad5;

  font-size: .78rem;
  font-weight: 580;

  line-height: 1.25;

  letter-spacing: -.01em;
}


.visual-year {
  color: #676c66;

  font-family:
    "Maple Mono",
    monospace;

  font-size: .55rem;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  body:has(.portfolio-section) .article-header-archive {
    margin-bottom: 32px !important;
  }


  body:has(.portfolio-section) .article-header-archive .archive-title {
    font-size:
      clamp(2.75rem, 14vw, 4.15rem) !important;
  }


  .portfolio-section-header {
    align-items: flex-start;
  }


  .portfolio-index {
    display: none;
  }


  .portfolio-grid {
    display: block;
  }


  .visual-card {
    margin-bottom: 30px;
  }


  .visual-image {
    aspect-ratio: 4 / 3;
  }


  .visual-card-tall .visual-image {
    aspect-ratio: 3 / 4;
  }

}



/* =========================================================
   TEXT REMAIN SAMPLE
   ========================================================= */

.text-remain {
  display: grid;

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

  gap: clamp(30px, 5vw, 78px);

  margin-top: 54px;

  padding:
    26px 0 30px;

  border-top:
    1px solid rgba(255, 255, 255, 0.09);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.09);
}


.text-remain-index {
  display: flex;

  flex-direction: column;

  gap: 7px;

  color: #686e67;

  font-family:
    "Maple Mono",
    monospace;

  font-size: 0.56rem;

  font-weight: 650;

  letter-spacing: 0.12em;
}


.text-remain-body {
  max-width: 760px;
}


.text-remain-kicker {
  margin: 0 0 8px;

  color: #b7ff00;

  font-family:
    "Maple Mono",
    monospace;

  font-size: 0.58rem;

  font-weight: 700;

  letter-spacing: 0.14em;
}


.text-remain-body h3 {
  margin: 0 0 21px;

  color: #e1e3de;

  font-family:
    "Host Grotesk Variable",
    "Inter Variable",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:
    clamp(1.6rem, 2.7vw, 2.45rem);

  font-weight: 700;

  line-height: 0.98;

  letter-spacing: -0.045em;
}


.text-remain-copy {
  max-width: 66ch;

  margin:
    0 0 15px;

  color: #959b94;

  font-family:
    "Inter Variable",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 0.84rem;

  line-height: 1.72;

  letter-spacing: -0.006em;
}


.text-remain-status {
  display: inline-block;

  margin-top: 10px;

  color: #6f756e;

  font-family:
    "Maple Mono",
    monospace;

  font-size: 0.52rem;

  letter-spacing: 0.12em;
}


@media (max-width: 760px) {

  .text-remain {
    grid-template-columns: 1fr;

    gap: 18px;

    margin-top: 38px;
  }


  .text-remain-index {
    flex-direction: row;

    justify-content: space-between;
  }

}
/* =========================================================
   PROJECT INDEX
   ========================================================= */

.project-index-section {
  margin-top: 86px;
}


.project-index-header {
  display: flex;

  gap: 30px;

  align-items: flex-end;
  justify-content: space-between;

  padding:
    0 0 18px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.10);
}


.project-index-kicker {
  display: flex;

  gap: 9px;

  align-items: center;

  margin-bottom: 9px;

  color: #858b83;

  font-family:
    "Maple Mono",
    monospace;

  font-size: 0.61rem;

  letter-spacing: 0.14em;
}


.project-index-kicker span {
  width: 15px;
  height: 1px;

  background: #ff5200;
}


.project-index-count {
  color: #747a73;

  font-family:
    "Maple Mono",
    monospace;

  font-size: 0.61rem;

  letter-spacing: 0.09em;
}


/* =========================================================
   PROJECT CARDS
   ========================================================= */

.project-grid {
  display: grid;

  grid-template-columns: 1fr;

  gap: 7px;

  margin-top: 14px;
}


.project-card {
  display: grid;

  grid-template-columns:
    50px
    minmax(0, 1fr)
    minmax(220px, auto);

  gap: 18px;

  align-items: center;

  min-height: 92px;

  padding: 14px 18px;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius: 5px;

  background: #090a09;

  transition:
    border-color 200ms ease,
    background 200ms ease,
    transform 200ms ease;
}


.project-card:hover {
  border-color:
    rgba(255, 82, 0, 0.68);

  background: #0c0d0c;

  transform:
    translateX(2px);
}


.project-sequence {
  color: #60655f;

  font-family:
    "Maple Mono",
    monospace;

  font-size: 0.62rem;

  letter-spacing: 0.08em;
}


.project-card-body {
  min-width: 0;
}


.project-card-heading {
  display: flex;

  gap: 9px;

  align-items: center;
}


.project-icon {
  flex: none;

  color:
    var(--project-icon-color, #b7ff00);
}


.project-card h3 {
  margin: 0;

  font-size: 0.94rem;
  font-weight: 600;

  letter-spacing: -0.02em;
}


.project-card h3 a {
  color: #e1e3de;

  text-decoration: none;
}


.project-card h3 a:hover {
  color: #ffffff;
}


.project-card-body > p {
  margin: 5px 0 0;

  overflow: hidden;

  color: #747a73;

  font-size: 0.70rem;

  line-height: 1.5;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.project-card-footer {
  display: flex;

  flex-wrap: wrap;

  gap: 6px 10px;

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

  color: #737972;

  font-family:
    "Maple Mono",
    monospace;

  font-size: 0.58rem;
}


.project-card-footer a {
  color: inherit;

  text-decoration: none;
}


.project-card-footer a:hover {
  color: #f5f5f2;
}


.project-tags {
  display: flex;

  gap: 5px;
}


.project-tags small {
  padding: 2px 6px;

  border:
    1px solid rgba(183, 255, 0, 0.20);

  border-radius: 3px;

  color: #9aad72;

  font-family:
    "Maple Mono",
    monospace;

  font-size: 0.54rem;
}


/* =========================================================
   EMPTY PROJECT STATE
   ========================================================= */

.project-empty {
  display: grid;

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

  gap: 18px;

  align-items: center;

  margin-top: 14px;

  padding: 19px 20px;

  border:
    1px solid rgba(255, 255, 255, 0.09);

  border-radius: 5px;

  background: #090a09;
}


.empty-index {
  color: #555a54;

  font-family:
    "Maple Mono",
    monospace;

  font-size: 0.62rem;
}


.project-empty h3 {
  margin: 0;

  color: #d8dbd5;

  font-size: 0.88rem;
  font-weight: 600;
}


.project-empty p {
  margin: 4px 0 0;

  color: #70766f;

  font-size: 0.68rem;
}


.empty-status {
  color: #b7ff00;

  font-family:
    "Maple Mono",
    monospace;

  font-size: 0.56rem;

  letter-spacing: 0.10em;
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes portfolio-pulse {

  0%,
  100% {
    opacity: 0.38;
  }

  50% {
    opacity: 1;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .portfolio-section {
    margin-top: 38px;
  }


  .portfolio-section-header,
  .project-index-header {
    align-items: flex-start;
  }


  .portfolio-index,
  .project-index-count {
    display: none;
  }


  .portfolio-grid {
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: none;

    gap: 28px;
  }


  .visual-card-main,
  .visual-card-tall,
  .visual-card-wide {
    grid-column: auto;
    grid-row: auto;
  }


  .visual-placeholder {
    height: min(72vw, 420px);
  }


  .visual-card-tall .visual-placeholder {
    height: min(105vw, 560px);
  }


  .project-index-section {
    margin-top: 66px;
  }


  .project-card {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    gap: 12px;
  }


  .project-card-footer {
    grid-column: 2;

    justify-content: flex-start;
  }


  .project-empty {
    grid-template-columns:
      34px
      minmax(0, 1fr);
  }


  .empty-status {
    grid-column: 2;
  }

}


@media (prefers-reduced-motion: reduce) {

  .portfolio-signal {
    animation: none;
  }

  .visual-placeholder,
  .project-card {
    transition: none;
  }

}


/* TEXT PORTFOLIO SAMPLE START */

.text-work {
  display: grid;

  grid-template-columns:
    minmax(90px, 145px)
    minmax(0, 760px);

  gap: clamp(34px, 6vw, 88px);

  margin-top: 72px;

  padding:
    31px 0 35px;

  border-top:
    1px solid rgba(255,255,255,.10);

  border-bottom:
    1px solid rgba(255,255,255,.10);
}


.text-work-rail {
  display: flex;

  flex-direction: column;

  gap: 8px;

  padding-top: 3px;

  font-family:
    "Maple Mono",
    monospace;

  font-size: .57rem;
  font-weight: 650;

  letter-spacing: .13em;
}


.text-work-number {
  color: #b7ff00;
}


.text-work-year {
  color: #5f655f;
}


.text-work-content {
  min-width: 0;
}


.text-work-kicker {
  margin: 0 0 11px;

  color: #6e756e;

  font-family:
    "Maple Mono",
    monospace;

  font-size: .59rem;
  font-weight: 650;

  letter-spacing: .14em;
}


.text-work h2 {
  max-width: 700px;

  margin:
    0 0 24px;

  color: #e5e7e2;

  font-family:
    "Host Grotesk Variable",
    "Inter Variable",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:
    clamp(2rem, 3.8vw, 3.45rem);

  font-weight: 750;

  line-height: .96;

  letter-spacing: -.055em;
}


.text-work-excerpt {
  max-width: 630px;
}


.text-work-excerpt p {
  margin:
    0 0 15px;

  color: #8f958e;

  font-family:
    "Inter Variable",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: .84rem;

  line-height: 1.75;

  letter-spacing: -.006em;
}


.text-work-footer {
  display: flex;

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

  gap: 20px;

  max-width: 630px;

  margin-top: 29px;

  padding-top: 12px;

  border-top:
    1px solid rgba(255,255,255,.055);

  font-family:
    "Maple Mono",
    monospace;

  font-size: .56rem;
  font-weight: 650;

  letter-spacing: .12em;
}


.text-work-footer > span {
  color: #686e68;
}


.text-work-footer a {
  display: inline-flex;

  gap: 9px;

  align-items: center;

  color: #b7ff00;

  text-decoration: none;

  transition:
    color 180ms ease,
    transform 180ms ease;
}


.text-work-footer a:hover {
  color: #ffffff;

  transform:
    translateX(3px);
}


/* PHOTO CAPTION SUPPORT */

.visual-caption {
  max-width: 46ch;

  margin: 7px 0 0;

  color: #777d76;

  font-family:
    "Inter Variable",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: .65rem;

  line-height: 1.55;
}


/* MOBILE */

@media (max-width: 760px) {

  .text-work {
    grid-template-columns: 1fr;

    gap: 19px;

    margin-top: 50px;

    padding:
      25px 0 28px;
  }


  .text-work-rail {
    flex-direction: row;

    justify-content: space-between;
  }


  .text-work h2 {
    font-size:
      clamp(1.9rem, 9vw, 2.8rem);
  }

}

/* TEXT PORTFOLIO SAMPLE END */


/* =========================================================
   REMAINS LIGHTBOX
   ========================================================= */

.remains-lightbox {
  position: fixed;

  z-index: 99999;

  inset: 0;

  display: none;

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

  padding:
    clamp(20px, 4vw, 60px);

  background:
    rgba(0, 0, 0, 0.94);

  backdrop-filter:
    blur(5px);
}


.remains-lightbox.is-open {
  display: flex;
}


.remains-lightbox-stage {
  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;
  height: 100%;
}


.remains-lightbox-image {
  display: block;

  width: auto;
  height: auto;

  max-width: min(92vw, 1280px);
  max-height: calc(100vh - 130px);

  object-fit: contain;

  border: 0;
  border-radius: 0 !important;

  box-shadow:
    0 0 50px rgba(0,0,0,.55);
}


.remains-lightbox-info {
  display: flex;

  gap: 18px;

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

  width: min(100%, 1100px);

  margin-top: 14px;

  padding-top: 9px;

  border-top:
    1px solid rgba(255,255,255,.09);
}


.remains-lightbox-label {
  color: #b7ff00;

  font-family:
    "Maple Mono",
    monospace;

  font-size: .80rem;
  font-weight: 700;

  letter-spacing: .14em;
}


.remains-lightbox-title {
  color: #b5bab3;

  font-family:
    "Maple Mono",
    monospace;

  font-size: .80rem;

  letter-spacing: .08em;
}


.remains-lightbox-close {
  position: absolute;

  z-index: 3;

  top: 22px;
  right: 27px;

  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  padding: 0;

  border:
    1px solid rgba(150,150,150,.48);

  border-radius: 50%;

  color: #d8ddd4;

  font-family:
    "Host Grotesk Variable",
    Arial,
    sans-serif;

  font-size: 1.35rem;
  font-weight: 400;

  line-height: 1;

  background:
    rgba(22,22,22,.86);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.04);

  cursor: pointer;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}


.remains-lightbox-close:hover,
.remains-lightbox-close:focus-visible {
  color: #b7ff00;

  border-color:
    rgba(183,255,0,.82);

  background:
    rgba(14,18,12,.92);

  box-shadow:
    0 0 14px rgba(183,255,0,.28),
    inset 0 0 10px rgba(183,255,0,.10);

  transform:
    scale(1.04);
}


body.remains-lightbox-open {
  overflow: hidden;
}


.visual-lightbox-trigger {
  cursor: zoom-in;
}


@media (max-width: 760px) {

  .remains-lightbox {
    padding:
      58px 12px 18px;
  }


  .remains-lightbox-image {
  display: block;

  width: auto;
  height: auto;

  max-width: min(92vw, 1280px);
  max-height: calc(100vh - 130px);

  object-fit: contain;

  border: 0;
  border-radius: 0 !important;

  box-shadow:
    0 0 50px rgba(0,0,0,.55);
}


  .remains-lightbox-close {
    top: 11px;
    right: 12px;

    width: 37px;
    height: 37px;
  }


  .remains-lightbox-info {
    gap: 8px;

    margin-top: 9px;
  }

}


/* REMAINS PHOTO RADIUS FINAL START */

/*
 * The frame, image and orange hover outline
 * all use exactly the same corner radius.
 */

.visual-image {
  border-radius: 8px !important;
}

.visual-image::after {
  border-radius: inherit !important;
}

.visual-image img {
  border-radius: inherit !important;
}

.visual-link:hover .visual-image::after {
  border-radius: inherit !important;
}
/* REMAINS PHOTO RADIUS FINAL END */

/* =========================================================
   REMAINS HEADER 鬩包ｽｯ繝ｻ・ｶ驛｢譎｢・ｽ・ｻFINAL WIDTH / GRADIENT
   ========================================================= */

/*
 * Keep the text compact, but allow the gradient rule
 * to continue across the full header width.
 */
body:has(.portfolio-section) .article-header-archive .archive-copy {
  width: 100% !important;
  max-width: none !important;
  padding-bottom: 17px !important;
}

/*
 * Text itself is deliberately limited to two lines
 * on desktop while the parent remains full width.
 */
body:has(.portfolio-section) .article-header-archive .archive-subtitle {
  display: block !important;
  width: 100% !important;
  max-width: 560px !important;
  text-wrap: balance;
}

/*
 * Preserve the existing orange direction:
 * almost invisible on the left,
 * increasingly bright toward the right edge.
 */
body:has(.portfolio-section) .article-header-archive .archive-copy::after {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  background: linear-gradient(
    90deg,
    rgba(255, 82, 0, 0.02) 0%,
    rgba(255, 82, 0, 0.05) 18%,
    rgba(255, 82, 0, 0.14) 42%,
    rgba(255, 82, 0, 0.38) 68%,
    rgba(255, 82, 0, 0.72) 86%,
    rgba(255, 82, 0, 0.96) 100%
  ) !important;
}

@media (max-width: 760px) {
  body:has(.portfolio-section) .article-header-archive .archive-subtitle {
    max-width: 100% !important;
    text-wrap: pretty;
  }
}


body:has(.portfolio-section) .article-header-archive .archive-subtitle {
  width: auto !important;
  max-width: none !important;
  white-space: pre-line !important;
  text-wrap: nowrap !important;
}
/* REMAINS HEADER 鬩包ｽｯ繝ｻ・ｶ驛｢譎｢・ｽ・ｻFINAL WIDTH / GRADIENT END */


/* PORTFOLIO 鬩包ｽｯ繝ｻ・ｶ驛｢譎｢・ｽ・ｻFULL SHELL WIDTH */
body:has(.portfolio-section) .article-prose {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* REMAINS MOBILE TITLE SIZE START */
@media (max-width: 760px) {
  body:has(.portfolio-section) .article-header-archive .archive-title {
    font-size: 2.65rem !important;
  }
}
/* REMAINS MOBILE TITLE SIZE END */



/* PORTFOLIO MOSAIC V1 START */
/* Scoped to the portfolio page; does not alter blog articles or project cards. */
body.blog-detail-page:has(.portfolio-section) .portfolio-section,
body.blog-detail-page:has(.portfolio-section) .portfolio-grid {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.blog-detail-page:has(.portfolio-section) .portfolio-grid {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  grid-auto-rows: 24px !important;
  grid-auto-flow: row !important;
  gap: 10px !important;
  align-items: stretch !important;
}

body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card {
  box-sizing: border-box !important;
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The eight-item rhythm repeats for the second group of eight photos. */
body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-main {
  grid-column: span 7 !important;
  grid-row: span 12 !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-tall {
  grid-column: span 5 !important;
  grid-row: span 12 !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-small {
  grid-column: span 4 !important;
  grid-row: span 9 !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-fragment {
  grid-column: span 3 !important;
  grid-row: span 9 !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-wide {
  grid-column: span 5 !important;
  grid-row: span 9 !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-portrait {
  grid-column: span 5 !important;
  grid-row: span 12 !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-extra-small {
  grid-column: span 3 !important;
  grid-row: span 12 !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-extra-wide {
  grid-column: span 4 !important;
  grid-row: span 12 !important;
}

/* A photograph and its clickable area always occupy exactly one grid cell. */
body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-link {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 5px !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-image {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 5px !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 5px !important;
}

/* Caption is available on desktop hover/focus and in the existing lightbox. */
body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-meta {
  position: absolute !important;
  z-index: 3 !important;
  inset: auto 0 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  padding: 38px 12px 11px !important;
  margin: 0 !important;
  gap: 8px !important;
  align-items: end !important;
  background: linear-gradient(transparent, rgba(0,0,0,.88)) !important;
  opacity: 0 !important;
  transform: translateY(5px) !important;
  transition: opacity .2s ease, transform .2s ease !important;
  pointer-events: none !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-meta > div {
  min-width: 0 !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-type {
  font-size: .75rem !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-meta h3 {
  font-size: clamp(.7rem, 1.05vw, .9rem) !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-year {
  flex: none !important;
  font-size: .90rem !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-overlay {
  top: 10px !important;
  right: 10px !important;
  bottom: auto !important;
}
body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-link:hover .visual-meta,
body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-link:focus-visible .visual-meta {
  opacity: 1 !important;
  transform: none !important;
}

@media (min-width: 761px) and (max-width: 1100px) {
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-auto-rows: 18px !important;
    gap: 8px !important;
  }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-main { grid-column: span 5 !important; grid-row: span 12 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-tall { grid-column: span 3 !important; grid-row: span 12 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-small { grid-column: span 3 !important; grid-row: span 9 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-fragment { grid-column: span 2 !important; grid-row: span 9 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-wide { grid-column: span 3 !important; grid-row: span 9 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-portrait { grid-column: span 3 !important; grid-row: span 12 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-extra-small { grid-column: span 2 !important; grid-row: span 12 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-extra-wide { grid-column: span 3 !important; grid-row: span 12 !important; }
}

@media (max-width: 760px) {
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-auto-rows: clamp(12px, 3.9vw, 17px) !important;
    grid-auto-flow: row !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-main { grid-column: span 4 !important; grid-row: span 10 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-tall { grid-column: span 2 !important; grid-row: span 12 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-small { grid-column: span 2 !important; grid-row: span 12 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-fragment { grid-column: span 2 !important; grid-row: span 8 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-wide { grid-column: span 2 !important; grid-row: span 8 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-portrait { grid-column: span 2 !important; grid-row: span 12 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-extra-small { grid-column: span 2 !important; grid-row: span 12 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid > .visual-card-extra-wide { grid-column: span 4 !important; grid-row: span 9 !important; }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-meta,
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-overlay {
    display: none !important;
  }
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-link,
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-image,
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-image img {
    border-radius: 3px !important;
  }
}

@media (hover: none) {
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-meta,
  body.blog-detail-page:has(.portfolio-section) .portfolio-grid .visual-overlay {
    display: none !important;
  }
}
/* PORTFOLIO MOSAIC V1 END */

/* PORTFOLIO BLOCK SEQUENCE V1 START */
/* Gallery blocks reuse the existing mosaic rules without changing their sizing. */
.portfolio-section .portfolio-gallery-block {
  width: 100%;
  min-width: 0;
}
.portfolio-section .portfolio-gallery-block > .portfolio-grid {
  min-width: 0;
}
.portfolio-section .portfolio-gallery-block + .portfolio-gallery-block,
.portfolio-section .text-remain + .portfolio-gallery-block {
  margin-top: clamp(38px, 6vw, 76px);
}
.portfolio-section .portfolio-gallery-label {
  margin: 0 0 16px;
  color: #b7ff00;
  font-family: "Maple Mono", monospace;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .12em;
}
/* PORTFOLIO BLOCK SEQUENCE V1 END */

/* PORTFOLIO INTERACTION FIX START */

body.blog-detail-page:has(.portfolio-section)
.portfolio-grid .visual-image::after {
  z-index: 4;
  box-sizing: border-box;
  border: 1px solid transparent !important;
  border-radius: inherit !important;
  pointer-events: none;
  transition: border-color 220ms ease;
}

body.blog-detail-page:has(.portfolio-section)
.portfolio-grid .visual-link:hover .visual-image::after,
body.blog-detail-page:has(.portfolio-section)
.portfolio-grid .visual-link:focus-visible .visual-image::after {
  border-color: #b44718 !important;
}

body.blog-detail-page:has(.portfolio-section)
.portfolio-grid .visual-card:hover .visual-image,
body.blog-detail-page:has(.portfolio-section)
.portfolio-grid .visual-link:hover .visual-image,
body.blog-detail-page:has(.portfolio-section)
.portfolio-grid .visual-card:focus-within .visual-image {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* PORTFOLIO INTERACTION FIX END */


/* REMAINS LIGHTBOX ZOOM START */

.remains-lightbox-image {
  cursor: zoom-in;
}

.remains-lightbox-image:focus-visible {
  outline: 1px solid #b7ff00;
  outline-offset: 4px;
}

.remains-lightbox.is-zoomed {
  padding: 8px;
  background: #000;
}

.remains-lightbox.is-zoomed .remains-lightbox-stage {
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.remains-lightbox.is-zoomed .remains-lightbox-image {
  width: auto;
  height: auto;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  object-fit: contain;
  cursor: zoom-out;
  box-shadow: none;
}

.remains-lightbox.is-zoomed .remains-lightbox-info {
  display: none;
}

.remains-lightbox.is-zoomed .remains-lightbox-close {
  z-index: 10;
}

@media (max-width: 760px) {
  .remains-lightbox.is-zoomed {
    padding: 4px;
  }

  .remains-lightbox.is-zoomed .remains-lightbox-image {
    max-width: calc(100vw - 8px);
    max-height: calc(100vh - 8px);
    max-height: calc(100dvh - 8px);
  }
}

/* REMAINS LIGHTBOX ZOOM END */