/* Brand-page composition. Product facts remain in data/, shared tokens unchanged. */
.lp.brand-page { --group-gap: 24px; --block-gap: 64px; --line-body: 1.9; }
.brand-page .hero { grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.brand-page .hero-copy { display: grid; grid-template-columns: 7rem minmax(0,1fr); gap: 24px; }
.brand-page .hero-heading-group { grid-column: 1; grid-row: 1 / 3; padding: 0; }
.brand-page .hero-actions { grid-column: 2; grid-row: 2; }
.brand-page .hero-heading-group h1 { font-size: 1.875rem; line-height: 1.65; letter-spacing: .09em; margin: 0; }
.brand-page .hero-info { grid-column: 2; grid-row: 1; width: 100%; }
.brand-page .hero .hero-info { margin-top: 0; }
.brand-page .hero-intro { max-width: none; }
.brand-page .hero-intro p + p { margin-top: 24px; }
.brand-page .hero-figure, .brand-page .hero > .image-pending { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
.brand-page .hero-photo { aspect-ratio: 4 / 5; }
.brand-page .hero-section { padding-block: 24px 96px; }
.brand-page .section-heading { margin-bottom: 24px; }
.brand-page .section-heading .eyebrow { margin-bottom: 12px; }
.brand-page .section-heading h2 { line-height: 1.55; }
.brand-page .brand-copy { max-width: 34ic; }
.brand-page .reading-block { max-width: 760px; margin-inline: auto; }
.brand-page .concerns-section { padding-bottom: var(--section-space); border-top: 1px solid var(--color-line); }
.brand-page .fabric-section { background: var(--color-soft); }
.brand-page .fabric-layout, .brand-page .maker-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.brand-page .photo-placeholder { background: var(--color-soft); border: 1px solid var(--color-line); aspect-ratio: 4 / 3; min-height: 180px; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; }
.brand-page .photo-placeholder p { font-size: 1rem; color: var(--color-muted); }
.brand-page .photo-placeholder { width: 100%; min-width: 0; box-sizing: border-box; }
.brand-page .product-figure, .brand-page .feature-item { min-width: 0; }
.brand-page .fabric-section .photo-placeholder { background: var(--color-bg); min-height: 320px; }
.brand-page .detail-photo { width: 100%; object-fit: contain; }
.brand-page .fabric-figure .detail-photo, .brand-page .maker-figure .detail-photo { aspect-ratio: 4 / 3; }
.brand-page .product-list { display: grid; gap: 96px; }
.brand-page .product-introduction { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.brand-page .product-media .wear-figure { margin: 0; }
.brand-page .product-copy { max-width: 30ic; }
.brand-page .product-copy .product-action { margin-top: 32px; }
.brand-page .product-media .detail-photo { aspect-ratio: 3 / 2; }
.brand-page .products-section .section-heading { margin-bottom: 32px; }
.brand-page .features-section { padding-top: 0; }
.brand-page .feature-grid { gap: 48px; }
.brand-page .feature-item, .brand-page .feature-item:nth-child(even) { border: 0; padding: 0; margin: 0; }
.brand-page .feature-copy { margin-top: 24px; }
.brand-page .feature-item .photo-placeholder, .brand-page .feature-figure .detail-photo { aspect-ratio: 16 / 9; }
.brand-page .feature-item h3 { max-inline-size: none; }
.brand-page .product-specs { margin-top: 48px; border-block: 1px solid var(--color-line); }
.brand-page .product-specs > summary { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding-block: 16px; list-style: none; cursor: pointer; font-weight: 500; }
.brand-page .product-specs > summary::-webkit-details-marker { display: none; }
.brand-page .product-specs > summary::after { content: "+"; font-size: 1.5rem; }
.brand-page .product-specs[open] > summary::after { content: "−"; }
.brand-page .product-specs .spec-list { padding-block: 16px 32px; }
.brand-page .spec-row { grid-template-columns: 10em minmax(0,1fr); }
.brand-page .variant-layout { grid-template-columns: 1.1fr .9fr; gap: 64px; }
.brand-page .color-block { max-inline-size: none; }
.brand-page .color-photo-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.brand-page .color-item { min-width: 0; }
.brand-page .color-figure .photo-placeholder, .brand-page .color-figure .detail-photo { aspect-ratio: 1; min-height: 0; }
.brand-page .color-figure .photo-placeholder { padding: 16px; }
.brand-page .color-name { margin-top: 16px; display: flex; gap: 12px; align-items: center; font-size: 1rem; }
.brand-page .swatch { width: 24px; height: 24px; }
.brand-page .voices-section { border-top: 1px solid var(--color-line); }
.brand-page .voice-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.brand-page .voice-list > .pending-block { grid-column: 1 / -1; }
.brand-page .voice-item { margin: 0; padding-top: 24px; border-top: 1px solid var(--color-line); }
.brand-page .voice-item blockquote { margin: 0; }
.brand-page .voice-item figcaption { margin-top: 16px; color: var(--color-muted); font-size: 1rem; }
.brand-page .product-feature-group + .product-feature-group, .brand-page .product-variant-group + .product-variant-group, .brand-page .product-voice-group + .product-voice-group, .brand-page .product-faq-group + .product-faq-group { margin-top: 64px; }
.brand-page .group-title { margin-bottom: 24px; }
.brand-page .faq-section { padding-top: var(--section-space); }
.brand-page .purchase-inner { max-width: 640px; margin-inline: auto; }
.brand-page .purchase-inner .section-heading { margin-bottom: 0; }
.brand-page .purchase-inner .brand-copy { max-width: 34ic; }
.brand-page .final-ctas { display: grid; gap: 24px; }
.brand-page .button { background: transparent; color: var(--color-primary); font-size: 1rem; font-weight: 500; border: 2px solid var(--color-primary); border-radius: 0; transition: background-color .2s, color .2s; }
.brand-page .button:disabled { background: transparent; color: var(--color-primary); transform: none; text-decoration: none; }
/* Web BENTO outline: fill the border color and invert text in 0.2s. */
.brand-page .button:enabled:hover, .brand-page a.button:hover, .brand-page .button:focus-visible { background: var(--color-primary); color: #fff; transform: none; text-decoration: none; }
.brand-page .footer-logo { display: block; width: 200px; flex-shrink: 0; }
.brand-page .footer-logo img { display: block; width: 100%; height: auto; }
.brand-page .cta-group { gap: 12px; }
.brand-page .site-header nav { gap: 24px; }
@media (max-width: 1023px) and (min-width: 768px) {
  .brand-page .hero { grid-template-columns: 1fr 1fr; gap: 32px; }
  .brand-page .hero-copy { grid-template-columns: 6rem minmax(0,1fr); gap: 16px; }
  .brand-page .hero-heading-group h1 { font-size: 1.625rem; }
  .brand-page .fabric-layout, .brand-page .maker-layout, .brand-page .product-introduction, .brand-page .variant-layout { gap: 40px; }
  .brand-page .color-photo-list { gap: 16px; }
}
@media (max-width: 767px) {
  .lp.brand-page { --group-gap: 24px; --block-gap: 48px; }
  .brand-page .hero { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .brand-page .hero-copy { display: contents; }
  .brand-page .hero-heading-group { order: 1; }
  .brand-page .hero-info { order: 2; }
  .brand-page .hero-actions { order: 4; }
  .brand-page .hero-heading-group h1 { writing-mode: horizontal-tb; font-size: clamp(1.875rem, 1.3rem + 2.3vw, 2.25rem); letter-spacing: .04em; line-height: 1.55; }
  .brand-page .hero .hero-info { margin-top: 0; }
  .brand-page .hero-figure { margin: 0; order: 3; }
  .brand-page .hero-section { padding-block: 16px 80px; }
  .brand-page .section-heading { margin-bottom: 24px; }
  .brand-page .brand-copy, .brand-page .product-copy, .brand-page .purchase-inner .brand-copy { max-width: none; }
  .brand-page .fabric-layout, .brand-page .maker-layout, .brand-page .product-introduction, .brand-page .variant-layout { grid-template-columns: 1fr; gap: 32px; }
  .brand-page .product-list { gap: 64px; }
  .brand-page .product-introduction .product-action { margin-top: 24px; }
  .brand-page .fabric-section .photo-placeholder { min-height: 240px; }
  .brand-page .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .brand-page .feature-copy { margin-top: 20px; }
  .brand-page .product-specs { margin-top: 32px; }
  .brand-page .spec-row { grid-template-columns: 1fr; }
  .brand-page .variant-layout { gap: 40px; }
  .brand-page .color-photo-list { gap: 16px; }
  .brand-page .color-figure .photo-placeholder { padding: 12px; }
  .brand-page .voice-list { grid-template-columns: 1fr; gap: 32px; }
  .brand-page .purchase-inner { text-align: left; align-items: stretch; }
  .brand-page .site-header nav { gap: 8px 16px; justify-content: start; }
  .brand-page .site-header nav a { font-size: 1rem; }
}