/* ======================================================================
   花印 HANAJIRUSHI — premium v1.2 (loaded after premium.css and premium-v11.css on every
   v1.2 site page). Home: the first view is a slider. All pages: phone menu and photo grading
   (at the end of this file).
   Slide 1 is the brand/business hero (with the v1.1 opening on first visit); the next
   slides carry news: exhibition, new product, patent. Slides cross-fade; the labelled
   tabs show progress, and the progress line itself drives autoplay (premium-v12.js
   moves on when it ends), so pausing simply pauses the line. Under
   prefers-reduced-motion nothing moves on by itself.
   ====================================================================== */

.hero--slides{display:block;min-height:0;padding:0}
.hs__track{display:grid}
.hs__s{grid-area:1/1;display:grid;align-items:center;min-height:max(680px,100svh);padding:128px 0 176px;
  opacity:0;visibility:hidden;transition:opacity 1.1s var(--ease),visibility 0s linear 1.1s}
.hs__s.is-on{opacity:1;visibility:visible;transition:opacity 1.1s var(--ease),visibility 0s}

/* ---- announcement slides */
.hs__k{display:inline-block;padding:4px 12px;background:var(--beni-d);color:#fff;font-family:var(--caps);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1.5}
html[lang="ja"] .hs__k{font-family:var(--gothic);letter-spacing:.18em}
.hs__h{margin-top:24px;font-family:var(--mincho);font-weight:500;font-size:clamp(24px,2.9vw,40px);line-height:1.6;letter-spacing:.1em;font-feature-settings:"palt"}
.hs__h .lat{font-family:var(--didone);font-weight:400;font-size:1.06em;letter-spacing:0}
.hs__h em{font-style:normal;color:var(--beni-d)}
html[lang="en"] .hs__h{font-family:var(--didone);font-weight:400;font-size:clamp(38px,4.6vw,70px);line-height:1.06;letter-spacing:-.01em}
html[lang="en"] .hs__h em{font-style:italic}
.hs__txt .hero__lead{max-width:30em}
.hs__txt .tbd{margin-left:8px}
.hs__vis{position:relative;display:grid;justify-items:center}
html[lang="ja"] .hs__vis{order:-1}
.hs__vis .seal--l{position:absolute;right:6%;bottom:8%;transform:rotate(-3deg)}

/* a 円窓 holding a kanji instead of a photo */
.win--kj .win__c{display:grid;place-items:center;align-content:center;gap:20px;background:var(--plum) var(--grain-d)}
.win__kj{font-family:var(--mincho);font-weight:500;font-size:clamp(64px,7vw,112px);line-height:1;letter-spacing:.06em;color:var(--pink-l);writing-mode:vertical-rl}
.win--kj small{font-family:var(--didone);font-style:italic;font-size:clamp(15px,1.4vw,19px);color:var(--gold-l)}

/* ---- entering a slide: window opens, ring is drawn, lines rise, text follows */
.js .hs__s:not(.is-on) .ln>span{transform:translateY(125%);transition:transform .5s ease-in}
.js .hs__s.is-on .ln>span{transition-delay:calc(.35s + var(--i,0) * .12s)}
.js .hs__s:not(.is-on) .hero__tate .ln{clip-path:inset(-.3em -.4em 100% -.4em);transition:clip-path .5s ease-in}
.js .hs__s.is-on .hero__tate .ln{transition-delay:calc(.3s + var(--i,0) * .24s)}
.js .hs__s .win__c{transition:clip-path 1.4s var(--ease-o) .2s}
.js .hs__s:not(.is-on) .win__c{clip-path:circle(0% at 50% 50%);transition:clip-path .5s ease-in}
.js .hs__s.is-on .win__c{clip-path:circle(51% at 50% 50%)}
.js .hs__s .win::before{transition:--ring 1.6s var(--ease-o) .1s}
.js .hs__s:not(.is-on) .win::before{--ring:0deg;transition:none}
.js .hs__s :is(.hs__k,.hero__lead,.hero__ctas,.seal){transition:opacity .9s var(--ease-o) .75s,transform .9s var(--ease-o) .75s}
.js .hs__s:not(.is-on) :is(.hs__k,.hero__lead,.hero__ctas){opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s}
.js .hs__s:not(.is-on) .hs__vis .seal{opacity:0;transform:scale(1.4) rotate(-12deg);transition:opacity .4s,transform .4s}
/* the first-visit opening belongs to slide 1 only */
.intro .hs__s:not(:first-child) :is(.win__c,.win__c img,.win::before,.seal--l){animation:none}

/* ---- controls: count, labelled tabs with progress, previous / pause / next */
.hs__ui{position:absolute;left:var(--gut);right:var(--gut);bottom:34px;z-index:3;display:flex;align-items:center;gap:clamp(16px,2.6vw,36px)}
.hs__n{display:none;align-items:baseline;gap:6px;font-family:var(--didone);font-size:14px;color:var(--ink-3);white-space:nowrap}
.hs__n b{font-weight:400;font-size:24px;line-height:1;color:var(--ink)}
.hs__tabs{display:flex;flex:1;gap:clamp(14px,2.2vw,32px);max-width:860px}
.hs__tabs li{flex:1;min-width:0}
.hs__tabs button{display:grid;gap:12px;width:100%;padding:8px 0;text-align:left;font-size:13px;letter-spacing:.12em;line-height:1.4;color:var(--ink-2);transition:color .3s}
html[lang="en"] .hs__tabs button{font-family:var(--caps);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.hs__tabs button[aria-current]{font-weight:500}
.hs__tabs button:hover,.hs__tabs button[aria-current]{color:var(--ink)}
.hs__tabs span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs__tabs i{position:relative;display:block;height:2px;background:rgba(43,35,38,.16);overflow:hidden}
.hs__tabs i::after{content:"";position:absolute;inset:0;background:var(--beni-d);transform:scaleX(0);transform-origin:left}
.hs__tabs button[aria-current] i::after{animation:hs-fill 7s linear both}
.hero--slides[data-first] .hs__tabs button[aria-current] i::after{animation-duration:8s}
.intro .hero--slides[data-first] .hs__tabs button[aria-current] i::after{animation-delay:2.4s}
.hero--slides.is-paused .hs__tabs i::after{animation-play-state:paused}
@keyframes hs-fill{to{transform:scaleX(1)}}
.hs__btns{display:flex;gap:6px}
.hs__btns button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-d);border-radius:50%;background:rgba(252,250,247,.75);color:var(--ink);transition:border-color .3s}
.hs__btns button:hover{border-color:var(--beni-d)}
.hs__play i{width:9px;height:11px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.hero--slides.is-paused .hs__play i{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.intro .hs__ui{animation:fade-up .9s var(--ease-o) 2s both}

/* ---- home news without the show card (the slider carries the show) */
.news__g--wide{grid-template-columns:1fr}

/* ---- 展示会情報: a list of exhibitions */
.exl__l{margin-top:clamp(40px,4vw,56px);border-top:1px solid var(--line-d)}
.exl{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:start;padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid var(--line-d)}
.exl__d{display:grid;justify-items:start;gap:4px}
.exl__d b{font-family:var(--didone);font-weight:400;font-size:40px;line-height:1}
.exl__d span{font-family:var(--mincho);font-size:16px;letter-spacing:.12em;color:var(--ink-2)}
html[lang="en"] .exl__d span{font-family:var(--caps);font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.exl__d .tbd{margin-top:6px}
.exl__st{display:inline-block;padding:3px 10px;background:var(--beni-d);color:#fff;font-size:11px;font-weight:500;letter-spacing:.14em;line-height:1.6}
.exl h3{margin-top:12px;font-family:var(--didone);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.15}
.exl__v{margin-top:8px;font-size:13.5px;color:var(--ink-2)}
.exl .dl{margin-top:20px;max-width:620px}
.exl .dl div{grid-template-columns:96px 1fr;padding:12px 0}
.exl__a{display:grid;justify-items:start;gap:14px;padding-top:6px}
.exl__none{margin-top:32px;padding:28px 0;border-block:1px solid var(--line-d);color:var(--ink-2)}

@media (max-width:1024px){
  .exl{grid-template-columns:110px minmax(0,1fr)}
  .exl__a{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
}
@media (max-width:760px){
  .exl{grid-template-columns:1fr;gap:16px}
  .exl__d{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:10px}
  .exl__d b{font-size:30px}
  .exl__a{grid-column:auto}
}

@media (max-width:1024px){
  /* phones and tablets: slides start at the top, and the progress bars sit just under the
     header (story style), so it is clear at a glance that the first view changes */
  .hs__s{min-height:0;align-items:start;padding:140px 0 48px}
  .hs__vis{order:-1;width:fit-content;margin-inline:auto}
  .hs__txt{text-align:left}
  .hs__ui{top:84px;bottom:auto;left:var(--gut);right:var(--gut);gap:14px}
  .hs__tabs span{display:none}
  .hs__tabs button{padding:12px 0}
  .hs__tabs{max-width:none}
  .hs__btns button{width:34px;height:34px}
  .hs__n{display:flex}   /* phones and tablets: count + bars (no labels), swipe to change */
  .hs__n b{font-size:18px}
}
@media (max-width:760px){
  .hs__ui{top:72px}
  .hs__s{padding-top:124px}
}
@media (prefers-reduced-motion:reduce){
  .js .hs__s .ln>span{transform:none!important}
  .js .hs__s .hero__tate .ln,.js .hs__s .win__c{clip-path:none!important}
  .js .hs__s :is(.hs__k,.hero__lead,.hero__ctas,.seal){opacity:1!important;transform:none!important}
  .js .hs__s .win::before{--ring:360deg!important}
  .hs__vis .seal--l{transform:rotate(-3deg)!important}
}

/* ======================================================================
   All v1.2 pages
   ====================================================================== */

/* ---- the flower photographs graded down to the palette (they were the most saturated
        thing on the site, so the first view read sweeter than the rest) */
.hero__bg img{filter:saturate(.62) sepia(.1) brightness(1.03)}
.pg-brand .phero__img img{filter:saturate(.45) sepia(.12) brightness(1.04) contrast(.95)}
.phil__img .arch img{filter:saturate(.5) sepia(.12) brightness(1.03)}

/* ---- phone menu */
/* the header stays solid while the drawer is open, so the list scrolls under a clean bar */
html.menu-open .hd{background:rgba(247,242,236,.97);box-shadow:0 1px 0 var(--line)}
/* the language switch stays in the header on phones (overseas visitors look for it first) */
@media (max-width:760px){
  .hd__r>.lng{display:flex}
  .hd__r{gap:14px}
}
/* links fade up in turn when the drawer opens */
.menu .menu__l>li,.menu .menu__side>*{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-o),transform .6s var(--ease-o)}
.menu.open .menu__l>li,.menu.open .menu__side>*{opacity:1;transform:none}
.menu.open .menu__l>li:nth-child(2){transition-delay:.04s}
.menu.open .menu__l>li:nth-child(3){transition-delay:.08s}
.menu.open .menu__l>li:nth-child(4){transition-delay:.12s}
.menu.open .menu__l>li:nth-child(5){transition-delay:.16s}
.menu.open .menu__l>li:nth-child(6){transition-delay:.2s}
.menu.open .menu__side>*{transition-delay:.26s}
@media (prefers-reduced-motion:reduce){
  .menu .menu__l>li,.menu .menu__side>*{opacity:1;transform:none}
}

/* ---- the smallest phones (320 px): the home figures could not shrink below their content */
.name p{min-width:0}
@media (max-width:360px){
  .nums__l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums b.num{font-size:42px}
  html[lang="en"] .nums b.word{font-size:29px}
  .nums b.word{font-size:22px}
}

/* ---- phones: the Japanese vertical headings (brand philosophy, company message) sit above
        the text instead of beside it; side by side, the text column shrank to 100-170 px */
@media (max-width:760px){
  html[lang="ja"] .phil__g,html[lang="ja"] .msg__g{grid-template-columns:1fr;row-gap:36px}
  html[lang="ja"] .phil__tate,html[lang="ja"] .msg__tate{margin-top:24px}
  html[lang="ja"] .msg__sig{white-space:normal}
  /* the free-from circles: the small Latin label ran into the ring */
  .rings small{font-size:8.5px;letter-spacing:.08em;padding-inline:8px}
}