/* Artwork layout only. Shared case UI: Hanamizuki + site navigation. */
main p { text-wrap: pretty; }
main { line-break: strict; word-break: normal; overflow-wrap: break-word; }
.hero__content { min-width:0; }
.hero h1 .hero__client-name { display:inline-block; white-space:nowrap; }
.hero-meta { display:flex; flex-wrap:wrap; gap:20px 34px; margin:0 0 20px; }
.hero-meta dt { margin-bottom:5px; color:var(--color-accent-light); font-family:var(--font-latin); font-size:.68rem; font-weight:800; letter-spacing:.14em; }
.hero-meta dd { margin:0; font-size:.92rem; font-weight:700; }
.hero__visual img { width:auto; max-width:100%; max-height:360px; object-fit:contain; }
.brochure-figure { margin:0; }
.brochure-figure a { display:block; padding:clamp(16px,3.5vw,48px); border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-surface); }
.brochure-figure img { width:100%; height:auto; }
figcaption { margin-top:12px; color:var(--color-muted); font-size:.78rem; line-height:1.7; }
.proposal-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.proposal-grid figure { min-height:0; margin:0 0 18px; }
.proposal-grid img { width:100%; max-height:none; }
.proposal-grid article>p { margin:10px 0 0; color:var(--color-muted); font-size:.9rem; }
.final-stack { display:grid; gap:64px; }
.spread-heading { max-width:780px; margin-bottom:24px; }
.spread-heading h3 { margin-bottom:14px; color:var(--color-primary); font-size:clamp(1.25rem,2.8vw,1.72rem); line-height:1.5; }
.spread-heading>p:last-child { color:var(--color-muted); margin:0; }
@media(max-width:767px){
 .hero__visual img { max-height:290px; max-width:100%; width:auto; }
 .proposal-grid { grid-template-columns:1fr; gap:20px; }
 .proposal-grid article { padding:16px; }
 .proposal-grid figure { min-height:0; }
 .proposal-grid img { max-height:none; }
 .proposal-grid span { font-size:.72rem; }
 .proposal-grid h3 { font-size:1rem; }
 .proposal-grid article>p { font-size:.9rem; }
 .final-stack { gap:44px; }
}

/* Editorial pacing keeps the brochure as the visual peak of the case. */
.final-stack { gap: clamp(72px, 9vw, 128px); }
.final-piece--lead { width: min(100%, 480px); margin-inline: auto; }
.final-piece--lead .brochure-figure a { padding: clamp(10px, 1.4vw, 18px); border-radius: 4px; }
.final-piece--support { display: grid; grid-template-columns: minmax(220px, .42fr) minmax(0, 1.58fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.final-piece--support .spread-heading { margin: 0; }
.final-piece--support .brochure-figure { width: 100%; }
.case-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1100px; }
.case-related__card { max-width: none; height: 100%; }
@media (max-width: 767px) {
  .final-piece--lead { width: min(78vw, 304px); }
  .final-piece--lead .brochure-figure a { padding: 10px; }
  .final-piece--support { display: block; }
  .final-piece--support .spread-heading { margin-bottom: 20px; }
  .case-related__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Proposal artwork leads; the explanatory copy stays secondary. */
.proposal-grid article { padding: 0; border: 0; background: transparent; box-shadow: none; }
.proposal-grid article figure a { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.proposal-grid article > span { display: block; margin-top: 2px; }
@media (max-width: 767px) {
  .proposal-grid article { padding: 0; }
}
@media (max-width: 767px) {
  .final-stack { gap: 44px; }
}

/* Desktop artwork scale follows the editorial hierarchy: lead spread, then detail spreads. */
@media (min-width: 768px) {
  .final-piece--lead { width: min(100%, 480px); margin-inline: auto; }
  .final-piece--support .brochure-figure { width: min(100%, 740px); }
}

/* Hero art: the brochure leads, with the outer spread as a quiet contextual layer. */
@media (min-width: 768px) {
  .hero__visual {
    position: relative;
    min-height: 500px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .hero-art {
    position: relative;
    display: grid;
    width: min(100%, 600px);
    height: min(52vw, 620px);
    margin-inline: auto;
    place-items: center;
  }
  .hero__visual .hero-art__back {
    position: absolute;
    z-index: 0;
    width: 120%;
    max-width: none;
    opacity: .23;
    transform: translate(12%, 7%);
  }
  .hero__visual .hero-art__cover {
    position: relative;
    z-index: 1;
    width: min(85%, 460px);
    max-width: none;
    max-height: 620px;
    object-fit: contain;
    filter: drop-shadow(0 26px 36px rgba(0, 0, 0, .3));
  }
  .final-piece--support {
    align-items: start;
  }
  .final-piece--support .brochure-figure {
    width: min(100%, 740px);
    justify-self: start;
  }
}
@media (max-width: 767px) {
  .hero__visual {
    min-height: 320px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .hero-art { position: relative; width: 100%; height: 320px; display: grid; place-items: center; }
  .hero__visual .hero-art__back { display: none; }
  .hero__visual .hero-art__cover { width: auto; max-width: 118%; max-height: 320px; object-fit: contain; }
  .proposal-grid article figure a {
    width: 86%;
    margin-inline: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
  }
  .proposal-grid article figure a img { border-radius: var(--radius-card); }
}
/* Desktop Hero: keep the brochure title as two intentional lines. */
@media (min-width: 768px) {
  .hero__content {
    position: relative;
    z-index: 2;
    width: min(560px, calc(100% + 220px));
  }
  .hero h1 {
    white-space: nowrap;
  }
}
@media (max-width: 767px) {
  main > .hero:not(.home-hero):not(.product-hero):not(.graphic-service-hero):not(.web-service-hero) h1 {
    font-size: clamp(1.8rem, 7.7vw, 2rem) !important;
    line-height: 1.3 !important;
  }
  .final-stack h3 { text-wrap: balance; }
}
@media (max-width: 767px) {
  .proposal-grid article figure a {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .proposal-grid article figure a img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
  }
}
.button--outline-light{border-color:rgba(255,255,255,.55);color:#fff}