/* KARAKUL — normal-flow content; absolute positioning is limited to scenery. */
:root {
  --ink: #231815;
  --sidebar: clamp(220px, 26.38889vw, 380px);
  --content-inset: 44px;
  --spine: 119px;
  --line: #231815;
  --serif: "Noto Serif JP", "Yu Mincho", serif;
  --sans: "Roboto", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --pin-start: 117;
  --hero-offset: 117px;
}
* { box-sizing: border-box; }
html { color: #000; background: #f5f5f5; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 12px; line-height: 28px; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid #886a7e; outline-offset: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 16px; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-shell { position: relative; width: min(100%, 1440px); margin-inline: auto; }
main { margin-left: var(--sidebar); }
.scene { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.scene__texture { width: 100%; height: 100%; object-fit: cover; }
.scene__logo { position: absolute; width: 351px; height: 487.5px; max-width: none; top: calc(55.5px + var(--hero-offset)); left: calc(50% + var(--sidebar) / 2 - 172px); opacity: .7; }
.site-header { position: fixed; top: 0; left: max(0px, calc((100% - 1440px) / 2)); width: var(--sidebar); height: 100dvh; overflow-y: auto; background: #fff; z-index: 2; }
.desktop-nav { padding-top: max(24px, calc(100dvh - 582px)); padding-bottom: 32px; display: flex; flex-direction: column; align-items: center; }
.brand { width: min(217px, 80%); }
.nav-links { font-family: var(--serif); text-align: center; text-transform: uppercase; }
.desktop-nav .nav-links { margin-top: 35px; width: 100%; }
.desktop-nav .nav-links a { display: block; font-size: 14px; line-height: 70px; }
.nav-links a:hover { opacity: .55; }
.contact-link { display: inline-flex; gap: 2px; align-items: center; justify-content: center; width: 153px; min-height: 38px; padding: 4px 8px 4px 13px; color: #fff; background: #000; font-size: 19.76px; line-height: 1; font-weight: 600; letter-spacing: 2.964px; text-transform: uppercase; transition: background-color .3s linear; }
.contact-link img { flex-shrink: 0; width: 22px; }
.contact-link:hover, .contact-link:focus-visible { background-color: rgb(0 0 0 / 50%); }
.desktop-nav .contact-link { margin-top: 43px; }
.menu-toggle { display: none; }
.hero { height: 1024px; padding-top: 695px; text-align: center; }
.hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(25px, 2.5vw, 36px); line-height: 67px; letter-spacing: .2em; }
.section-title { font-weight: 200; color: var(--ink); font-size: 40px; line-height: 50px; height: 50px; letter-spacing: 6px; text-transform: uppercase; white-space: nowrap; }
.section-title > span { font-size: 70px; line-height: 50px; font-weight: 100; letter-spacing: 3.5px; }
.section-title--vertical { position: absolute; top: 0; left: 0; height: auto; writing-mode: vertical-rl; text-orientation: mixed; }
.glass-panel { background: rgb(255 255 255 / 10%); -webkit-backdrop-filter: blur(7.5px); backdrop-filter: blur(7.5px); }
/* Keep the rule above the blurred panel, but beneath the event image. */
.about { position: relative; isolation: isolate; margin-top: 135px; padding-bottom: 39px; }
.about::before { content: ""; position: absolute; z-index: 1; pointer-events: none; top: 0; bottom: -50px; left: var(--spine); border-left: 1px solid var(--line); }
.about__intro { position: relative; margin-left: var(--content-inset); padding-left: 75px; padding-right: 16%; }
.about__copy { position: relative; border: 1px solid var(--line); min-height: 216px; padding: 22px 29px; }
.event-media { position: relative; z-index: 1; margin-top: 65px; margin-left: var(--content-inset); width: min(509px, calc(100% - 88px)); aspect-ratio: 509 / 230; overflow: hidden; }
.event-media img, .event-media video { width: 100%; height: 100%; object-fit: cover; }
.event-media picture { display: block; height: 100%; }
.profile { position: relative; margin-inline: var(--content-inset) 62px; }
.profile > .section-title { text-align: right; }
.profile__card { position: relative; display: grid; grid-template-columns: minmax(240px, 36.48%) 1fr; border: 1px solid var(--line); }
.profile__portrait { display: block; }
.profile__portrait img { width: 100%; height: 100%; object-fit: cover; }
.profile__body { padding: 30px 21px 30px 35px; border-left: 1px solid var(--line); }
.profile__role { font-size: 16px; letter-spacing: 1.6px; line-height: 28px; }
.profile__name { font-family: var(--serif); font-size: 25px; font-weight: 400; letter-spacing: 5px; line-height: 36px; height: 36px; margin-top: 8px; white-space: nowrap; }
.profile__name span { font-size: 18px; font-weight: 500; }
.profile__biography { margin-top: 18px; }
.profile__sheep { position: absolute; bottom: -1px; left: calc(36.48% - 69px); width: 91px; }
.services { position: relative; padding-top: 176px; }
/* Draw the spine above the glass panel so its backdrop blur cannot erase it. */
.services::before { content: ""; position: absolute; z-index: 1; pointer-events: none; top: 0; bottom: 0; left: var(--spine); border-left: 1px solid var(--line); }
.services__panel { margin-left: var(--spine); padding: 60px 62px 166px 44px; }
.service-list { display: grid; gap: 45px; margin-top: 40px; }
.service-list__item { display: grid; grid-template-columns: 245px minmax(0, 1fr); align-items: start; column-gap: 24px; min-height: 46px; }
.service-list dt { position: relative; display: grid; align-items: center; min-height: 36px; border: 1px solid var(--line); font-size: 16px; line-height: 24px; text-align: center; }
.service-list dt::before { content: ""; position: absolute; top: 50%; right: 100%; width: 45px; border-top: 1px solid var(--line); }
.service-list dd { line-height: 23px; }
.decoration { position: absolute; pointer-events: none; overflow: hidden; left: calc(-1 * var(--sidebar)); width: calc(100% + var(--sidebar)); z-index: 1; }
.decoration img { position: relative; max-width: none; }
.decoration--top { top: 47px; height: 129px; }
.decoration--top img { width: 1437px; height: 129px; left: 356px; }
.decoration--middle { bottom: -93px; height: 300px; }
.decoration--middle img { width: 1440px; height: 300px; }
.works { position: relative; margin-top: 222px; }
.works::before { content: ""; position: absolute; z-index: 1; pointer-events: none; top: 0; left: calc(-1 * var(--sidebar)); right: 0; border-top: 1px solid var(--line); }
.works__sheep { position: absolute; top: -76px; left: 56px; width: 108px; }
.works__panel { position: relative; margin-left: var(--spine); padding: 116px 62px 79px 29px; }
.works__panel::before { content: ""; position: absolute; top: 0; bottom: 79px; left: 0; border-left: 1px solid var(--line); }
.works .section-title--vertical { top: 113px; left: -74px; }
.work-group + .work-group { margin-top: 38px; }
.work-group h3 { font-size: 20px; line-height: 28px; font-weight: 400; margin-bottom: 22px; }
.work-group li { position: relative; padding-left: 1em; }
.work-group li::before { content: "・"; position: absolute; left: 0; top: 0; }
.work-group li p + p { padding-left: 1em; }
.works__note { position: absolute; bottom: 79px; left: -24px; width: 10px; }
.company { position: relative; padding-top: 42px; }
.decoration--bottom { top: -150px; height: 300px; }
.decoration--bottom img { width: 1440px; height: 300px; }
.company__body { margin-inline: 149px 62px; }
.company__details { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 59px; line-height: 40px; }
.company__details dl > div { display: grid; grid-template-columns: 71px 1fr; column-gap: 29px; }
.company__details dt { font-weight: 400; }
.company__details dd { min-width: 0; }
.company__details li::before { content: "・"; }
.company__contact { text-align: center; margin: 30px 0 15px; }
.company__contact, .copyright { width: calc(100% - 153px); }
.copyright { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-align: center; line-height: 54px; padding-bottom: 12px; }
.mobile-menu { border: 0; padding: 0; }

/* Intermediate widths keep the same reading order and allow natural text wrapping. */
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --content-inset: 28px; --spine: 83px; }
  .about__intro { padding-left: 55px; padding-right: 28px; }
  .profile { margin-right: 28px; }
  .profile__card { grid-template-columns: 34% 1fr; }
  .profile__body { padding: 24px; }
  .profile__name { font-size: 20px; letter-spacing: 2px; }
  .profile__name span { font-size: 13px; }
  .profile__role { font-size: 13px; }
  .services__panel { padding-right: 28px; padding-left: 28px; }
  .service-list__item { grid-template-columns: minmax(190px, 40%) 1fr; gap: 18px; }
  .service-list dt { font-size: 13px; }
  .service-list dt::before { width: 29px; }
  .works__panel { padding-right: 28px; }
  .works .section-title--vertical { left: -55px; }
  .company__body { margin-inline: 83px 28px; }
  .company__details { gap: 28px; grid-template-columns: 1fr; }
  .section-title { font-size: 32px; letter-spacing: 4px; }
  .section-title > span { font-size: 58px; }
}

@media (max-width: 767px) {
  :root { --sidebar: 0px; --content-inset: 15px; --spine: 53px; --pin-start: 137; --hero-offset: 137px; }
  body { line-height: 26px; }
  .site-shell { width: 100%; }
  .scene__texture { object-fit: cover; }
  .scene__logo { top: calc(42.71px + var(--hero-offset)); left: 50%; transform: translateX(-50%); width: 270.117px; height: 375.163px; }
  .site-header { position: absolute; left: 0; width: 100%; height: 0; overflow: visible; background: none; }
  .desktop-nav { display: none; }
  .menu-toggle { position: absolute; top: 21px; right: 20px; z-index: 1; display: grid; place-items: center; width: 60px; height: 44px; background: transparent; border: 0; padding: 8px; }
  .menu-icon { position: relative; display: block; width: 44px; height: 25px; }
  .menu-icon > span { position: absolute; left: 50%; width: 44px; height: 1px; background: currentColor; transform-origin: center; transition: transform .3s ease-out, width .3s ease-out, opacity .3s ease-out; }
  .menu-icon > span:nth-child(1) { top: 0; transform: translateX(-50%); }
  .menu-icon > span:nth-child(2) { top: 12px; width: 50.12px; transform: translateX(-50%) rotate(-28.61deg); }
  .menu-icon > span:nth-child(3) { top: 24px; transform: translateX(-50%); }
  .menu-toggle[aria-expanded="true"] .menu-icon > span:nth-child(1) { width: 50.12px; transform: translate(-50%, 12px) rotate(28.61deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon > span:nth-child(3) { width: 50.12px; transform: translate(-50%, -12px) rotate(28.61deg); opacity: 0; }
  .hero { height: 844px; padding-top: 587px; }
  .hero h1 { font-size: 20px; line-height: 39px; letter-spacing: 4px; }
  .section-title { font-size: 29px; line-height: 33px; height: 33px; letter-spacing: 4.35px; }
  .section-title--vertical { height: auto; }
  .section-title > span { font-size: 47px; line-height: 33px; letter-spacing: 2.35px; }
  .about { margin-top: 0; padding-bottom: 79px; }
  .about::before { bottom: -33px; border-width: .5px; }
  .about__intro { margin-left: 0; padding-left: 53px; padding-right: 15px; }
  .about__copy { min-height: 414px; padding: 14px 17px; border-width: .5px; }
  .glass-panel { -webkit-backdrop-filter: blur(3.75px); backdrop-filter: blur(3.75px); }
  .event-media { margin-top: 89px; margin-left: 15px; width: calc(100% - 30px); aspect-ratio: 360 / 179; }
  .profile { margin-inline: 15px; }
  .profile__card { display: block; border-width: .5px; }
  .profile__portrait img { width: 100%; height: auto; aspect-ratio: 360 / 179; }
  .profile__body { padding: 22px 11px 17px; border-left: 0; border-top: .5px solid var(--line); min-height: 436px; }
  .profile__role { font-size: 12px; letter-spacing: 1.2px; line-height: 26px; }
  .profile__name { margin-top: 8px; font-size: 20px; line-height: 28px; height: 28px; letter-spacing: 3.8317px; }
  .profile__name span { font-size: 13px; }
  .profile__biography { margin-top: 24px; }
  .profile__sheep { top: calc((100vw - 31px) * 179 / 360 - 69px); bottom: auto; left: -15px; width: 96px; }
  .services { padding-top: 130px; }
  .services::before { border-width: .5px; }
  .services__panel { margin-inline: 15px; padding: 43px 0 125px 65px; }
  .services .section-title { margin-left: -15px; }
  .service-list { margin-top: 38px; gap: 26px; }
  .service-list__item { display: block; min-height: 0; }
  .service-list dt { width: calc(100% - 25px); min-height: 42px; border-width: .5px; font-size: 16px; line-height: 24px; }
  .service-list dt::before { width: 28px; border-width: .5px; }
  .service-list dd { margin-top: 13px; line-height: 26px; }
  .decoration--top { top: 34px; height: 96px; }
  .decoration--top img { width: 1070px; height: 96px; left: calc(50% - 469px); }
  .decoration--middle { bottom: -71px; height: 223px; }
  .decoration--middle img { width: 1072px; height: 223px; left: calc(50% - 581px); }
  .works { margin-top: 173px; }
  .works::before { border-width: .5px; }
  .works__sheep { top: -69px; left: 16px; width: 99px; }
  .works__panel { margin-left: 53px; padding: 47px 15px 39px 27px; }
  .works__panel::before { bottom: 39px; border-width: .5px; }
  .works .section-title--vertical { top: 54px; left: -53px; }
  .work-group h3 { font-size: 18px; line-height: 26px; margin-bottom: 19px; }
  .work-group + .work-group { margin-top: 60px; }
  .work-group li p + p { padding-left: 0; }
  .works__note { width: 11.826px; left: -26px; bottom: 57px; }
  .company { padding-top: 15px; }
  .company__body { margin-inline: 29px 15px; }
  .company .section-title { letter-spacing: 4.35px; font-size: clamp(24px, 7.43vw, 29px); }
  .company__details { display: block; margin-top: 47px; margin-left: 9px; line-height: 26px; }
  .company__details dl > div { grid-template-columns: 65px 1fr; gap: 44px; }
  .company__details dl + dl { margin-top: 5px; }
  .company__details dd { font-size: 12px; white-space: nowrap; }
  .company__contact, .copyright { width: auto; }
  .company__contact { margin-top: 57px; margin-bottom: 43px; margin-left: -14px; }
  .company__contact .contact-link { width: 170px; min-height: 39px; font-size: 22px; }
  .copyright { margin-left: -14px; font-size: 12px; letter-spacing: 2.4px; line-height: 26px; padding-bottom: 23px; white-space: nowrap; }
  .decoration--bottom { top: -86px; height: 160px; }
  .decoration--bottom img { width: 768px; height: 160px; left: calc(50% - 334px); }
  .mobile-menu { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; background: transparent; color: #000; overflow-y: auto; }
  .mobile-menu::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #f5f5f5; opacity: 0; transition: opacity .3s ease-out; }
  .mobile-menu nav { opacity: 0; transition: opacity .3s ease-out; }
  .mobile-menu.is-visible::before, .mobile-menu.is-visible nav { opacity: 1; }
  .mobile-menu::backdrop { background: transparent; }
  .mobile-menu .menu-toggle { right: calc(20px + var(--menu-scrollbar, 0px)); }
  .mobile-menu nav { width: min(100%, 480px); min-height: 844px; margin: 0 auto; padding: 87px 47px 57px; display: flex; flex-direction: column; align-items: center; }
  .mobile-menu__brand { display: block; width: 296px; max-width: 100%; }
  .mobile-menu .nav-links { margin-top: 56px; width: 100%; }
  .mobile-menu .nav-links a { display: block; font-size: 19.116px; line-height: 95.578px; }
  .mobile-menu .contact-link { margin-top: 55px; min-height: 41px; width: 166px; font-size: 21.47px; letter-spacing: 3.22px; }
}
@media (max-width: 374px) {
  .profile__name { font-size: 18px; letter-spacing: 2px; }
  .profile__name span { font-size: 12px; }
  .service-list dt { font-size: 13px; }
  .company__details dl > div { gap: 15px; }
  .company__details dd { white-space: normal; }
  .company .section-title { font-size: 22px; letter-spacing: 3px; }
  .company .section-title > span { font-size: 39px; }
  .copyright { font-size: 10px; letter-spacing: 1.8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}