/* ============================================================
   brand.html - page-specific stylesheet
   PC-first / breakpoints: 1200px, 960px, 568px
============================================================ */

/* ------------------------------------------------------------
   Portfolio blocks (BETRS / JUNE5TH / mana / Yamato)
------------------------------------------------------------ */
.portfolio { padding: 160px 0; background: var(--c_white); }
.portfolio-alt { background: var(--c_bg_alt); }
.portfolio_inner {
  display: flex;
  align-items: center;
  gap: 70px;
}
.portfolio_inner-reverse { flex-direction: row-reverse; }

.portfolio_media {
  position: relative;
  width: 528px;
  flex-shrink: 0;
  overflow: hidden;
}
.portfolio_media img { width: 100%; height: 352px; object-fit: cover; }
.portfolio_media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
}

.portfolio_body { flex: 1; min-width: 0; }
.portfolio_name { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.portfolio_title { font-size: 48px; font-weight: 500; color: var(--c_black); letter-spacing: 0.04em; margin: 0; }
.portfolio_title_jp { font-size: 14px; letter-spacing: 0.1em; color: var(--c_label); }
.portfolio_subtitle { font-size: 14px; letter-spacing: 0.15em; color: var(--c_label); margin: 0 0 32px; }
.portfolio_tagline {
  font-style: italic;
  font-size: 24px;
  color: var(--c_accent);
  letter-spacing: 0.05em;
  margin: 0 0 32px;
}
.portfolio_text { letter-spacing: 0.04em; margin: 0 0 40px; }
.portfolio_tags { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 40px; }
.portfolio_tags li {
  border: 1px solid var(--c_border);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--c_text);
  padding: 9px 17px;
}

.portfolio_link,
.portfolio_status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  letter-spacing: 0.15em;
}
.portfolio_link { color: var(--c_dark); transition: color 0.3s var(--ease); }
.portfolio_link:hover { color: var(--c_accent); }
.portfolio_link::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--c_accent);
  flex-shrink: 0;
}
.portfolio_link::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 10px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5H14M9 1L13 5L9 9' stroke='black' stroke-width='1' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5H14M9 1L13 5L9 9' stroke='black' stroke-width='1' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
.portfolio_link_line { width: 40px; height: 1px; background: var(--c_accent); flex-shrink: 0; }
.portfolio_link_line-muted { background: var(--c_muted); }
.portfolio_status_badge {
  border: 1px dashed var(--c_muted);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--c_label);
  padding: 9px 17px;
}

@media (max-width: 1200px) {
  .portfolio { padding: 120px 0; }
  .portfolio_inner { gap: 56px; }
  .portfolio_media { width: 420px; }
  .portfolio_media img { height: 300px; }
  .portfolio_title { font-size: 40px; }
}
@media (max-width: 960px) {
  .portfolio { padding: 88px 0; }
  .portfolio_inner,
  .portfolio_inner-reverse { flex-direction: column; }
  .portfolio_media { width: 100%; order: -1; margin-bottom: 32px; }
  .portfolio_media img { height: 60vw; max-height: 420px; }
}
@media (max-width: 568px) {
  .portfolio { padding: 64px 0; }
  .portfolio_title { font-size: 30px; }
  .portfolio_tagline { font-size: 20px; }
  .portfolio_text { margin-bottom: 32px; }
  .portfolio_tags { margin-bottom: 32px; }
}

/* ------------------------------------------------------------
   Partnership CTA
------------------------------------------------------------ */
.portfolio_cta { padding: 160px 0; background: var(--c_bg_alt); text-align: center; }
.portfolio_cta_inner { max-width: 768px; margin: 0 auto; }
.portfolio_cta .section_label { text-align: center; margin: 0 0 24px; }
.portfolio_cta_heading {
  font-size: 36px;
  font-weight: 500;
  color: var(--c_accent);
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin: 0 0 32px;
}
.portfolio_cta_text {
  letter-spacing: 0.04em;
  max-width: 576px;
  margin: 0 auto 40px;
}

@media (max-width: 1200px) {
  .portfolio_cta { padding: 120px 0; }
}
@media (max-width: 960px) {
  .portfolio_cta_heading { font-size: 30px; }
}
@media (max-width: 568px) {
  .portfolio_cta { padding: 80px 0; }
  .portfolio_cta_heading { font-size: 26px; }
  .portfolio_cta_text { font-size: 13px; }
}