@import url("fonts.css");

body.af-home-page { margin: 0 !important; padding: 0 !important; background: #f4f7fb; }
/* The existing site's Bottom Navigation plugin emits a second mobile menu. */
body.af-home-page .bnav_bottom_nav_wrapper { display: none !important; }
#af-portfolio {
  --af-paper: #f4f7fb; --af-ink: #24558c; --af-muted: #657991; --af-line: #d6e1ee;
  --af-surface: #e6eef8; --af-dark: #002569; --af-contact: #001b4e; --af-accent: #b7d2f3;
  --af-serif: "Atelier Cormorant", "Times New Roman", serif;
  --af-sans: "Atelier DM Sans", "Atelier Noto Sans JP", sans-serif;
  --af-jp: "Atelier Noto Sans JP", sans-serif;
  --af-jp-serif: "Atelier Noto Serif JP", "Yu Mincho", serif;
  width: 100%; margin: 0; padding: 0; background: var(--af-paper); color: var(--af-ink);
  font-family: var(--af-jp); font-size: 16px; font-weight: 400; line-height: 1.7;
  overflow-wrap: normal; word-break: normal; text-align: left; -webkit-font-smoothing: antialiased;
}
#af-portfolio *, #af-portfolio *::before, #af-portfolio *::after { box-sizing: border-box; }
#af-portfolio :where(h1,h2,h3,p,figure,ul,li,nav,hr) { margin: 0; padding: 0; }
#af-portfolio :where(h1,h2,h3) { font-weight: 400; border: 0; background: none; }
#af-portfolio :where(h1,h2,h3)::before, #af-portfolio :where(h1,h2,h3)::after { content: none; }
#af-portfolio a { color: inherit; text-decoration: none; }
#af-portfolio a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
#af-portfolio img { display: block; max-width: 100%; margin: 0; border: 0; box-shadow: none; }
#af-portfolio .af-inset { padding-left: max(24px, calc((100% - 1248px) / 2)); padding-right: max(24px, calc((100% - 1248px) / 2)); }
#af-portfolio .af-label { font: 500 12px/1.4 var(--af-sans); letter-spacing: 1.5px; color: var(--af-muted); }
#af-portfolio .af-rule { width: 100%; height: 1px; border: 0; background: var(--af-line); }
#af-portfolio .af-skip { position: absolute; left: 24px; top: -100px; z-index: 10000; padding: 12px 20px; background: var(--af-dark); color: var(--af-paper); }
#af-portfolio .af-skip:focus { top: 12px; }
#af-portfolio .af-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 30px; padding-bottom: 30px; }
#af-portfolio .af-brand { display: flex; align-items: center; gap: 16px; }
#af-portfolio .af-monogram { font: italic 31px/1 var(--af-serif); }
#af-portfolio .af-wordmark { font: 500 11px/1.4 var(--af-sans); }
#af-portfolio .af-nav { display: flex; gap: 32px; font: 400 14px/1.5 var(--af-sans); }
#af-portfolio .af-nav a:hover, #af-portfolio .af-more a:hover, #af-portfolio .af-footer a:hover, #af-portfolio .af-about-link:hover { text-decoration: underline; text-underline-offset: 4px; }
#af-portfolio .af-mobile-contact { display: none; }
#af-portfolio .af-hero { display: flex; flex-direction: column; gap: 40px; padding-top: 64px; padding-bottom: 64px; }
#af-portfolio .af-eyebrow { display: flex; align-items: center; gap: 12px; color: var(--af-dark); font: 500 12px/1.4 var(--af-sans); letter-spacing: 1.5px; }
#af-portfolio .af-star { font: 400 30px/1 var(--af-serif); }
#af-portfolio .af-hero-main { display: grid; grid-template-columns: minmax(0,800fr) minmax(0,380fr); align-items: center; gap: 68px; }
#af-portfolio .af-hero-copy { display: flex; flex-direction: column; gap: 30px; }
#af-portfolio h1 { font: 400 clamp(100px, 10.4167vw, 150px)/.86 var(--af-serif); letter-spacing: -5px; color: var(--af-dark); }
#af-portfolio .af-slogan { font: 400 29px/1.6 var(--af-jp-serif); color: var(--af-dark); }
#af-portfolio .af-identity { display: flex; flex-direction: column; gap: 12px; }
#af-portfolio .af-author { display: flex; align-items: center; gap: 16px; }
#af-portfolio .af-name { font: 400 23px/1.5 var(--af-jp-serif); color: var(--af-dark); }
#af-portfolio .af-practice { font: 400 12px/1.5 var(--af-jp); color: var(--af-muted); }
#af-portfolio .af-intro { font: 400 16px/1.9 var(--af-jp); color: var(--af-muted); }
#af-portfolio .af-actions { display: flex; align-items: center; gap: 24px; }
#af-portfolio .af-button { display: inline-flex; align-items: center; gap: 8px; border-radius: 2px; padding: 15px 24px; font: 400 14px/1.5 var(--af-jp); background: var(--af-dark); color: var(--af-paper); }
#af-portfolio .af-button:hover { background: var(--af-ink); }
#af-portfolio .af-about-link { font: 400 13px/1.5 var(--af-jp); color: var(--af-dark); }
#af-portfolio .af-portrait { display: flex; flex-direction: column; align-items: center; gap: 20px; min-width: 0; }
#af-portfolio .af-portrait > img { width: 350px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
#af-portfolio .af-portrait figcaption { display: flex; justify-content: space-between; gap: 12px; width: min(350px,100%); font: 400 12px/1.4 var(--af-sans); color: var(--af-muted); }
#af-portfolio .af-hero-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; }
#af-portfolio .af-hero-footer .af-label, #af-portfolio .af-scroll { color: var(--af-dark); }
#af-portfolio .af-scroll { font: 400 10px/1.5 var(--af-sans); }
#af-portfolio .af-work { display: flex; flex-direction: column; gap: 36px; padding-top: 56px; padding-bottom: 80px; }
#af-portfolio .af-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#af-portfolio .af-section-name { display: flex; align-items: center; gap: 18px; }
#af-portfolio .af-section-name h2 { font: 400 54px/1.1 var(--af-serif); }
#af-portfolio .af-section-caption { font: 400 13px/1.5 var(--af-jp); color: var(--af-muted); }
#af-portfolio .af-work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
#af-portfolio .af-work-card { display: flex; flex-direction: column; gap: 18px; }
#af-portfolio .af-work-art { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; background: white; }
#af-portfolio .af-work-card:hover .af-work-title h3 { text-decoration: underline; text-underline-offset: 5px; }
#af-portfolio .af-work-meta { display: flex; justify-content: space-between; gap: 12px; }
#af-portfolio .af-work-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#af-portfolio .af-work-title h3 { font: 400 23px/1.5 var(--af-jp-serif); }
#af-portfolio .af-work-title > span { font: 400 28px/1 var(--af-sans); }
#af-portfolio .af-work-description { font: 400 14px/1.7 var(--af-jp); color: var(--af-muted); }
#af-portfolio .af-about { display: grid; grid-template-columns: 400px minmax(0,1fr); gap: 80px; background: var(--af-surface); padding-top: 64px; padding-bottom: 64px; }
#af-portfolio .af-about-heading { display: flex; flex-direction: column; gap: 14px; }
#af-portfolio .af-about-heading h2 { font: 400 36px/1.6 var(--af-jp-serif); }
#af-portfolio .af-about-copy { display: flex; flex-direction: column; gap: 24px; }
#af-portfolio .af-about-copy > p { font: 400 16px/2 var(--af-jp); }
#af-portfolio .af-tags { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; }
#af-portfolio .af-tags li { border: 1px solid var(--af-line); padding: 8px; font: 400 11px/1.4 var(--af-sans); }
#af-portfolio .af-more { display: flex; flex-wrap: wrap; gap: 28px; font: 400 13px/1.5 var(--af-sans); }
#af-portfolio .af-social { display: flex; flex-direction: column; gap: 36px; padding-top: 70px; padding-bottom: 70px; }
#af-portfolio .af-social-list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
#af-portfolio .af-social-card { display: flex; flex-direction: column; gap: 22px; border: 1px solid var(--af-line); padding: 24px 20px; }
#af-portfolio .af-social-card + .af-social-card { border-left: 0; }
#af-portfolio .af-social-card > img { width: 24px; height: 24px; max-width: none; flex-shrink: 0; }
#af-portfolio .af-social-copy { display: flex; flex-direction: column; gap: 7px; }
#af-portfolio .af-social-copy h3 { font: 400 15px/1.5 var(--af-jp); }
#af-portfolio .af-social-sizu h3 { font-size: 13px; }
#af-portfolio .af-social-copy p { font: 400 12px/1.5 var(--af-jp); color: var(--af-muted); }
#af-portfolio .af-social-arrow { font: 400 18px/1 var(--af-sans); }
#af-portfolio .af-social-card:hover { background: var(--af-surface); }
#af-portfolio .af-contact { display: flex; flex-direction: column; gap: 36px; background: var(--af-contact); color: var(--af-paper); border: 1px solid #000; padding-top: 66px; padding-bottom: 60px; }
#af-portfolio .af-contact .af-label { color: var(--af-accent); }
#af-portfolio .af-contact-main { display: grid; grid-template-columns: minmax(0,700fr) minmax(0,468fr); align-items: center; gap: 80px; }
#af-portfolio .af-contact-copy { display: flex; flex-direction: column; gap: 20px; }
#af-portfolio .af-contact h2 { font: 400 80px/1.05 var(--af-serif); }
#af-portfolio .af-contact-copy > p { font: 400 16px/1.9 var(--af-jp); }
#af-portfolio .af-contact-email { display: flex; flex-direction: column; gap: 16px; }
#af-portfolio .af-email { align-self: flex-start; font: 400 34px/1.5 var(--af-serif); }
#af-portfolio .af-mail-link { align-self: flex-start; font: 400 13px/1.5 var(--af-jp); }
#af-portfolio .af-email:hover, #af-portfolio .af-mail-link:hover { text-decoration: underline; text-underline-offset: 5px; }
#af-portfolio .af-footer { display: flex; justify-content: space-between; gap: 22px; padding-top: 24px; padding-bottom: 24px; font: 400 11px/1.5 var(--af-sans); color: var(--af-muted); }
#af-portfolio .af-footer nav { display: flex; gap: 22px; }
#af-portfolio section[id] { scroll-margin-top: 24px; }
@media (max-width: 1100px) and (min-width: 761px) {
  #af-portfolio .af-hero-main { gap: 32px; }
  #af-portfolio .af-slogan { font-size: 24px; }
  #af-portfolio .af-about { grid-template-columns: 300px minmax(0,1fr); gap: 40px; }
  #af-portfolio .af-about-heading h2 { font-size: 30px; }
  #af-portfolio .af-social-card { padding-left: 12px; padding-right: 12px; }
  #af-portfolio .af-social-sizu h3 { font-size: 11px; }
  #af-portfolio .af-contact-main { gap: 40px; }
}
@media (max-width: 760px) {
  #af-portfolio .af-inset { padding-left: 24px; padding-right: 24px; }
  #af-portfolio .af-header { padding-top: 22px; padding-bottom: 22px; }
  #af-portfolio .af-nav { display: none; }
  #af-portfolio .af-mobile-contact { display: block; font: 400 26px/1 var(--af-sans); }
  #af-portfolio .af-hero { gap: 28px; padding-top: 42px; padding-bottom: 56px; }
  #af-portfolio .af-eyebrow { font-size: 12px; letter-spacing: 1.5px; }
  #af-portfolio .af-hero-main { display: flex; flex-direction: column; align-items: stretch; gap: 30px; }
  #af-portfolio .af-hero-copy { gap: 24px; }
  #af-portfolio .af-hero-copy { container-type: inline-size; }
  #af-portfolio h1 { font-size: clamp(58px, calc((100vw - 48px) * .24), 82px); letter-spacing: -2px; white-space: nowrap; }
  #af-portfolio .af-slogan { font-size: 21px; }
  #af-portfolio .af-name { font-size: 20px; }
  #af-portfolio .af-intro { font-size: 14px; }
  #af-portfolio .af-portrait { padding-top: 8px; }
  #af-portfolio .af-portrait > img { width: 242px; }
  #af-portfolio .af-portrait figcaption { width: min(270px,100%); }
  #af-portfolio .af-hero-footer { padding-top: 4px; }
  #af-portfolio .af-work { gap: 28px; padding-top: 44px; padding-bottom: 56px; }
  #af-portfolio .af-section-name h2 { font-size: 39px; }
  #af-portfolio .af-work .af-section-name { width: 100%; }
  #af-portfolio .af-work .af-section-name h2 { width: 227px; text-align: center; }
  #af-portfolio .af-section-caption { display: none; }
  #af-portfolio .af-work-grid { grid-template-columns: 1fr; gap: 36px; }
  #af-portfolio .af-work-title h3 { font-size: 20px; }
  #af-portfolio .af-about { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; padding-bottom: 48px; }
  #af-portfolio .af-about-heading h2 { font-size: 28px; }
  #af-portfolio .af-about-copy > p { font-size: 14px; }
  #af-portfolio .af-social { gap: 24px; padding-top: 48px; padding-bottom: 56px; }
  #af-portfolio .af-social-list { grid-template-columns: 1fr; }
  #af-portfolio .af-social-card { flex-direction: row; align-items: center; gap: 18px; padding: 18px 0; border: 0; border-top: 1px solid var(--af-line); }
  #af-portfolio .af-social-card:last-child { border-bottom: 1px solid var(--af-line); }
  #af-portfolio .af-social-copy { flex: 1; min-width: 0; }
  #af-portfolio .af-social-sizu h3 { font-size: 14px; }
  #af-portfolio .af-social-arrow { width: 12px; }
  #af-portfolio .af-contact { gap: 28px; padding-top: 48px; padding-bottom: 48px; }
  #af-portfolio .af-contact-main { grid-template-columns: 1fr; gap: 28px; }
  #af-portfolio .af-contact h2 { font-size: 49px; }
  #af-portfolio .af-contact-copy > p { font-size: 14px; }
  #af-portfolio .af-email { font-size: 26px; }
  #af-portfolio .af-footer { flex-direction: column; gap: 16px; }
}
@supports (font-size: 1cqw) {
  @media (max-width: 760px) {
    #af-portfolio h1 { font-size: clamp(58px,24cqw,82px); }
  }
}
@media (max-width: 360px) {
  #af-portfolio .af-eyebrow { font-size: 10px; letter-spacing: .6px; }
  #af-portfolio .af-slogan { font-size: 18px; }
  #af-portfolio .af-author { gap: 12px; }
  #af-portfolio .af-practice { font-size: 11px; }
  #af-portfolio .af-hero-footer .af-label { font-size: 10px; letter-spacing: .8px; }
  #af-portfolio .af-scroll { font-size: 9px; }
}
@media (prefers-reduced-motion: no-preference) {
  html:has(#af-portfolio) { scroll-behavior: smooth; }
  #af-portfolio a { transition: background-color .18s ease; }
}