/* The original hero stylesheet is intentionally retained. All new styles are scoped. */
.emaki {
  --paper: var(--color-bg, #f4f2ed);
  --ink: var(--color-fg, #1a1916);
  --rule: var(--color-hairline, #dedad0);
  --quiet: var(--color-sub, #8c887e);
  position: relative; color: var(--ink); font-family: var(--font-jp), sans-serif;
  background: var(--paper); overflow: clip; isolation: isolate;
}
.emaki::before { content: ''; position: absolute; inset: 0 auto 0 5.5%; width: 1px; background: var(--rule); opacity: .35; pointer-events: none; z-index: -1; }
.emaki-octa-divider {
  height: 28px;
  max-width: 1280px;
  margin: 5rem auto 0;
  background: var(--rule);
  opacity: .55;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 40px 28px; mask-size: 40px 28px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='28'%3E%3Cpath fill-rule='evenodd' d='M15.86,4 L24.14,4 L30,9.86 L30,18.14 L24.14,24 L15.86,24 L10,18.14 L10,9.86 Z M17.43,7.8 L22.57,7.8 L26.2,11.43 L26.2,16.57 L22.57,20.2 L17.43,20.2 L13.8,16.57 L13.8,11.43 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='28'%3E%3Cpath fill-rule='evenodd' d='M15.86,4 L24.14,4 L30,9.86 L30,18.14 L24.14,24 L15.86,24 L10,18.14 L10,9.86 Z M17.43,7.8 L22.57,7.8 L26.2,11.43 L26.2,16.57 L22.57,20.2 L17.43,20.2 L13.8,16.57 L13.8,11.43 Z' fill='%23fff'/%3E%3C/svg%3E");
}
.emaki section { scroll-margin-top: 6rem; }
.emaki-section { padding: clamp(5rem, 10vw, 10rem) max(7.5vw, calc((100vw - 1280px)/2)); }
.emaki .container { max-width: 1280px; margin-inline: auto; }
.emaki h2, .emaki h3, .emaki .catch-copy, .emaki .rep-name { font-family: var(--font-kanji), serif; font-weight: 400; }
.emaki p { text-wrap: pretty; }
.emaki a:focus-visible, .emaki-nav a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 7px; }
.emaki-animal { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.emaki-catch { min-height: 88svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 8rem 6vw 11rem; position: relative; background: linear-gradient(to bottom, transparent, var(--paper) 35%); }
.emaki-catch .catch-copy { font-size: clamp(2rem, 5.8vw, 6rem); line-height: 1.8; letter-spacing: .025em; }
.emaki-catch .catch-copy strong { font-weight: 400; }
.emaki-catch .sp-br { display: none; }
.emaki-catch .catch-sub { font-size: 1rem; line-height: 2; margin-top: 1.8rem; }
.emaki-seal { display: grid; place-items: center; width: 2.3rem; height: 2.8rem; margin-bottom: 2.6rem; border: 1px solid var(--color-accent); color: var(--color-accent); font-family: var(--font-kanji), serif; font-size: 1.35rem; transform: rotate(-5deg); }
.emaki .catch-peeker { position: absolute; width: clamp(10rem, 20vw, 20rem); height: 8rem; bottom: -.1rem; right: 10%; object-position: bottom; }
.emaki-heading { display: flex; align-items: center; gap: 2rem; margin-bottom: 6rem; }
.emaki-heading h2 { font-size: clamp(2.4rem, 4.5vw, 4.5rem); letter-spacing: .1em; white-space: nowrap; }
.emaki-chapter { font-family: var(--font-kanji), serif; border: 1px solid var(--rule); padding: .8rem .6rem; font-size: 1rem; }
.emaki-heading-line { height: 1px; background: var(--rule); flex: 1; }
.emaki-count { font-family: var(--font-display), serif; font-size: 1rem; white-space: nowrap; }
.emaki-works { border-top: 1px solid var(--rule); padding-bottom: 7rem; }
.emaki-achievements { border-top: 1px solid var(--rule); }
.achievements-list { display: flex; flex-direction: column; margin-top: 4rem; }
.achievements-item { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.5rem; padding: 2.5rem 0; border-top: 1px solid var(--rule); }
.achievements-num { font-family: var(--font-display), Georgia, serif; font-style: italic; font-weight: 350; font-size: 1.5rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.achievements-body h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: .04em; margin-bottom: .7rem; }
.achievements-body p { font-size: 1rem; line-height: 2; color: var(--quiet); max-width: 46rem; }
.achievements-more { margin-top: 2.5rem; font-size: .95rem; color: var(--quiet); letter-spacing: .04em; }
@media (max-width: 640px) {
  .achievements-item { grid-template-columns: 3rem 1fr; gap: 1rem; padding: 2rem 0; }
  .achievements-num { font-size: 1.2rem; }
}
.emaki-work-list { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 2rem; row-gap: 2rem; }
.emaki-work { grid-column: 1 / 8; min-width: 0; position: relative; }
.emaki-work:nth-child(even) { grid-column: 6 / 13; margin-top: -2rem; }
.emaki-work:nth-child(odd):not(:first-child) { margin-top: -2rem; }
.emaki-work-link { display: block; position: relative; padding-top: 4.5rem; }
.emaki-work-paper { background: color-mix(in srgb, var(--paper) 85%, #b3a58c); aspect-ratio: 1.65; position: relative; overflow: hidden; border: 1px solid color-mix(in srgb,var(--ink) 12%,transparent); }
.emaki-work:nth-child(3n+2) .emaki-work-paper { background: color-mix(in srgb, var(--paper) 79%, #b4b5a4); }
.emaki-work:nth-child(3n) .emaki-work-paper { background: color-mix(in srgb, var(--paper) 85%, #bbb8b6); }
.emaki-work-number { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -56%); font-family: var(--font-display), Georgia, serif; font-size: clamp(6rem, 15vw, 14rem); font-weight: 350; font-style: italic; letter-spacing: -.065em; line-height: 1; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.emaki-paper-edge { position: absolute; inset: 0 0 0 auto; width: 12px; border-left: 1px solid color-mix(in srgb,var(--ink) 12%,transparent); background: linear-gradient(90deg,transparent,#00000009,transparent); }
.work-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.emaki-work-paper--photo:hover .work-photo { transform: scale(1.03); }
.work-photo { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.emaki-work-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--rule); }
.emaki-work-caption h3 { font-size: clamp(1.35rem,2.1vw,1.8rem); letter-spacing: .06em; }
.emaki-work-caption { align-items: flex-start; }
.emaki-work-caption .emaki-work-arrow { flex: none; margin-top: .2rem; }
.emaki-work-text { min-width: 0; }
.emaki-work-kind { margin: .55rem 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--ink); opacity: .6; }
.emaki-work-desc { margin: .45rem 0 0; max-width: 34em; font-size: .92rem; line-height: 1.9; letter-spacing: .03em; color: var(--ink); opacity: .78; }
.emaki-work-arrow { display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; width: 2.9rem; height: 2.9rem; font-size: 1.25rem; transition: background .25s,color .25s, transform .25s; }
.emaki-work-link:hover .emaki-work-arrow, .emaki-work-link:focus-visible .emaki-work-arrow { background: var(--ink); color: var(--paper); transform: rotate(45deg); }
.emaki .work-guide { position: absolute; width: 30%; height: 46%; right: -8%; top: -2%; z-index: 1; transform-origin: center bottom; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.emaki-work:nth-child(even) .work-guide { right: auto; left: -8%; }
.emaki-work--3 .work-guide { width: 38%; height: 28%; top: 4%; }
.emaki-work--4 .work-guide { top: 10%; transform: rotate(-18deg); }
.emaki-work--5 .work-guide { top: 0; transform: rotate(14deg); }
.emaki-work--6 .work-guide { top: 2%; width: 35%; transform: rotate(-15deg); }
.emaki-work-link:hover .work-guide { transform: translateY(-.65rem) rotate(5deg); }
/* Reveal only decorative paper. Work titles and links always remain visible. */
.emaki-motion [data-unroll]:not(.is-open) .emaki-work-paper { clip-path: inset(0 calc(100% - 36px) 0 0); }
.emaki-motion [data-unroll]:nth-child(even):not(.is-open) .emaki-work-paper { clip-path: inset(0 0 0 calc(100% - 36px)); }
.emaki-motion [data-unroll] .emaki-work-paper { transition: clip-path 2.8s cubic-bezier(.19,1,.22,1); clip-path: inset(0); }


.emaki .section-label { font-family: var(--font-display), Georgia, serif; font-style: italic; font-size: 1.15rem; margin-bottom: 1.2rem; }
.emaki .section-title { font-size: clamp(2.5rem,5vw,5rem); line-height: 1.4; letter-spacing: .08em; margin-bottom: 2rem; }
.emaki .section-title strong { font-weight: 400; }
.emaki .section-desc { max-width: 42rem; font-size: 1rem; line-height: 2.2; }
.emaki-services { border-top: 1px solid var(--rule); }
.emaki .services-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; margin-top: 5rem; }
.emaki .service-card { display: grid; grid-template-columns: 1fr 7.5rem; gap: .8rem 1.4rem; padding: 3rem 0; border-top: 1px solid var(--rule); position: relative; }
.emaki .service-card h3 { font-size: clamp(1.4rem,2.2vw,2rem); grid-column: 1; grid-row: 1; align-self: center; line-height: 1.6; }
.emaki .service-card p { font-size: 1rem; line-height: 2.1; grid-column: 1 / -1; }
.emaki .emaki-service-art { grid-column: 2; grid-row: 1; height: 6rem; }
.emaki .service-tag { grid-column: 1 / -1; font-family: var(--font-display), serif; font-style: italic; font-size: 1rem; margin-top: .5rem; opacity: .7; }
.emaki-strengths { background: color-mix(in srgb,var(--paper) 93%,var(--ink)); }
.emaki .strengths-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3.5rem; margin-top: 4rem; }
.emaki .strength-item { position: relative; border-top: 1px solid var(--rule); padding-top: 1rem; }
.emaki .strength-num { font-family: var(--font-kanji),serif; font-size: 1rem; }
.emaki .strength-guide { height: 12rem; width: 75%; margin: 0 auto 1.5rem; object-position: center; }
.emaki .strength-item:nth-child(1) .strength-guide { transform: rotate(12deg); }
.emaki .strength-item h3 { font-size: clamp(2rem,3.5vw,3rem); margin-bottom: 1.5rem; letter-spacing: .08em; }
.emaki .strength-item p { font-size: 1rem; line-height: 2.1; }
.emaki-motion [data-enter].is-open .strength-guide { animation: emaki-bow 1s ease-out both; }
@keyframes emaki-bow { 0% { transform: translateY(1rem) rotate(-8deg); } 55% { transform: translateY(-.5rem) rotate(5deg); } 100% { transform: none; } }
.emaki .company-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 7vw; align-items: start; margin-top: 4rem; }
.emaki .company-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.9; }
.emaki .company-table th, .emaki .company-table td { border-bottom: 1px solid var(--rule); padding: 1.25rem 0; vertical-align: top; text-align: left; }
.emaki .company-table th { width: 6rem; font-weight: 400; padding-right: 1.25rem; white-space: nowrap; }
.emaki .company-table td { overflow-wrap: anywhere; }
.emaki .email-link { text-decoration: underline; text-underline-offset: .3em; }
.emaki .rep-card { padding: 0; }
.emaki .rep-avatar { height: 12rem; width: 10rem; margin: -2rem 0 2rem auto; }
.emaki .rep-name { font-size: 2.25rem; letter-spacing: .15em; }
.emaki .rep-title { font-size: .9rem; margin-top: .7rem; }
.emaki .rep-message { margin-top: 2rem; font-size: 1rem; line-height: 2.25; }
.emaki-contact { position: relative; text-align: center; border-top: 1px solid var(--rule); padding-top: 9rem; padding-bottom: 8rem; }
.emaki-contact .section-desc { margin-inline: auto; }
.emaki-contact .contact-email { display: inline-flex; align-items: center; justify-content: center; gap: 1.3rem; margin-top: 3rem; padding: .6rem 0 1.2rem; border-bottom: 1px solid var(--ink); font-family: var(--font-display),Georgia,serif; font-size: clamp(1.6rem,4vw,3.5rem); line-height: 1.3; text-decoration: none; }
.emaki-contact .contact-email svg { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; }
.emaki-contact .contact-arrow { margin-left: 1rem; transition: transform .25s; }
.emaki-contact .contact-email:hover .contact-arrow { transform: translate(.2rem,-.2rem); }
.emaki .contact-guide { width: 12rem; height: 6rem; position: absolute; top: -5.8rem; left: calc(50% - 6rem); }
.emaki-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding: 2.5rem 7.5vw 8rem; border-top: 1px solid var(--rule); }
.emaki-footer .footer-logo { font-family: var(--font-display),serif; font-size: 2rem; }
.emaki-footer p { font-size: .875rem; }
.emaki-nav { position: fixed; z-index: 8100; left: 50%; bottom: 1.5rem; transform: translate(-50%,1rem); display: flex; align-items: center; padding: .45rem; border: 1px solid var(--color-hairline); border-radius: 3rem; background: var(--color-bg); color: var(--color-fg); box-shadow: 0 6px 30px #00000008; opacity: 0; visibility: hidden; transition: opacity .3s,transform .3s,visibility .3s; font-family: var(--font-jp),sans-serif; }
.emaki-nav.is-visible, .emaki-nav:focus-within { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.emaki-nav a { display: flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 44px; padding: .65rem 1.15rem; font-size: .875rem; border-radius: 2rem; }
.emaki-nav a:last-child { background: var(--color-fg); color: var(--color-bg); gap: .65rem; }
.emaki-nav a:not(:last-child):hover { background: color-mix(in srgb,var(--color-fg) 7%,transparent); }
.emaki-nav a[aria-current="location"]:not(:last-child) { text-decoration: underline; text-underline-offset: .4em; }
/* The introduction stays transparent; once below it the header gains a readable paper backing. */
html.emaki-reading .header { background: var(--color-bg); border-bottom: 1px solid var(--color-hairline); }
html[data-theme="black"] .emaki-animal { filter: sepia(.1) brightness(1.25); }
@media (max-width: 800px) {
  .emaki-section { padding: 5rem 6vw; }
  .emaki::before { left: 3vw; }
  .emaki-catch { min-height: 72svh; padding: 6rem 6vw 9rem; }
  .emaki-catch .catch-copy { font-size: clamp(1.8rem,5.8vw,3rem); }
  .emaki-catch .catch-sub { font-size: .9rem; max-width: 20rem; }
  .emaki-heading { gap: 1rem; margin-bottom: 3.5rem; }
  .emaki-heading h2 { font-size: 2.5rem; }
  .emaki-heading .emaki-count { font-size: .875rem; }
  .emaki-work-list { grid-template-columns: repeat(12,minmax(0,1fr)); row-gap: 1.5rem; column-gap: 0; }
  .emaki-work { grid-column: 1 / 12; }
  .emaki-work:nth-child(even) { grid-column: 2 / 13; margin-top: 0; }
  .emaki-work:nth-child(odd):not(:first-child) { margin-top: 0; }
  .emaki-work-paper { aspect-ratio: 1.4; }
  .emaki-work-number { font-size: clamp(7rem,26vw,12rem); }
  .emaki-work-link { padding-top: 3.5rem; }
  .emaki-work-caption { padding-block: 1rem; }
  .emaki .work-guide { right: -6%; }
  .emaki-work:nth-child(even) .work-guide { left: -6%; }
  .emaki .services-grid { column-gap: 2rem; margin-top: 3rem; }
  .emaki .service-card { grid-template-columns: 1fr 4.5rem; padding-block: 2rem; gap: 1rem .5rem; }
  .emaki .emaki-service-art { height: 4.5rem; }
  .emaki .strengths-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .emaki .strength-item { display: grid; grid-template-columns: 1fr 7rem; column-gap: 1.5rem; }
  .emaki .strength-num { grid-column: 1; }
  .emaki .strength-item h3 { grid-column: 1; grid-row: 2; margin: .5rem 0 1rem; }
  .emaki .strength-guide { grid-column: 2; grid-row: 1 / 3; width: 100%; height: 8rem; margin: 0; }
  .emaki .strength-item p { grid-column: 1 / -1; }
  .emaki .company-wrap { grid-template-columns: 1fr; gap: 4rem; margin-top: 2rem; }
  .emaki .rep-card { max-width: 38rem; }
  .emaki .rep-avatar { margin-top: 0; height: 8rem; width: 7rem; float: right; margin-left: 1rem; margin-bottom: 1rem; }
  .emaki-contact { margin-top: 3rem; padding-top: 6rem; }
  .emaki-footer { align-items: flex-start; flex-direction: column; padding: 2rem 6vw 8rem; gap: 1rem; }
  .emaki-nav { bottom: 1rem; width: max-content; max-width: calc(100% - 1rem); padding: .3rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .emaki-nav::-webkit-scrollbar { display: none; }
  .emaki-nav a { padding: .65rem .8rem; flex: none; }
}
@media (max-width: 480px) {
  .emaki-catch .sp-br { display: block; }
  .emaki-catch .catch-copy { font-size: 2.5rem; line-height: 1.6; }
  .emaki .services-grid { grid-template-columns: 1fr; }
  .emaki .service-card { grid-template-columns: 1fr 5rem; }
  .emaki .service-card h3 { font-size: 1.6rem; }
  .emaki .section-title { font-size: 2.5rem; }
  .emaki-nav a { font-size: .875rem; padding: .65rem .6rem; }
  .emaki-nav a:last-child { gap: .3rem; }
  .emaki-contact .contact-email { font-size: clamp(1.2rem,6.5vw,2rem); gap: .65rem; }
  .emaki-contact .contact-arrow { margin-left: 0; }
  .emaki-contact .contact-email svg { width: 1.2rem; }
  .emaki .company-table th { width: 5rem; padding-right: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .emaki *, .emaki-nav, .emaki-nav * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .emaki [data-unroll] .emaki-work-paper { clip-path: none !important; }
}
@media (max-width: 360px) {
  .emaki-nav { width: calc(100% - 2rem); }
  .emaki-nav a { padding: .5rem .55rem; font-size: .8rem; }
  .emaki-footer { padding-bottom: 10rem; }
}

/* End the original canvas sequence before any portfolio paper enters the viewport.
   ScrollTrigger ends at this block's bottom meeting the viewport bottom. */
.intro-scroll-runway { height: 120vh; height: 120svh; pointer-events: none; }
@media (max-width: 800px) {
  .intro-scroll-runway { height: 100vh; height: 100svh; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-scroll-runway { display: none; }
}

/* Requested accent. Keep the introductory ink scene unchanged. */
.emaki, .emaki-nav { --color-accent: #c9941a; --color-accent-navy: #1d3461; }
.emaki .emaki-chapter { border-color: var(--color-accent); }
.emaki .emaki-heading-line { background: linear-gradient(90deg, var(--color-accent), var(--rule) 45%); }
.emaki .strength-num { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: .5em; }
.emaki .email-link { text-decoration-color: var(--color-accent); }
.emaki .contact-email { border-bottom: 2px solid var(--color-accent); }
.emaki .emaki-work-link:hover .emaki-work-arrow,
.emaki .emaki-work-link:focus-visible .emaki-work-arrow { background: var(--color-accent-navy); border-color: var(--color-accent-navy); color: #f4f2ed; }
.emaki-nav a:last-child { background: var(--color-accent-navy); color: #f4f2ed; }
.emaki-nav a[aria-current="location"]:not(:last-child) { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }

.emaki .emaki-work-arrow { border-color: var(--color-accent-navy); color: var(--color-accent-navy); }
.emaki .contact-arrow { display: inline-grid; place-items: center; font-size: .41em; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--color-accent-navy); color: #f4f2ed; }
html[data-theme="black"] .emaki .emaki-work-arrow { background: var(--color-accent-navy); color: #f4f2ed; border-color: var(--color-accent); }

/* Supplied ink illustrations pair Japanese brushwork with familiar IT equipment. */
.emaki .emaki-work-paper .emaki-work-number { top: 12%; left: 7%; transform: none; font-size: clamp(3rem,7vw,7rem); color: var(--color-accent-navy); opacity: .24; }
.emaki .work-ink-study { position: absolute; inset: 8% 8% 5% 18%; pointer-events: none; }
.emaki .work-ink-study img { position: absolute; object-fit: contain; }
.emaki .work-ink-main { width: 78%; height: 92%; left: 2%; top: 0; }
.emaki .work-ink-detail { width: 30%; height: 44%; right: 0; bottom: 0; transform: rotate(-12deg); }
.emaki .emaki-work--2 .work-ink-main { transform: rotate(-9deg); width: 65%; left: 10%; }
.emaki .emaki-work--2 .work-ink-detail { width: 45%; height: 32%; transform: rotate(8deg); }
.emaki .emaki-work--3 .work-ink-detail { transform: rotate(18deg); }
.emaki .emaki-work--4 .work-ink-main { width: 83%; transform: rotate(-7deg); }
.emaki .emaki-work--5 .work-ink-detail { width: 43%; height: 32%; transform: rotate(-10deg); }
.emaki .emaki-work--6 .work-ink-main { width: 67%; left: 6%; transform: rotate(-8deg); }
.emaki .emaki-work--6 .work-ink-detail { transform: rotate(16deg); }
html[data-theme="black"] .emaki .work-ink-study { filter: brightness(1.25); }
html[data-theme="black"] .emaki .emaki-work-paper .emaki-work-number { color: var(--color-accent); opacity: .65; }
@media (max-width: 800px) {
 .emaki .emaki-work-paper .emaki-work-number { font-size: clamp(3rem,12vw,6rem); }
 .emaki .work-ink-study { inset: 12% 6% 6% 14%; }
}

/* The rolled edge travels across stationary paper, matching the reveal boundary.
   Odd panels unroll to the right; even panels unroll to the left. */
.emaki .emaki-paper-edge {
  inset: 0 auto 0 calc(100% - 16px); width: 16px;
  border-inline: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background: linear-gradient(90deg, #b7a98c, #f3ead7 35%, #e4d8bd 65%, #b0a080);
  border-radius: 30% / 2%;
  box-shadow: -3px 0 5px #30261418;
}
.emaki .emaki-work:nth-child(even) .emaki-paper-edge { left: 0; box-shadow: 3px 0 5px #30261418; }
.emaki-motion [data-unroll] .emaki-paper-edge { transition: left 2.8s cubic-bezier(.19,1,.22,1), width 2.8s cubic-bezier(.19,1,.22,1); }
.emaki-motion [data-unroll]:not(.is-open) .emaki-paper-edge { left: 0; width: 36px; }
.emaki-motion [data-unroll]:nth-child(even):not(.is-open) .emaki-paper-edge { left: calc(100% - 36px); }
@media (prefers-reduced-motion: reduce) {
  .emaki [data-unroll] .emaki-paper-edge { transition: none; }
}

/* Gold and indigo backgrounds carry the palette through the portfolio. */
.emaki-catch { background: linear-gradient(180deg, var(--paper) 45%, color-mix(in srgb, var(--paper) 88%, #c9941a)); }
.emaki-works { background: color-mix(in srgb, var(--paper) 88%, #c9941a); }
.emaki-services { background: color-mix(in srgb, var(--paper) 94%, #1d3461); }
.emaki-strengths {
  --ink: #f4f2ed;
  --rule: rgba(244,242,237,.28);
  background: #1d3461;
  color: var(--ink);
  border-block: 1px solid #c9941a;
}
.emaki-strengths .section-label { color: #e6b954; }
.emaki-company { background: color-mix(in srgb, var(--paper) 96%, #c9941a); }
.emaki-contact {
  --ink: #1d3461;
  --rule: rgba(29,52,97,.25);
  background: #c9941a;
  color: var(--ink);
  border-top: 1px solid var(--rule);
}
.emaki .emaki-contact .contact-email { border-bottom-color: #1d3461; }
.emaki .emaki-contact a:focus-visible { outline-color: #1d3461; }
.emaki-footer { --rule: rgba(244,242,237,.2); background: #1d3461; color: #f4f2ed; border-top-color: #c9941a; }
html[data-theme="black"] .emaki-contact .emaki-animal { filter: none; }

.emaki .emaki-strengths .strength-guide { background: #f4f2ed; border-radius: 50%; padding: .75rem; }
html[data-theme="black"] .emaki-strengths .strength-guide { filter: none; }

/* User-specified 48px octagonal repeat patterns. */
.emaki-strengths {
  --ink: #f5f0e0;
  background-color: #1d3461;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2748%27%20height%3D%2748%27%3E%3Cpolygon%20points%3D%2717%2C7%2031%2C7%2041%2C17%2041%2C31%2031%2C41%2017%2C41%207%2C31%207%2C17%27%20fill%3D%27none%27%20stroke%3D%27rgba%28245%2C240%2C224%2C0.18%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%2741%27%20y1%3D%2717%27%20x2%3D%2748%27%20y2%3D%2717%27%20stroke%3D%27rgba%28245%2C240%2C224%2C0.18%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%2741%27%20y1%3D%2731%27%20x2%3D%2748%27%20y2%3D%2731%27%20stroke%3D%27rgba%28245%2C240%2C224%2C0.18%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%2717%27%20y1%3D%2741%27%20x2%3D%2717%27%20y2%3D%2748%27%20stroke%3D%27rgba%28245%2C240%2C224%2C0.18%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%2731%27%20y1%3D%2741%27%20x2%3D%2731%27%20y2%3D%2748%27%20stroke%3D%27rgba%28245%2C240%2C224%2C0.18%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%270%27%20y1%3D%2717%27%20x2%3D%277%27%20y2%3D%2717%27%20stroke%3D%27rgba%28245%2C240%2C224%2C0.18%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%270%27%20y1%3D%2731%27%20x2%3D%277%27%20y2%3D%2731%27%20stroke%3D%27rgba%28245%2C240%2C224%2C0.18%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%2717%27%20y1%3D%270%27%20x2%3D%2717%27%20y2%3D%277%27%20stroke%3D%27rgba%28245%2C240%2C224%2C0.18%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%2731%27%20y1%3D%270%27%20x2%3D%2731%27%20y2%3D%277%27%20stroke%3D%27rgba%28245%2C240%2C224%2C0.18%29%27%20stroke-width%3D%271.5%27%2F%3E%3C%2Fsvg%3E");
  background-size: 48px 48px;
  background-position: 0 0;
  background-repeat: repeat;
  color: #f5f0e0;
  text-align: center;
}
.emaki-contact {
  background-color: #f5f0e0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2748%27%20height%3D%2748%27%3E%3Cpolygon%20points%3D%2717%2C7%2031%2C7%2041%2C17%2041%2C31%2031%2C41%2017%2C41%207%2C31%207%2C17%27%20fill%3D%27none%27%20stroke%3D%27rgba%28201%2C148%2C26%2C0.15%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%2741%27%20y1%3D%2717%27%20x2%3D%2748%27%20y2%3D%2717%27%20stroke%3D%27rgba%28201%2C148%2C26%2C0.15%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%2741%27%20y1%3D%2731%27%20x2%3D%2748%27%20y2%3D%2731%27%20stroke%3D%27rgba%28201%2C148%2C26%2C0.15%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%2717%27%20y1%3D%2741%27%20x2%3D%2717%27%20y2%3D%2748%27%20stroke%3D%27rgba%28201%2C148%2C26%2C0.15%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%2731%27%20y1%3D%2741%27%20x2%3D%2731%27%20y2%3D%2748%27%20stroke%3D%27rgba%28201%2C148%2C26%2C0.15%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%270%27%20y1%3D%2717%27%20x2%3D%277%27%20y2%3D%2717%27%20stroke%3D%27rgba%28201%2C148%2C26%2C0.15%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%270%27%20y1%3D%2731%27%20x2%3D%277%27%20y2%3D%2731%27%20stroke%3D%27rgba%28201%2C148%2C26%2C0.15%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%2717%27%20y1%3D%270%27%20x2%3D%2717%27%20y2%3D%277%27%20stroke%3D%27rgba%28201%2C148%2C26%2C0.15%29%27%20stroke-width%3D%271.5%27%2F%3E%3Cline%20x1%3D%2731%27%20y1%3D%270%27%20x2%3D%2731%27%20y2%3D%277%27%20stroke%3D%27rgba%28201%2C148%2C26%2C0.15%29%27%20stroke-width%3D%271.5%27%2F%3E%3C%2Fsvg%3E");
  background-size: 48px 48px;
  background-position: 0 0;
  background-repeat: repeat;
}

/* Equal dimensions and stationary edges keep every medallion a regular octagon. */
.emaki .emaki-strengths .strength-item .strength-guide {
 --medallion-size: clamp(7rem, 14vw, 12rem);
 width: var(--medallion-size);
 height: var(--medallion-size);
 aspect-ratio: 1;
 border-radius: 0;
 clip-path: polygon(29.2893% 0, 70.7107% 0, 100% 29.2893%, 100% 70.7107%, 70.7107% 100%, 29.2893% 100%, 0 70.7107%, 0 29.2893%);
 object-fit: contain;
 padding: 1rem;
 transform: none;
 animation: none;
 justify-self: center;
}
@media (max-width: 800px) {
 .emaki .emaki-strengths .strength-item .strength-guide { --medallion-size: 7rem; padding: .6rem; }
}

/* Balance the visible size of the three different silhouettes within equal octagons. */
.emaki .emaki-strengths .strength-item:nth-child(1) .strength-guide { padding: .15rem; }
.emaki .emaki-strengths .strength-item:nth-child(2) .strength-guide { padding: 0; }

/* Shift only the first illustration within its fixed octagonal frame. */
.emaki .emaki-strengths .strength-item:nth-child(1) .strength-guide { object-position: 38% 50%; }

/* Resize artwork independently of the stationary octagonal frame. */
.emaki .emaki-strengths .strength-item:nth-child(1) .strength-guide { overflow: hidden; }
.emaki .emaki-strengths .strength-portrait { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 38% 50%; transform: scale(1.12); transform-origin: 38% 50%; }
.emaki .emaki-strengths .strength-item:nth-child(3) .strength-guide { padding: 1.3rem; }
@media (max-width: 800px) {
 .emaki .emaki-strengths .strength-item:nth-child(3) .strength-guide { padding: .85rem; }
}

/* Reduce the reliable illustration while preserving its octagonal frame. */
.emaki .emaki-strengths .strength-item:nth-child(2) .strength-guide { padding: 1rem; }
@media (max-width: 800px) {
 .emaki .emaki-strengths .strength-item:nth-child(2) .strength-guide { padding: .6rem; }
}

/* Mobile uses native touch scroll and lighter compositing. */
@media (max-width: 768px) {
 .grain { display: none; }
}

@media (max-width: 768px) {
 .bg-field, .chojugiga-field { height: 100svh; bottom: auto; }
}


/* Cat visibility is independent of the optional ink canvas. */
.has-choju-field body { background: transparent; }
/* Mobile paper: fixed artwork, moving cover, and a shrinking rolled edge. */
@media (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  .emaki-motion .emaki .emaki-work[data-unroll] .emaki-work-paper {
    clip-path: none; transition: none; isolation: isolate; border: 0;
  }
  .emaki-motion .emaki .emaki-work[data-unroll] .emaki-work-paper::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: color-mix(in srgb, var(--paper) 88%, #c9941a);
    pointer-events: none; transform: translateX(36px);
    transition: transform 2.8s cubic-bezier(.19,1,.22,1);
  }
  .emaki-motion .emaki .emaki-work[data-unroll]:nth-child(even) .emaki-work-paper::after { transform: translateX(-36px); }
  .emaki-motion .emaki .emaki-work[data-unroll].is-open .emaki-work-paper::after { transform: translateX(100%); }
  .emaki-motion .emaki .emaki-work[data-unroll]:nth-child(even).is-open .emaki-work-paper::after { transform: translateX(-100%); }
  .emaki-motion .emaki .emaki-work[data-unroll] .emaki-paper-edge {
    left: 0; right: auto; width: 100%; z-index: 3;
    border: 0; border-radius: 0; box-shadow: none; background: none;
    transform: translateX(0); pointer-events: none;
    transition: transform 2.8s cubic-bezier(.19,1,.22,1);
  }
  .emaki-motion .emaki .emaki-work[data-unroll] .emaki-paper-edge::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 36px;
    background: linear-gradient(90deg,#b7a98c,#f3ead7 35%,#e4d8bd 65%,#b0a080);
    transform: scaleX(1); transform-origin: left center;
    transition: transform 2.8s cubic-bezier(.19,1,.22,1);
  }
  .emaki-motion .emaki .emaki-work[data-unroll].is-open .emaki-paper-edge { transform: translateX(calc(100% - 16px)); }
  .emaki-motion .emaki .emaki-work[data-unroll]:nth-child(even) .emaki-paper-edge { transform: translateX(calc(100% - 36px)); }
  .emaki-motion .emaki .emaki-work[data-unroll]:nth-child(even).is-open .emaki-paper-edge { transform: translateX(0); }
  .emaki-motion .emaki .emaki-work[data-unroll].is-open .emaki-paper-edge::before { transform: scaleX(.4444444444); }
}

/* Keep timed intro playback independent of browser smooth scrolling. */
html.mobile-intro-playing, html.mobile-intro-playing body { scroll-behavior: auto !important; overflow-anchor: none; }

/* Animate only the portraits; the regular octagons stay still. */
.emaki .emaki-strengths .strength-guide { overflow: hidden; }
.emaki .emaki-strengths .strength-portrait {
  --cat-scale: 1;
  object-position: center; transform-origin: center;
  transform: scale(var(--cat-scale));
  animation-duration: 4.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.emaki .emaki-strengths .strength-item:nth-child(1) .strength-portrait {
  --cat-scale: 1.12; object-position: 38% 50%; transform-origin: 38% 50%;
  animation-name: strength-cat-hop; animation-duration: 3.6s;
}
.emaki .emaki-strengths .strength-item:nth-child(2) .strength-portrait {
  animation-name: strength-cat-nod; animation-duration: 4.8s;
}
.emaki .emaki-strengths .strength-item:nth-child(3) .strength-portrait {
  animation-name: strength-cat-tilt; animation-duration: 5.6s;
}
.emaki .emaki-strengths .strength-item.cat-in-view .strength-portrait { animation-play-state: running; }
html.cat-loops-hidden .emaki .emaki-strengths .strength-portrait { animation-play-state: paused; }
@keyframes strength-cat-hop {
  0%, 55%, 100% { transform: translate(0,0) scale(var(--cat-scale)); }
  18% { transform: translate(-2%,-4%) rotate(-2deg) scale(var(--cat-scale)); }
  35% { transform: translate(1%,0) scale(var(--cat-scale)); }
}
@keyframes strength-cat-nod {
  0%, 60%, 100% { transform: translateY(0) rotate(0) scale(var(--cat-scale)); }
  25% { transform: translateY(3%) rotate(3deg) scale(var(--cat-scale)); }
  42% { transform: translateY(-1%) rotate(-1deg) scale(var(--cat-scale)); }
}
@keyframes strength-cat-tilt {
  0%, 70%, 100% { transform: rotate(0) scale(var(--cat-scale)); }
  25% { transform: rotate(-5deg) scale(var(--cat-scale)); }
  48% { transform: rotate(4deg) scale(var(--cat-scale)); }
}
@media (prefers-reduced-motion: reduce) {
  .emaki .emaki-strengths .strength-portrait { animation: none !important; }
}

/* Enlarge the cat below the opening statement on desktop only. */
@media (min-width: 801px) {
  .emaki .catch-peeker { width: clamp(20rem, 35vw, 36rem); height: clamp(16rem, 21vw, 22rem); }
}

/* Bring the statement into view sooner without shortening the intro playback. */
.emaki .emaki-catch { justify-content: flex-start; padding-top: 5rem; }
@media (max-width: 800px) {
  .emaki .emaki-catch { padding-top: 4rem; }
  .emaki-octa-divider { margin-top: 4rem; }
}

/* Phone nav: four links fit without horizontal scrolling. */
@media (max-width: 480px) {
  .emaki-nav a { padding: .65rem .55rem; font-size: .82rem; }
  .emaki-nav a:last-child { padding-inline: .75rem; }
}
@media (max-width: 360px) {
  .emaki-nav { width: max-content; max-width: calc(100% - 1rem); }
  .emaki-nav a { padding: .5rem .42rem; font-size: .76rem; }
  .emaki-nav a:last-child { padding-inline: .6rem; gap: .2rem; }
}
@media (max-width: 340px) {
  .emaki-nav { padding: .25rem; }
  .emaki-nav a { padding: .45rem .32rem; font-size: .7rem; }
  .emaki-nav a:last-child { padding-inline: .5rem; }
}