@font-face{font-family:'Kaisei Decol';src:url('assets/kaisei-decol-display.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{--paper:#fbf9f5;--ink:#323b3b;--blue:#496775;--pink:#d8aaa6;--pale:#f0ded7;--line:#c5cecd;--display:'Kaisei Decol','Yu Mincho','Hiragino Mincho ProN',serif;--body:Meiryo,'Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:35px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/2.05 var(--body)}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.17;background-image:radial-gradient(#aa9480 .55px,transparent .55px);background-size:7px 9px}
a{color:inherit;text-underline-offset:6px;text-decoration-thickness:1px}
a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
img{display:block;max-width:100%;height:auto}
p,figure,blockquote{margin:0}
p+p{margin-top:20px}
h1,h2,h3{margin:0;font-weight:700}
h1,h2{font-family:var(--display)}
.wrap{width:min(1100px,calc(100% - 88px));margin-inline:auto}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:24px 0 22px;border-bottom:1px solid var(--line)}
.brand img{width:135px;mix-blend-mode:multiply}
.navigation{display:flex;gap:30px;align-items:center;font-size:14px}
.navigation a{text-decoration:none;position:relative;padding:7px 0}
.navigation a::after{content:'';position:absolute;bottom:2px;left:0;width:100%;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.navigation a:hover::after,.navigation a:focus-visible::after{transform:scaleX(1)}
.location{font:italic 15px/1.3 Georgia,serif;letter-spacing:.12em;color:var(--blue)}
.hero{position:relative;padding:52px 0 0}
.hero-composition{position:relative;display:grid;grid-template-columns:210px minmax(0,1fr);align-items:center;gap:28px}
.hero-title{position:relative;z-index:2;padding-bottom:14px}
.hero-title .location{display:block;margin-bottom:21px;white-space:nowrap}
h1{writing-mode:vertical-rl;font-size:56px;line-height:1.65;letter-spacing:.08em;margin:auto;color:var(--blue)}
h1 span{display:block}
.hero-photo{position:relative;min-width:0;padding:18px 0 32px}
.hero-photo::before{content:'';position:absolute;top:0;bottom:15px;left:-12px;right:17px;border:1px solid var(--pink);pointer-events:none;transform:rotate(-1deg)}
.hero-photo img{position:relative;width:100%;z-index:1}
.hero-photo figcaption{position:absolute;bottom:0;right:16px;color:var(--blue);font-size:12px;letter-spacing:.08em}
.hero-year{position:absolute;z-index:3;right:-20px;bottom:58px;width:114px;height:114px;border-radius:50%;background:var(--paper);border:1px solid var(--blue);outline:1px dashed var(--blue);outline-offset:-8px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.4;color:var(--blue);transform:rotate(8deg)}
.hero-year small{font-size:12px}
.hero-year strong{font:700 36px/1.2 Georgia,serif}
.hero-year span{font-size:13px}
.hero-intro{margin-top:36px;margin-left:238px}
.intro-heading{font-size:24px;line-height:1.8;color:var(--blue);margin-bottom:20px;letter-spacing:.03em}
.intro-body{max-width:36em}
.hero-links{display:flex;flex-wrap:wrap;gap:17px;margin-top:23px}
.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;border:1px solid var(--blue);border-radius:100px;padding:7px 24px;min-height:44px;font-size:14px;text-decoration:none;color:var(--blue);box-shadow:2px 2px 0 var(--pink);transition:transform .25s,box-shadow .25s,background .25s}
.pill:hover{background:var(--pale);transform:translateY(-2px);box-shadow:3px 4px 0 var(--pink)}
.pill:active{transform:translateY(1px);box-shadow:none}
.chapter{margin-top:100px}
.chapter-heading{display:flex;align-items:center;gap:22px;color:var(--blue);margin-bottom:40px}
.chapter-heading::before,.chapter-heading::after{content:'';flex:1;height:7px;background:radial-gradient(circle,var(--blue) .8px,transparent 1px) 0 0/6px 4px;opacity:.45}
.chapter-heading h2{font-size:30px;line-height:1.5;white-space:nowrap;letter-spacing:.1em}
.chapter-heading small{display:block;font:italic 13px/1.8 Georgia,serif;letter-spacing:.08em;text-align:center}
.greeting-paper{position:relative;display:grid;grid-template-columns:280px minmax(0,1fr);gap:68px;max-width:940px;margin:auto;padding:30px 36px 26px 25px;border:1px solid var(--pink)}
.greeting-paper::after{content:'';position:absolute;inset:7px -7px -7px 7px;border:1px solid var(--pink);z-index:-1}
.portrait-card{width:280px;align-self:center;padding:10px 10px 17px;background:#fff;border:1px solid #e1ddd5;box-shadow:3px 5px 0 #e9e5de;transform:rotate(-2deg);transition:transform .6s}
.portrait-card:hover{transform:rotate(0)}
.portrait-card figcaption{font-size:12px;color:var(--blue);text-align:center;margin-top:10px;letter-spacing:.1em}
.letter{padding:18px 0;position:relative}
.letter blockquote{font:25px/1.85 'Yu Mincho','Hiragino Mincho ProN',serif;color:var(--blue);letter-spacing:.05em;margin-bottom:27px;max-width:17em}
.quote-mark{position:relative;display:inline;background:linear-gradient(transparent 78%,var(--pale) 78%,var(--pale) 92%,transparent 92%)}
.letter>p{max-width:34em}
.letter .signature{margin-top:28px;color:var(--blue);font-size:15px}
.signature small{font-size:12px;margin-right:14px}
.flower{position:absolute;width:130px;right:-85px;bottom:-55px;opacity:.7;pointer-events:none;z-index:-1;transform:rotate(12deg)}
.collection-intro{text-align:center;margin-top:-11px;margin-bottom:32px;color:var(--blue)}
.garments{display:grid;grid-template-columns:repeat(3,240px);gap:36px;justify-content:center;align-items:start;padding-bottom:24px}
.garment{position:relative;transition:transform .5s;--tilt:-1.5deg;transform:rotate(var(--tilt))}
.garment:nth-child(2){margin-top:30px;--tilt:1.5deg}
.garment:nth-child(3){--tilt:-1deg}
.garment:hover{transform:rotate(0) translateY(-4px)}
.garment .photo-sheet{padding:9px;background:white;border:1px solid #dfddd7;box-shadow:3px 4px 0 #eae5de}
.garment img{width:220px}
.garment figcaption{margin-top:15px;text-align:center;color:var(--blue);font-size:14px;font-family:'Yu Mincho',serif;letter-spacing:.1em}
.small-goods{grid-template-columns:repeat(4,minmax(0,240px));gap:28px}
.small-goods .garment:nth-child(3){margin-top:0}
.small-goods .garment:nth-child(4){margin-top:30px;--tilt:1.5deg}
.gathering-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:66px;max-width:940px;margin:auto;align-items:center}
.gathering-copy>p{max-width:30em}
.event-list{list-style:none;margin:24px 0 0;padding:0}
.event-list li{padding:13px 0;border-bottom:1px dotted #aab6b8;color:var(--blue);display:flex;gap:13px;align-items:baseline}
.event-list li>span[aria-hidden]{font:italic 15px Georgia,serif;color:#967779;flex:none}
.workshop-card{position:relative;width:360px;padding:14px 14px 21px;background:#fff;border:1px solid var(--line);transform:rotate(1.5deg);transition:transform .6s}
.workshop-card:hover{transform:rotate(0)}
.workshop-card img{width:330px}
.workshop-card figcaption{font-size:12px;color:var(--blue);text-align:center;margin-top:11px}
.workshop-card::before{content:'';position:absolute;width:72px;height:18px;background:var(--pale);opacity:.9;top:-9px;left:calc(50% - 36px);transform:rotate(-6deg)}
.access{margin-bottom:75px}
.address-paper{display:grid;grid-template-columns:1fr 1.1fr;gap:65px;max-width:940px;margin:auto;border:1px solid var(--blue);padding:42px 54px;position:relative;background:#fffdf9}
.address-paper::before{content:'';position:absolute;inset:7px;border:1px solid #c9d1d2;pointer-events:none}
.shop-name{font:italic 29px Georgia,serif;color:var(--blue);margin-bottom:19px}
.shop-name span{display:block;font:13px/2 var(--body);margin-top:7px;letter-spacing:.06em}
address{font-style:normal}
.contact-details{border-left:1px dotted var(--blue);padding-left:42px}
.contact-label{font-size:12px;color:var(--blue);display:block;margin-bottom:3px}
.phone{font:28px/1.4 Georgia,serif;text-decoration:none;letter-spacing:.025em;color:var(--blue)}
.email{font-size:14px;overflow-wrap:anywhere}
.map-link{margin-top:25px}
.contact-details p+p{margin-top:18px}
footer{border-top:3px double var(--line);padding:28px 0;color:var(--blue)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:12px}
.footer-inner a{font-size:13px}
.reveal{--delay:0ms}
@media(prefers-reduced-motion:no-preference){
  .motion .reveal{transition:opacity .85s ease,translate .85s cubic-bezier(.22,1,.36,1);transition-delay:var(--delay)}
  .motion .reveal.pending{opacity:0;translate:0 24px}
  .hero-title{animation:appear .85s both}
  .hero-photo{animation:appear 1s .14s both}
  .hero-intro{animation:appear .8s .3s both}
  .hero-year{animation:stamp .85s .5s both}
  .quote-mark::after{content:'';position:absolute;bottom:4px;left:0;width:100%;height:1px;background:var(--pink);transform-origin:left}
  .greeting-paper.is-visible .quote-mark::after{animation:ink .9s .2s both}
  @keyframes appear{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
  @keyframes stamp{from{opacity:0;scale:.92;rotate:-8deg}to{opacity:1;scale:1;rotate:0deg}}
  @keyframes ink{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media(max-width:950px){
  .wrap{width:calc(100% - 60px)}
  .hero-composition,.hero-intro{grid-template-columns:170px minmax(0,1fr);gap:16px}
  .hero-intro{margin-left:186px}
  .intro-heading{font-size:22px}
  h1{font-size:46px}
  .hero-year{right:-6px;width:96px;height:96px;bottom:26px}
  .hero-year strong{font-size:30px}
  .greeting-paper{gap:36px;grid-template-columns:240px minmax(0,1fr);padding:24px}
  .portrait-card{width:240px}
  .garments{grid-template-columns:repeat(3,minmax(0,220px));gap:22px}
  .small-goods{grid-template-columns:repeat(2,minmax(0,220px));gap:30px}
  .gathering-layout{grid-template-columns:minmax(0,1fr) 330px;gap:32px}
  .workshop-card{width:330px}
  .address-paper{gap:28px;padding:32px}
  .contact-details{padding-left:28px}
  .flower{right:-20px;bottom:-80px;width:90px}
}
@media(max-width:650px){
  .wrap{width:calc(100% - 44px)}
  .site-header{padding:18px 0 16px;display:block}
  .brand{display:block;width:112px;margin:auto}
  .brand img{width:112px}
  .navigation{margin-top:16px;gap:12px;justify-content:space-between;font-size:13px}
  .hero{padding-top:30px}
  .hero-composition{grid-template-columns:82px minmax(0,1fr);gap:13px;align-items:center}
  .hero-title{padding-bottom:0}
  .hero-title .location{font-size:10px;letter-spacing:.01em;margin-bottom:15px;white-space:normal;text-align:center}
  h1{font-size:36px;line-height:1.25;letter-spacing:.07em}
  .hero-photo{padding:12px 0 25px;align-self:center}
  .hero-photo::before{left:-7px;right:8px;bottom:19px}
  .hero-photo figcaption{font-size:10px;right:0;bottom:0;letter-spacing:0}
  .hero-year{width:74px;height:74px;right:-9px;bottom:-45px;outline-offset:-5px}
  .hero-year small{font-size:9px}
  .hero-year strong{font-size:24px}
  .hero-year span{font-size:10px}
  .hero-intro{margin-top:52px;margin-left:0}
  .intro-heading{font-size:21px;margin-bottom:18px}
  .intro-body{font-size:15px;line-height:2}
  .hero-links{gap:13px;margin-top:20px}
  .pill{font-size:13px;padding:7px 18px;gap:17px}
  .chapter{margin-top:66px}
  .chapter-heading{gap:12px;margin-bottom:29px}
  .chapter-heading h2{font-size:25px;letter-spacing:.06em}
  .chapter-heading small{font-size:12px}
  .greeting-paper{display:flex;flex-direction:column;padding:20px 21px 27px;gap:25px}
  .portrait-card{width:200px;order:1}
  .letter{order:0;padding:0;font-size:15px}
  .letter blockquote{font-size:22px;line-height:1.8;letter-spacing:.025em;margin-bottom:22px}
  .letter .signature{font-size:14px;margin-top:21px}
  .signature small{display:block;margin-right:0;margin-bottom:2px;font-size:11px}
  .flower{width:100px;right:-10px;bottom:0;z-index:0;opacity:.22}
  .collection-intro{font-size:14px;margin-bottom:25px}
  .garments{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 18px;padding-bottom:0}
  .garment:nth-child(2){margin-top:22px}
  .garment:nth-child(3){grid-column:1/-1;width:175px;justify-self:center}
  .small-goods{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 18px}
  .small-goods .garment:nth-child(3){grid-column:auto;width:auto;justify-self:stretch}
  .small-goods .garment:nth-child(4){margin-top:22px}
  .garment .photo-sheet{padding:6px}
  .garment figcaption{font-size:13px;margin-top:9px}
  .gathering-layout{display:flex;flex-direction:column;gap:32px}
  .gathering-copy{width:100%;font-size:15px}
  .event-list li{font-size:14px;gap:10px}
  .workshop-card{width:min(100%,330px);padding:10px 10px 17px}
  .workshop-card figcaption{font-size:11px}
  .address-paper{display:block;padding:27px 25px}
  .shop-name{font-size:26px}
  address{font-size:15px}
  .contact-details{padding:24px 0 0;margin-top:24px;border-left:0;border-top:1px dotted var(--blue)}
  .phone{font-size:25px}
  .email{font-size:13px}
  .access{margin-bottom:55px}
  .footer-inner{align-items:flex-start;font-size:10px;gap:16px}
  .footer-inner a{font-size:11px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal.pending{opacity:1!important;translate:none!important}.portrait-card,.garment,.workshop-card,.pill:hover{transform:none}}

/* Mobile line breaks follow authored Japanese phrase boundaries. */
@media(max-width:650px){.phrase{display:inline-block;max-width:100%;vertical-align:top;word-break:normal;overflow-wrap:normal}.intro-heading .phrase{display:block}.hero-photo{padding-bottom:25px}}