/* Issue #2: 2026-09-28 feedback. Keep the original static, single-column layout. */
:root { --red: #f2633b; }
[hidden] { display: none !important; }
body { overflow-wrap: break-word; }
.preview-note { background: var(--ink); color: var(--paper); display: flex; flex-wrap: wrap; gap: 6px 22px; padding-block: 10px; font-size: 12px; }
.header { background: var(--paper); gap: 22px; }
.header nav { gap: 18px; font-size: 13px; margin-right: auto; }
.header-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.accent { background: var(--red); border-color: var(--red); color: var(--ink); }
.login-link { font-size: 14px; white-space: nowrap; padding-block: 12px; }
.hero-word { font-size: clamp(70px,16vw,260px); font-weight: 600; letter-spacing: -.075em; line-height: 1.05; margin: 24px 0; white-space: nowrap; }
.hero-panel { height: 620px; margin-bottom: 24px; background: var(--ink); }
.hero-panel > img { position: absolute; inset: 0; opacity: .55; }
.hero-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.07)); pointer-events: none; }
.hero-overlay { position: relative; z-index: 1; color: white; padding: 44px; max-width: 820px; }
.hero .hero-overlay h1 { font-size: clamp(30px,4.4vw,64px); line-height: 1.45; letter-spacing: -.045em; white-space: normal; margin: 16px 0 20px; }
.hero-overlay > p:not(.overline) { font-size: 17px; line-height: 1.9; }
.hero-overlay .pill { margin-top: 28px; }
.about { background: var(--paper); padding-block: 50px 65px; }
.jp-title { font-size: clamp(32px,4vw,58px); line-height: 1.5; letter-spacing: -.035em; }
.about .intro { margin-bottom: 20px; }
.rate-notice { border: 1px solid var(--rule); padding: 16px 20px; margin-top: 24px; font-size: 14px; }
.mic-card { margin-top: 45px; }
.mic-card .product-heading h3 { font-size: clamp(36px,6.2vw,90px); overflow-wrap: anywhere; padding-right: 190px; }
.mic-card .product-visual { min-height: 285px; }
.mic-card .product-visual img { max-width: 100%; width: 470px; height: 255px; }
.mic-card .product-visual figcaption { padding-inline: 12px; }
.product-placeholder { min-height: 200px; background: #e4e4de; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.product-placeholder > span { font-size: 11px; letter-spacing: .12em; }
.product-placeholder > p { font-size: clamp(28px,4vw,50px); line-height: 1.2; }
.product-placeholder > small { font-size: 12px; }
.mic-spec { padding-block: 18px; }
.mic-spec dl { display: flex; flex-wrap: wrap; gap: 8px 30px; margin-top: 8px; font-size: 13px; }
.mic-spec dl div { display: flex; gap: 12px; }
.mic-spec dt { color: #555; }
.mic-card .price { font-size: 36px; font-variant-numeric: tabular-nums; }
.price-note { font-size: 13px; margin-top: 14px; }
.draft-label { font-size: .85em; background: rgba(255,255,255,.6); color: #683015; padding: 2px 6px; font-weight: 500; }
.studio-callout { border: 1px solid var(--ink); margin-top: 28px; padding: 22px; }
.studio-callout .text-link { margin-top: 12px; max-width: 100%; }
.option { margin-top: 32px; padding: 32px; background: var(--ink); color: var(--paper); }
.option h3 { margin-top: 10px; font-size: 34px; }
.option p { margin-top: 12px; }
.option-price { font-size: 22px; }
.option .status { font-size: 13px; }
.steps li { position: relative; }
.steps li:not(:last-child)::after { content: '↓'; position: absolute; left: 20px; bottom: -15px; z-index: 1; background: var(--paper); padding: 0 8px; font-size: 18px; }
.returning-member { margin-top: 26px; }
.returning-member a { text-decoration: underline; text-underline-offset: 4px; }
.faq { background: var(--paper); padding-block: 50px 65px; }
.faq-items { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { padding: 22px 10px; cursor: pointer; font-weight: 500; }
.faq summary > span { margin-left: 6px; margin-right: 12px; }
.faq details > p { padding: 0 12px 24px 42px; line-height: 1.9; }
.faq summary:focus-visible { outline: 2px solid; outline-offset: -4px; }
.studio-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 30px; }
.studio-actions .text-link { margin-top: 0; }
.studio .studio-address { font-size: 14px; margin-top: 30px; margin-bottom: 0; }
.request-word { font-size: clamp(56px,13vw,180px); font-weight: 500; line-height: 1.05; letter-spacing: -.065em; margin-top: 38px; }
.request h2 { font-size: clamp(28px,4vw,56px); line-height: 1.5; letter-spacing: -.035em; margin-top: 24px; }
.request-copy { font-size: 18px; margin-top: 18px; }
.consult { margin-top: 18px; }
.member-login { border-top: 1px solid var(--rule); margin-top: 40px; padding-top: 26px; }
.member-login h3 { font-size: 22px; }
.footer { background: var(--paper); flex-wrap: wrap; }
.footer nav { display: flex; flex-wrap: wrap; gap: 12px 22px; font-size: 12px; }
.footer p { font-size: 10px; }
@media (max-width: 1200px) {
  .header { flex-wrap: wrap; padding-block: 18px; }
  .header nav { order: 3; width: 100%; margin: 0; justify-content: flex-start; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 640px) {
  .preview-note { font-size: 11px; line-height: 1.6; }
  .header { gap: 16px 10px; }
  .header .wordmark { font-size: 28px; }
  .header-actions { gap: 10px; }
  .header-actions .pill { min-height: 42px; padding: 9px 12px; gap: 8px; font-size: 11px; }
  .header-actions .pill span { font-size: 15px; }
  .login-link { font-size: 12px; }
  .header nav { gap: 10px 18px; flex-wrap: wrap; }
  .header nav a { font-size: 12px; }
  .hero-word { font-size: clamp(56px,19vw,120px); margin: 22px 0; }
  .hero-panel { height: auto; min-height: 490px; }
  .hero-overlay { padding: 30px 22px; }
  .hero .hero-overlay h1 { font-size: clamp(27px,7vw,40px); margin: 16px 0; }
  .hero-overlay > p:not(.overline) { font-size: 14px; }
  .hero-overlay > p br { display: none; }
  .hero-overlay .pill { font-size: 13px; padding: 12px 16px; gap: 18px; }
  .essentials { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
  .essentials span { margin: 0; }
  .hero .text-link { max-width: 100%; gap: 14px; font-size: 13px; }
  .about, .faq { padding-block: 34px 42px; }
  .jp-title { font-size: 28px; }
  .about p br { display: none; }
  .rate-notice { padding: 14px; font-size: 13px; }
  .mic-card .product-heading h3 { padding-right: 0; font-size: clamp(32px,9vw,58px); }
  .mic-card .tag { font-size: 10px; margin-top: 12px; }
  .mic-card .product-visual { min-height: 250px; }
  .mic-card .product-visual img { height: 200px; width: 100%; }
  .mic-card .product-visual figcaption { font-size: 10px; }
  .product-placeholder { min-height: 180px; }
  .mic-spec > p { font-size: 14px; }
  .product-details { gap: 10px; }
  .mic-card .price { font-size: 32px; }
  .rules .draft-label { font-size: 12px; }
  .studio-callout { padding: 18px; font-size: 14px; }
  .studio-callout .text-link { gap: 12px; font-size: 13px; }
  .option { padding: 24px 20px; }
  .option h3 { font-size: 25px; }
  .option-price { font-size: 18px; }
  .steps li:not(:last-child)::after { left: 3px; }
  .faq summary { padding: 18px 2px; font-size: 15px; }
  .faq details > p { padding: 0 4px 20px 22px; font-size: 14px; }
  .studio-actions { gap: 20px; }
  .studio-actions .pill { width: 100%; gap: 12px; font-size: 13px; }
  .request-copy { font-size: 16px; }
  .request-copy br { display: none; }
  .status { font-size: 13px; }
  .member-login h3 { font-size: 19px; }
  .footer nav { font-size: 12px; }
}
@media (max-width: 360px) {
  .header .wordmark { font-size: 25px; }
  .header-actions { gap: 8px; }
  .header-actions .pill { padding-inline: 10px; font-size: 10px; }
  .login-link { font-size: 11px; }
}
/* Allow long captions and intrinsic image widths to shrink inside the grid. */
.image-break > * { min-width: 0; max-width: 100%; }


/* 2026-09-30 dnsk feedback: typography pass based on the Showcase Africa reference.
   Keep the visual hierarchy restrained and editorial rather than oversized. */
:root {
  --font: "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
body {
  font-size: 15px;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: .005em;
}
.header nav,
.login-link,
.section-label,
.overline,
.mic-spec,
.price-note,
.status,
.footer nav {
  font-size: 12px;
}
.wordmark {
  font-weight: 600;
}
.hero-word {
  font-size: clamp(62px, 12vw, 180px);
  font-weight: 500;
  letter-spacing: -.06em;
}
.hero .hero-overlay h1 {
  font-size: clamp(28px, 3.8vw, 52px);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -.035em;
}
.hero-overlay > p:not(.overline) {
  font-size: 15px;
  line-height: 1.8;
}
.jp-title,
.section-title {
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.035em;
}
.flow {
  padding-block: 42px 52px;
}
.flow .section-title {
  font-size: clamp(32px, 4vw, 54px);
  letter-spacing: -.04em;
  margin: 30px 0 20px;
}
.steps {
  margin-top: 26px;
}
.steps li {
  gap: 26px;
  padding: 22px 0;
}
.step-no {
  min-width: 64px;
  font-size: 42px;
  font-weight: 400;
}
.steps h3 {
  font-size: 20px;
  font-weight: 500;
}
.steps p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.75;
}
.mic-card .product-heading h3 {
  font-size: clamp(34px, 5.2vw, 72px);
  font-weight: 500;
}
.mic-card .price {
  font-size: 30px;
  font-weight: 500;
}
.option h3,
.member-login h3 {
  font-weight: 500;
}
.request-word {
  font-size: clamp(54px, 10vw, 130px);
  font-weight: 500;
}
.request h2 {
  font-size: clamp(28px, 3.8vw, 50px);
  font-weight: 500;
}
.request-copy {
  font-size: 16px;
  line-height: 1.8;
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  .header nav,
  .login-link,
  .section-label,
  .overline { font-size: 11px; }
  .hero-word { font-size: clamp(48px, 17vw, 92px); }
  .hero .hero-overlay h1 { font-size: clamp(26px, 7vw, 36px); }
  .jp-title,
  .section-title,
  .flow .section-title { font-size: 30px; }
  .steps li { gap: 16px; padding: 20px 0; }
  .step-no { min-width: 42px; font-size: 34px; }
  .steps h3 { font-size: 18px; }
  .steps p { font-size: 14px; }
  .mic-card .product-heading h3 { font-size: clamp(30px, 8vw, 48px); }
  .request-word { font-size: clamp(48px, 16vw, 86px); }
  .request h2 { font-size: 30px; }
}