/* The glass shell and orbit are copied from the reference portfolio.css.
   These rules only fit the existing training results into its image aperture. */
#case-portfolio {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: clip;
  scroll-margin-top: 72px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

/* Reserve the initial orbit's space before its small module arrives. The
   normal first paint never exposes the no-JavaScript document grid. */
html:is([data-case-portfolio='pending'],[data-case-portfolio='ready']) #case-portfolio {
  min-height: max(527px, calc(min(290px, 30.5vw) + 239px));
  position: relative;
}
html[data-case-portfolio='pending'] #case-portfolio:empty::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 50%;
  width: min(580px, 61vw);
  height: 396px;
  box-sizing: border-box;
  transform: translateX(-50%);
  border: 1px solid #ffffffdb;
  border-radius: 14px;
  background: linear-gradient(140deg, #fff9e9fa, #ffeddef0);
  box-shadow: inset 0 1px 1px #fffffff2, 0 16px 46px #603f1c1f;
  pointer-events: none;
}
html[data-case-portfolio='fallback'] #case-portfolio { display: none; }
@media (max-width: 699px) {
  html:is([data-case-portfolio='pending'],[data-case-portfolio='ready']) #case-portfolio { min-height: 602px; }
  html[data-case-portfolio='pending'] #case-portfolio:empty::before {
    top: 35px;
    width: min(430px, 86vw);
    height: 487px;
    border-radius: 11px;
  }
}

#case-portfolio .portfolio-card-footer { min-height: 88px; }
#case-portfolio .portfolio-link-label {
  position: absolute;
  top: 0;
  right: 15px;
  display: flex;
  align-items: center;
  height: 31px;
  padding: 0;
}

.portfolio-case-panel { min-height: 275px; background: #fffdfa; }
.portfolio-case-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Six time-zero renders of ribbons.js, packed vertically. This preserves
     the actual folds and highlights while the GPU module loads or fails. */
  background-image: url('./ribbon-stills-desktop.webp');
  background-size: 100% 600%;
  background-position: center var(--ribbon-position, 0%);
  background-repeat: no-repeat;
  pointer-events: none;
}
@media (max-width: 699px) {
  .portfolio-case-panel::before { background-image: url('./ribbon-stills-mobile.webp'); }
}
.portfolio-case-panel[data-ribbon-ready='true']::before { opacity: 0; }
.portfolio-ribbon-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.portfolio-ribbon-canvas[hidden] { display: none; }
.portfolio-case-content {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: center;
  gap: 24px;
  min-height: 100%;
  padding: 24px;
  color: #2d2420;
}
.portfolio-case-result, .portfolio-case-voice { min-width: 0; }
.portfolio-case-voice { padding-top: 24px; }
.portfolio-case-content p { margin: 0; }
.portfolio-case-content .case-bento-logo {
  display: block;
  width: auto;
  max-width: 150px;
  height: 40px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 20px;
}
.portfolio-case-content img[src*='senn_logo'] { height: 50px; }
.portfolio-case-content .case-bento-logo-text {
  display: flex;
  align-items: center;
  max-width: none;
  font: 700 24px/1.2 'Noto Serif JP', serif;
  color: var(--case-logo, var(--case-accent));
}
.portfolio-case-content .case-bento-keyword {
  margin-bottom: 10px;
  color: var(--case-accent);
  font: 700 40px/1.15 'Noto Serif JP', serif;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.portfolio-case-content .case-bento-unit {
  margin-left: 3px;
  color: #3b322c;
  font: 600 15px/1.3 'Noto Sans JP', sans-serif;
  letter-spacing: 0;
}
.portfolio-case-content .case-bento-arrow-inline { font-size: 24px; margin: 0 4px; }
.portfolio-case-content .case-bento-keyword-sub,
.portfolio-case-content .case-bento-substat,
.portfolio-case-content .case-bento-attribution {
  color: #3b322c;
  font: 500 12px/1.65 'Noto Sans JP', sans-serif;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: break-word;
}
.portfolio-case-content .case-bento-substat { margin-top: 6px; }
.portfolio-case-content .case-bento-substat b { color: var(--case-accent); }
.portfolio-case-content .case-bento-quote {
  margin-bottom: 14px;
  color: var(--case-accent);
  font: 600 19px/1.85 'Noto Serif JP', serif;
  letter-spacing: 0;
  overflow-wrap: normal;
}

/* Wrap approved Japanese copy between phrases, never through a word. */
.text-unit { display: inline-block; }
@media (min-width: 700px) and (max-width: 949px) {
  .portfolio-case-content { gap: 16px; padding: 20px; }
  .portfolio-case-content .case-bento-quote { font-size: clamp(14px, 2vw, 19px); }
}

/* A readable document remains available if the module cannot load. */
.case-portfolio-fallback { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 24px; }
.case-portfolio-fallback [data-bento] { display: block; padding: 28px; border: 1px solid #ded1c5; border-radius: 14px; background: #fffdfa; color: #2d2420; text-decoration: none; }
.case-portfolio-fallback img { max-width: 150px; max-height: 70px; width: auto; height: auto; }
.case-portfolio-fallback h3, .case-portfolio-fallback p { margin: 16px 0 0; }
.case-portfolio-fallback .case-bento-keyword { font-size: 32px; }
.case-portfolio-fallback .case-bento-unit { font-size: 16px; }
.case-portfolio-fallback .case-bento-arrow { display: none; }

@media (max-width: 699px) {
  #case-portfolio .portfolio-case-panel { aspect-ratio: auto; }
  .portfolio-case-content { grid-template-columns: 1fr; gap: 20px; padding: 22px; min-height: 366px; }
  .portfolio-case-voice { padding-top: 0; }
  .portfolio-case-content .case-bento-logo { height: 35px; margin-bottom: 16px; }
  .portfolio-case-content img[src*='senn_logo'] { height: 45px; }
  .portfolio-case-content .case-bento-quote { font-size: 18px; line-height: 1.6; margin-bottom: 8px; }
  .portfolio-case-content .case-bento-quote br { display: none; }
  .portfolio-case-content .case-bento-keyword { font-size: 38px; }
  .portfolio-case-content .case-bento-keyword-sub,
  .portfolio-case-content .case-bento-substat,
  .portfolio-case-content .case-bento-attribution { font-size: 13px; }
  #case-portfolio .portfolio-card-footer { min-height: 92px; }
  #case-portfolio .portfolio-category { font-size: 12px; line-height: 1.5; }
  #case-portfolio .portfolio-link-label { height: 27px; right: 11px; }
}