/* Identity-led editorial layout. The existing club palette and components remain shared. */
.personal-hero { padding-top: 38px; }
.personal-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 70px; }
.personal-hero .hero-copy > p.kicker { font-size: 10px; margin: 0 0 27px; }
.personal-hero h1 { font-size: clamp(33px, 3.95vw, 57px); line-height: 1.25; letter-spacing: -.06em; }
.personal-hero .hero-lead { margin-top: 30px; font-size: 24px; max-width: 510px; }
.personal-hero .hero-copy > p:not(.hero-lead):not(.button-note):not(.kicker) { font-size: 16px; max-width: 445px; margin-top: 18px; }
.personal-hero .hero-copy .kicker { color: var(--ink); max-width: none; }
.personal-hero .hero-copy .button { margin-top: 28px; }
.brand-hero-portrait { position: relative; margin: 0; background: #ddd8ce; }
.brand-hero-portrait::before { content: ''; position: absolute; top: 24px; right: -12px; bottom: -12px; width: 24px; background: var(--accent); z-index: -1; }
.brand-hero-portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 35%; }
.brand-hero-portrait figcaption { position: absolute; bottom: 0; left: 0; right: 0; background: var(--ink); color: var(--paper); padding: 18px 24px; display: flex; justify-content: space-between; gap: 20px; font-size: 12px; }
.brand-hero-portrait figcaption > span:last-child { color: #f58d69; font-size: 23px; line-height: 1; }
.personal-hero .hero-bottomline { margin-top: 36px; }
.brand-work-portrait { margin-top: 34px; max-width: 440px; }
.brand-work-portrait img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 40%; }
.brand-work-portrait figcaption { padding-top: 12px; font-size: 11px; color: #c6cdd1; }
.contact-host { margin-top: 30px; display: flex; align-items: center; gap: 22px; }
.contact-host img { width: 104px; height: 112px; flex-shrink: 0; object-fit: cover; object-position: center 30%; }
.contact-host p { font-size: 16px; line-height: 1.6; }
.contact-host p span { color: #b8c4cc; font-size: 13px; }
@media (max-width: 1100px) {
  .personal-hero-grid { gap: 45px; }
  .personal-hero h1 { font-size: 3.8vw; }
  .personal-hero .hero-lead { font-size: 21px; margin-top: 25px; }
  .personal-hero .hero-copy > p:not(.hero-lead):not(.button-note):not(.kicker) { font-size: 15px; }
  .brand-hero-portrait figcaption { padding: 16px; font-size: 10px; }
}
@media (min-width: 601px) and (max-width: 800px) {
  .personal-hero-grid { grid-template-columns: 1.2fr .8fr; gap: 30px; }
  .personal-hero { padding-top: 32px; }
  .personal-hero .hero-copy > p.kicker { font-size: 9px; margin-bottom: 22px; }
  .personal-hero h1 { font-size: 3.85vw; }
  .personal-hero .hero-lead { font-size: 19px; }
  .personal-hero .hero-copy > p:not(.hero-lead):not(.button-note):not(.kicker) { font-size: 14px; }
  .brand-hero-portrait img { aspect-ratio: 3 / 5; }
  .brand-hero-portrait figcaption { font-size: 9px; gap: 5px; padding: 13px; }
  .contact-host { gap: 16px; }
  .contact-host img { width: 85px; height: 100px; }
  .contact-host p { font-size: 14px; }
}
@media (max-width: 600px) {
  .personal-hero { padding-top: 31px; }
  .personal-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .personal-hero .hero-copy > p.kicker { font-size: 9px; margin-bottom: 23px; max-width: 300px; }
  .personal-hero h1 { font-size: clamp(26px, 7.55vw, 44px); line-height: 1.25; }
  .personal-hero .hero-lead { margin-top: 24px; font-size: 21px; }
  .personal-hero .hero-copy > p:not(.hero-lead):not(.button-note):not(.kicker) { font-size: 16px; margin-top: 17px; }
  .personal-hero .hero-copy .button { margin-top: 23px; }
  .brand-hero-portrait { margin-right: 8px; }
  .brand-hero-portrait::before { right: -8px; bottom: -8px; }
  .brand-hero-portrait img { aspect-ratio: 4 / 4.6; object-position: center 28%; }
  .brand-hero-portrait figcaption { padding: 16px 18px; font-size: 12px; }
  .personal-hero .hero-bottomline { margin-top: 29px; }
  .brand-work-portrait { margin-top: 29px; max-width: none; }
  .brand-work-portrait img { aspect-ratio: 3 / 2; }
  .contact-host { margin-top: 26px; gap: 18px; }
  .contact-host img { width: 94px; height: 104px; }
  .contact-host p { font-size: 15px; }
}

/* Author background and anonymized portfolio. */
.about-portfolio-link { display: inline-flex; align-items: center; gap: 20px; margin-top: 28px; padding-block: 8px; border-bottom: 1px solid #f58d69; color: #f6a584; font-size: 14px; }
.about-portfolio-link:hover { color: var(--paper); }
.portfolio { border-bottom: 1px solid var(--line); }
.portfolio .section-head > p { max-width: 340px; }
@media (max-width: 800px) { .about h2 { font-size: 31px; } }
@media (max-width: 600px) { .about h2 { font-size: clamp(25px, 7.7vw, 38px); } .about-portfolio-link { font-size: 13px; gap: 12px; } }

.portfolio-scale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 26px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.portfolio-scale > div { display: flex; flex-direction: column-reverse; gap: 8px; }
.portfolio-scale dt { font-size: 12px; line-height: 1.5; color: var(--muted); }
.portfolio-scale dd { margin: 0; font-size: clamp(25px, 3vw, 37px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.portfolio-list .portfolio-source { font-size: 11px; line-height: 1.6; color: var(--muted); }

.case-teaser{background:#e5e5da;padding-block:65px}.case-teaser h2{font-size:clamp(27px,3.5vw,48px);line-height:1.1;letter-spacing:-.04em;margin:25px 0}.case-teaser p:not(.kicker){max-width:780px;line-height:1.7;margin-bottom:25px}.case-teaser .case-teaser-note{font-size:11px;margin:20px 0 0!important;max-width:740px!important}.case-detail-link{display:inline-block;margin-top:20px;text-decoration:underline;text-underline-offset:4px;font-size:14px;line-height:1.6}