/* A brighter, playful continuation of the modern portfolio. */
:root{--paper:#fffdf7;--ink:#23233b;--muted:#69677c;--line:#e5e2ec;--accent:#4058e8;background:var(--paper);color:var(--ink)}
.masthead{background:#dcecff;color:var(--ink);border:2px solid var(--ink);border-radius:32px;box-shadow:5px 6px 0 #23233b;margin-bottom:32px;padding-bottom:38px}
.masthead::before{background:none;inset:auto -35px -165px auto;width:440px;height:330px;border-radius:50%;transform:rotate(-20deg);background:#c4dcff;border:2px solid #23233b12}
.masthead::after{width:125px;height:125px;right:170px;top:84px;background:#ffe881;border:2px solid var(--ink);border-radius:50%;box-shadow:none}
.edition{color:#42445c}.edition span:first-child{background:white;border:1.5px solid var(--ink);color:var(--ink);border-radius:99px;transform:rotate(-2deg);font-weight:600;letter-spacing:.06em}
.masthead h1{font-family:"Arial Rounded MT Bold","Hiragino Maru Gothic ProN",Arial,sans-serif;font-weight:800;letter-spacing:-.06em;position:relative;z-index:1}
.brand-dot{color:#ef725d}.masthead-bottom{position:relative;z-index:1;max-width:190px}.masthead-bottom p,.masthead-bottom p:last-child{color:#48465f;font-weight:500}
.navigation{border:1.5px solid var(--ink);border-radius:23px;background:#ffffffed;box-shadow:0 4px 0 #23233b0d}
.service-tabs button{border-radius:99px;font-weight:600;transition:background .2s,transform .2s;min-height:46px}
.service-tabs button[aria-selected=true]{background:var(--accent);box-shadow:2px 3px 0 #23233b;border:1px solid var(--ink)}
.service-tabs button:hover:not([aria-selected=true]){background:#ffeda5;color:var(--ink);transform:translateY(-2px)}
.all-works{font-weight:600}.all-works[aria-current=page]{background:#ffea8e;border:1px solid var(--ink);color:var(--ink);border-radius:99px;box-shadow:2px 2px 0 #23233b}
.section-title h2{font-weight:750}.section-title .eyebrow{color:#68617b}#work-count{background:#ffeaa3;color:#55492e}
#latest-button{background:#ffe788;color:var(--ink);border:1.5px solid var(--ink);box-shadow:3px 3px 0 #23233b;font-weight:600}
#latest-button:hover{background:#ffcf77;color:var(--ink);transform:translateY(-2px)}
.artwork{border:1.5px solid #dcdce6;border-radius:23px;padding:9px;background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s}
.artwork:hover{transform:translateY(-5px);border-color:var(--ink);box-shadow:5px 6px 0 #cbd9ff}
.image-button{border-radius:15px}.image-button .view-label{background:#fff4b9;border:1px solid var(--ink);box-shadow:2px 2px 0 #23233b}
.artwork-meta{padding:15px 8px 10px}.artwork-meta h3{font-weight:600}.work-number{display:inline-flex;align-items:center;justify-content:center;background:#e9eeff;color:#4659b6;border-radius:50%;width:27px;height:27px;flex-shrink:0}
.artwork:nth-child(3n+2) .work-number{background:#ffeadb;color:#955426}.artwork:nth-child(3n) .work-number{background:#f2e7ff;color:#77559c}
.gallery-bottom>a{background:#e4ecff;border:1.5px solid var(--ink);box-shadow:3px 3px 0 #23233b;font-weight:600}.gallery-bottom>a:hover{background:#ffea8e;color:var(--ink);border-color:var(--ink)}
.footer-brand{color:#4058e8}.dialog-close{background:#ffea8e;border:1px solid var(--ink)}dialog{border:2px solid var(--ink);border-radius:24px}
@media(max-width:900px){.masthead::after{right:60px;top:68px;width:100px;height:100px}.masthead-bottom{max-width:none}.masthead h1{max-width:90%}}
@media(max-width:600px){body{padding-top:14px}.masthead{padding:23px 21px 27px;border-radius:25px;box-shadow:4px 5px 0 #23233b;margin-bottom:25px}.edition span:first-child{font-size:.6875rem;padding:7px 10px;border:1px solid var(--ink);letter-spacing:.035em}.masthead h1{font-size:clamp(2rem,11.8vw,4.6rem);max-width:100%;margin-top:30px}.masthead::after{width:58px;height:58px;right:22px;top:68px}.masthead::before{width:240px;height:200px;right:-50px;bottom:-120px}.masthead-bottom p,.masthead-bottom p:last-child{font-size:.8125rem}.navigation{border-radius:20px;padding:8px}.service-tabs button{border-radius:99px;font-size:.8125rem;padding:0 10px}.service-tabs button[aria-selected=true]{box-shadow:2px 2px 0 #23233b}.all-works{font-size:.8125rem}#latest-button{font-size:.8125rem;padding:0 12px}.artwork{border-radius:21px;padding:8px}.image-button{border-radius:13px}.work-number{width:25px;height:25px}.artwork-meta{gap:8px}.artwork-meta h3{gap:8px}.source-label{font-size:.6875rem!important}}
@media(prefers-reduced-motion:reduce){.artwork:hover,.service-tabs button:hover,#latest-button:hover{transform:none}}
.mobile-menu{display:none}
@media(max-width:600px){footer nav[aria-label="外部サービス"]{display:none}}
@media(max-width:600px){
  html{scroll-padding-top:80px;scroll-padding-bottom:calc(var(--mobile-nav-height,78px) + 24px)}
  body{padding-bottom:calc(var(--mobile-nav-height,78px) + 24px)}
  .navigation{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;margin:0;z-index:8;border:0;border-top:1.5px solid var(--ink);border-radius:22px 22px 0 0;padding:12px max(12px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#fffffff5;box-shadow:0 -6px 25px #23233b0b}
  .navigation .all-works,#bottom-works{display:none}
  .service-tabs{gap:5px}.service-tabs button{min-height:46px;font-size:.875rem;padding:0 12px}
  .mobile-menu{display:block;position:fixed;top:max(18px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));z-index:10}
  #menu-toggle{width:46px;height:46px;border:1.5px solid var(--ink);border-radius:50%;background:#fff5b5;box-shadow:2px 3px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
  #menu-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
  #menu-toggle[aria-expanded=true] span:first-child{transform:translateY(6px) rotate(45deg)}
  #menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
  #menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-6px) rotate(-45deg)}
  #mobile-menu-panel{position:absolute;top:60px;right:0;width:min(240px,calc(100vw - 44px));padding:9px;background:white;border:1.5px solid var(--ink);border-radius:17px;box-shadow:4px 5px 0 #23233b}
  #mobile-menu-panel a{display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:13px;font-size:1rem;font-weight:600;border-radius:10px}
  #mobile-menu-panel a:hover,#mobile-menu-panel a[aria-current=page]{background:#e4ecff}
  .edition{padding-right:45px}.edition span:first-child{border:0;background:none;transform:none;padding:0;font-size:.6875rem;max-width:170px;line-height:1.5}
  .section-heading{padding-top:8px}.artwork{scroll-margin-top:80px}
}
