:root {
  color-scheme: light;
  --paper: #eae7dc;
  --ink: #383832;
  --text: #55554c;
  --soft: #a7a396;
  --serif: 'Crimson Pro', Georgia, serif;
  --japanese: 'Zen Old Mincho', 'Yu Mincho', serif;
  --gutter: 8.333333vw;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 60px; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--japanese); -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2389816f' opacity='.3' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
::selection { background: #c8c3b3; color: #22241f; }
.skip-link { position: fixed; z-index: 20; top: 10px; left: 10px; padding: 12px; background: var(--paper); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: absolute; z-index: 3; top: 5.4vw; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: baseline; font-family: var(--serif); }
.site-name { color: var(--ink); font-size: clamp(18px, 1.53vw, 25px); letter-spacing: -.015em; }

/* Reference composition: 12 columns, headline in column 2, image in columns 5–12. */
.hero { padding-top: 16.666667vw; }
.hero-composition { position: relative; margin-inline: var(--gutter); min-height: 60.9vw; }
.hero-photograph { position: absolute; z-index: 0; top: 8.333333vw; right: 0; width: 58.333333vw; aspect-ratio: 1.11; margin: 0; background: #b9b8aa; }
.hero-photograph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; filter: grayscale(1) sepia(.12) contrast(.88) brightness(1.08); }
.hero-photograph::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(234,231,220,.06); }
h1 { position: relative; z-index: 1; margin: 0; color: var(--soft); font: 400 7.3vw/1.08 var(--serif); letter-spacing: -.027em; }
.hero-line { display: block; width: fit-content; white-space: nowrap; }
.ink { color: var(--ink); }

@media (min-width: 768px) {
  @supports (background-clip: text) {
    .hero-line:nth-child(n+2) {
      background: linear-gradient(90deg, var(--soft) 25vw, var(--paper) 25vw);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
    .hero-line:last-child .ink {
      display: inline-block;
      background: linear-gradient(90deg, var(--ink) 25vw, var(--paper) 25vw);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
  }
}

.section-wrap { margin-inline: var(--gutter); }
.profile, .find-me { font-size: clamp(21px, 1.95vw, 33px); }
.profile { padding-top: 12.5vw; }
.section-heading { margin: 0 0 1.4em; color: var(--text); font-family: var(--serif); font-size: 1em; font-style: normal; font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.profile-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vw; }
.profile-columns p { margin: 0; line-height: 2; letter-spacing: .025em; line-break: strict; overflow-wrap: anywhere; }
.profile-columns [lang='en'] { font-family: var(--serif); letter-spacing: 0; }
.philosophy { padding-top: 12.5vw; font-size: clamp(16px, 1.18vw, 20px); }
.philosophy-copy { max-width: 75vw; line-height: 2.2; letter-spacing: .035em; line-break: strict; overflow-wrap: anywhere; }
.philosophy-copy p { margin: 0; }
.find-me { padding-top: 8.333333vw; }
.social-links { display: flex; flex-wrap: wrap; gap: .8em 2em; margin: 0; padding: 0; list-style: none; font-family: var(--serif); line-height: 1.4; }
.social-links a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: #aaa696; transition: color .25s, text-decoration-color .25s; }
.social-links a:hover { color: var(--ink); text-decoration-color: currentColor; }
.site-footer { margin-top: 10vw; padding-block: 2vw 3vw; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: baseline; font: 400 15px/1.5 var(--serif); color: #747266; }
.site-footer p { margin: 0; }
.footer-philosophy { text-align: center; }
.site-footer > a { justify-self: end; }
.site-footer a span { display: inline-block; margin-left: 12px; transition: transform .2s; }
.site-footer a:hover span { transform: translateY(-4px); }

/* Every content block enters once when the page opens, with a gentle stagger. */
.reveal { animation: float-in 2.4s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, .2s) both; }
.site-header { --reveal-delay: .05s; }
.hero-photograph { --reveal-delay: .2s; }
.hero-line:nth-child(1) { --reveal-delay: .15s; }
.hero-line:nth-child(2) { --reveal-delay: .27s; }
.hero-line:nth-child(3) { --reveal-delay: .39s; }
.hero-line:nth-child(4) { --reveal-delay: .51s; }
.hero-line:nth-child(5) { --reveal-delay: .63s; }
.section-heading { --reveal-delay: .25s; }
.profile-columns p, .philosophy-copy { --reveal-delay: .4s; }
.profile-columns p:nth-child(2) { --reveal-delay: .55s; }
.social-links li:nth-child(1) { --reveal-delay: .35s; }
.social-links li:nth-child(2) { --reveal-delay: .47s; }
.social-links li:nth-child(3) { --reveal-delay: .59s; }
.site-footer > .reveal { --reveal-delay: .45s; }
@keyframes float-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  :root { --gutter: 6vw; }
  html { scroll-padding-top: 30px; }
  .site-header { top: 28px; align-items: flex-start; }
  .site-name { font-size: 19px; }
  .hero { padding-top: 145px; }
  .hero-composition { min-height: 0; }
  h1 { font-size: 10.4vw; line-height: 1.14; letter-spacing: -.026em; }
  .hero-line { white-space: nowrap; }
  .hero-photograph { position: relative; top: auto; right: auto; width: calc(100% + 12vw); margin: 0 -6vw; aspect-ratio: 4 / 3; }
  .hero-composition { display: flex; flex-direction: column; }
  .hero-composition h1 { order: 0; }
  .hero-photograph { order: 2; margin-top: 40px; }
  .hero-photograph img { object-position: center; }
  .profile, .find-me { font-size: 19px; }
  .profile { padding-top: 85px; }
  .profile-columns { grid-template-columns: 1fr; gap: 1.5em; }
  .profile-columns p { line-height: 2.05; letter-spacing: .015em; }
  .philosophy { padding-top: 85px; font-size: 16px; }
  .philosophy-copy { max-width: none; line-height: 2.15; letter-spacing: .015em; }
  .find-me { padding-top: 64px; }
  .site-footer { margin-top: 85px; padding-block: 0 30px; grid-template-columns: 1fr 1fr; gap: 18px; font-size: 14px; }
  .footer-philosophy { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}