/* The Top header is the interaction source of truth for every page. */
.nav{color:var(--paper,#f9f6f4)}
#top .nav{background:var(--ink,#4c3f3a)}
.nav a,.nav a[data-label],.nav .menu-toggle{color:var(--paper,#f9f6f4)}
.nav .logo img{filter:brightness(0) invert(1)}
.nav a[data-label]{position:relative}
.nav a[data-label]::after{content:attr(data-label);position:absolute;inset:0;width:0;overflow:hidden;color:var(--accent,#e5634d)!important;white-space:nowrap;transition:width .32s cubic-bezier(.2,.8,.2,1)}
.nav a[data-label]:hover::after,.nav a[data-label]:focus-visible::after{width:100%}
/* One language control for Top, Works, About and Contact. The three former
   per-page classes are kept in the markup so each page's JS keeps working, but
   all of them now also carry .site-lang-switch, which is the only place the
   control is styled: one position, one scale, one 44px hit area everywhere. */
.site-lang-switch{position:fixed;z-index:18;right:var(--rs-gutter-edge,24px);bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:6px;color:var(--ink,#4c3f3a);font:300 11px/1 "helvetica-neue-lt-pro","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.075em;transition:opacity .42s,transform .55s cubic-bezier(.16,1,.3,1)}
.site-lang-switch button{display:grid;place-items:center;min-width:var(--rs-hit-area,44px);min-height:var(--rs-hit-area,44px);padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;opacity:.42}
.site-lang-switch button.is-active{color:var(--accent,#e5634d);font-weight:500;opacity:1}
.site-lang-switch .slash{opacity:.32}
.site-lang-switch.is-hidden{opacity:0;pointer-events:none;transform:translateY(calc(100% + 24px))}
@media(max-width:718px){
  .site-lang-switch{right:var(--rs-gutter-edge,16px);bottom:max(14px,env(safe-area-inset-bottom));gap:0}
  .site-lang-switch button{min-width:36px;min-height:44px}
  .site-lang-switch .slash{margin-inline:-2px}
}
@media(prefers-reduced-motion:reduce){.site-lang-switch{transition:none}}
.site-nav-curtain{position:fixed;z-index:9999;inset:0;background:var(--ink,#4c3f3a);pointer-events:none;transform:translateY(-100%);transition:transform .55s cubic-bezier(.16,1,.3,1);will-change:transform}
.site-nav-curtain.is-leaving{transform:translateY(0)}
.contact-origin-curtain{position:fixed;z-index:10000;inset:0;background:var(--accent,#e5634d);pointer-events:none;transform:translateY(100%);transition:transform .68s cubic-bezier(.5,0,.2,1);will-change:transform}
.contact-origin-curtain.is-leaving{transform:translateY(0)}
html.site-contact-entering::after{content:"";position:fixed;z-index:10000;inset:0;background:var(--accent,#e5634d);pointer-events:none;animation:contact-origin-enter .76s cubic-bezier(.16,1,.3,1) .06s both;will-change:transform}
@keyframes contact-origin-enter{from{transform:translateY(0)}to{transform:translateY(-100%)}}
html.site-nav-entering::after{content:"";position:fixed;z-index:10000;inset:0;background:var(--ink,#4c3f3a);pointer-events:none;transform:translateY(0);animation:site-nav-enter .55s .02s cubic-bezier(.16,1,.3,1) forwards}
@keyframes site-nav-enter{to{transform:translateY(100%)}}
@media(prefers-reduced-motion:reduce){.site-nav-curtain,.contact-origin-curtain,html.site-nav-entering::after,html.site-contact-entering::after{display:none}}

/* One compact navigation rule across Top, Works, About and Contact.
   The hamburger boundary moved from 1000 to 718. A hamburger at 999px is a
   different design, and 719-1439 must stay the 1440 header. It fits: at 719 the
   logo (90) + links (156) + gaps (32) + gutters (143.8) = 421.8px of 719. */
.nav{height:var(--rs-nav-h,56px);font-size:var(--rs-nav,14px)}
.nav .logo,.nav .logo img{width:var(--rs-logo-w,126px)}
.menu-toggle,.mobile-menu{display:none}
@media(max-width:718px){
  .nav{grid-template-columns:1fr auto}
  .nav-center,.nav-links{display:none}
  .nav .menu-toggle{position:relative;inset:auto;transform:none;align-self:center;z-index:10002;display:grid;justify-self:end;width:var(--rs-hit-area,44px);height:var(--rs-hit-area,44px);padding:0;border:0;background:none;place-items:center;cursor:pointer}
  .menu-toggle span{position:absolute;display:block;width:32px;height:1.5px;border-radius:999px;background:var(--paper,#f9f6f4);transform-origin:center;transition:transform .55s cubic-bezier(.16,1,.3,1),background-color .3s}
  .menu-toggle span:first-child{transform:translateY(-5px)}
  .menu-toggle span:last-child{transform:translateY(5px)}
  .menu-open .menu-toggle span,.menu-open.menu-closing .menu-toggle span{background:var(--paper,#f9f6f4)!important}
  .menu-open .menu-toggle span:first-child{transform:rotate(45deg)}
  .menu-open .menu-toggle span:last-child{transform:rotate(-45deg)}
  .mobile-menu{position:fixed;z-index:10001;inset:var(--rs-nav-h,48px) 0 0;display:flex;visibility:hidden;flex-direction:column;padding:clamp(58px,10vh,96px) 20px 24px;background:var(--ink,#4c3f3a);color:var(--paper,#f9f6f4);clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.77,0,.18,1),visibility 0s .7s}
  .menu-open{overflow:hidden}
  .menu-open .mobile-menu{visibility:visible;clip-path:inset(0);transition:clip-path .7s cubic-bezier(.77,0,.18,1)}
  .mobile-menu nav{display:flex;flex-direction:column}
  .mobile-menu a{overflow:hidden;border-bottom:1px solid rgba(249,246,244,.4);padding:8px 0 12px;color:var(--paper,#f9f6f4);font:300 clamp(52px,10vw,82px)/.95 "helvetica-neue-lt-pro","Helvetica Neue",Helvetica,sans-serif;letter-spacing:-.06em;text-transform:none}
  .mobile-menu a span{display:block;transform:translateY(115%);opacity:0;transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .35s}
  .menu-open .mobile-menu a span{transform:none;opacity:1}
  .menu-open .mobile-menu a:nth-child(1) span{transition-delay:.12s}.menu-open .mobile-menu a:nth-child(2) span{transition-delay:.19s}.menu-open .mobile-menu a:nth-child(3) span{transition-delay:.26s}.menu-open .mobile-menu a:nth-child(4) span{transition-delay:.33s}
  .mobile-menu-foot{display:flex;align-items:end;justify-content:space-between;margin-top:auto;font-size:10px;line-height:1.5;letter-spacing:.1em}
  .mobile-menu-foot .menu-studio-logo{display:block;width:150px;height:auto;filter:brightness(0) invert(1)}
}
/* Deleted: the 38x38 shrink (below the 44px hit area) and the rule that existed
   only to undo the Top page's absolutely-positioned hamburger. The toggle is
   never corrected with top/right/translate — it is a grid cell. */
@media(max-width:718px){.menu-toggle span{width:29px}}
@media(prefers-reduced-motion:reduce){.mobile-menu,.menu-toggle span,.mobile-menu a span{transition:none}}

/* Cover the open mobile menu as part of the same navigation curtain. */
.site-nav-curtain{z-index:10003}
.mobile-menu a span::after{content:none!important;display:none!important}
.contact-mini,.works-contact-kicker{transition:color .3s ease}
.contact-mini:hover,.contact-mini:focus-visible,.works-contact-kicker:hover,.works-contact-kicker:focus-visible{color:var(--accent,#e5634d)}
.site-circle-curtain{position:fixed;z-index:10003;left:var(--circle-x,50vw);top:var(--circle-y,50vh);width:20px;height:20px;margin:-10px;border-radius:50%;background:var(--ink,#4c3f3a);pointer-events:none;transform:scale(0);transition:transform .65s cubic-bezier(.76,0,.24,1)}
.site-circle-curtain.is-leaving{transform:scale(var(--circle-scale,120))}
@media(prefers-reduced-motion:reduce){.site-circle-curtain{display:none}.nav a[data-label]::after,.contact-mini,.works-contact-kicker{transition:none}}
.rail .story-end{display:flex;align-items:flex-end;justify-content:flex-start;width:clamp(280px,30vw,440px);padding:48px 40px;flex-shrink:0}
.story-end a{display:inline-flex;align-items:center;min-height:44px;padding:12px 0;font-size:16px;line-height:1.5;letter-spacing:-.025em;color:var(--ink);text-decoration:none}
.story-end a{position:relative}
.story-end a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .65s cubic-bezier(.23,1,.32,1)}
.story-end a.is-entered::after,.story-end a:hover::after,.story-end a:focus-visible::after{transform:scaleX(1)}
.field-control{position:relative}
.field-control::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);pointer-events:none;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.23,1,.32,1)}
.field-control:focus-within::after{transform:scaleX(1)}
.field .field-control input:focus,.field .field-control textarea:focus,.field .field-control select:focus{border-bottom-color:rgba(249,246,244,.4)}
@media(prefers-reduced-motion:reduce){.story-end a::after,.field-control::after{transition:none}}
.story-end a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.card[id^="work-"]{scroll-margin-top:80px}
/* 縦積みになる幅では、戻る導線を右端に置く。読み終わって視線が下りてくる先に合わせる。 */
@media(max-width:718px){.rail .story-end{width:100%;height:auto;padding:32px 0 48px;justify-content:flex-end}.story-end a{font-size:15px}}
@media(max-width:718px){
  .rail .image-panel.story-reveal img{animation:none!important;clip-path:none!important;opacity:1!important}
  .story-reveal-mask{position:absolute;z-index:4;inset:-1px;background:var(--ground);pointer-events:none;transform:translateY(0);transition:transform .65s cubic-bezier(.16,1,.3,1)}
  .story-reveal.is-revealed .story-reveal-mask{transform:translateY(-101%)}
}
@media(min-width:719px),(prefers-reduced-motion:reduce){.story-reveal-mask{display:none}}
img,
picture {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* The nav is a fixed element with its own z-index, so it builds a stacking context:
   the toggle's z-index only competes inside it. The open menu (z 10001) therefore
   painted over the close button. Lift the whole bar above the menu while it is open. */
body.menu-open .nav{z-index:10003}
.menu-studio-home{display:inline-block;line-height:0;text-decoration:none;border:0!important;background:none}
.mobile-menu .mobile-menu-foot a::after,.mobile-menu .mobile-menu-foot a::before{display:none!important}
.menu-studio-home:focus-visible{outline:1px solid currentColor;outline-offset:6px}

/* The language switch used to sit 10-12px from the edge on phones while every other
   block uses the 16px gutter, so it read as stuck to the screen edge. Follow the gutter. */
.site-lang-switch,.lang-switch{right:var(--rs-gutter-edge,16px)!important}
@media(min-width:719px){.site-lang-switch,.lang-switch{right:var(--rs-gutter-edge,24px)!important}}

/* The diagonal arrow used to be the character U+2197. iOS replaces it with the emoji glyph even
   with a text-presentation selector, so the link ended in a coloured sticker. It is drawn from an
   SVG mask instead: same colour as the text, same weight at every size, identical on every device. */
.text-link,.about-thought-label,.about-thought span,.works-contact-thought{display:inline-flex;align-items:center}
.text-link::after,.about-thought-label::after,.about-thought span::after,.works-contact-thought::after{
  content:'';flex:none;width:.62em;height:.62em;margin-left:.5em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='square'%3E%3Cpath d='M5 19 19 5M9 5h10v10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='square'%3E%3Cpath d='M5 19 19 5M9 5h10v10'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Same reason as the diagonal arrow: U+2190 is drawn as an emoji on iOS. */
.back-link{display:inline-flex;align-items:center}
.back-link::before{
  content:'';flex:none;width:.72em;height:.72em;margin-right:.5em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='square'%3E%3Cpath d='M19 12H5M11 6 5 12l6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='square'%3E%3Cpath d='M19 12H5M11 6 5 12l6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}