/* styles/yuisho.css
 *
 * One design language for every Yuisho page. The homepage deck and the
 * detail page load this same file, so the tokens, the type scale, the
 * disclosure rows and the buttons cannot drift apart. Page-specific
 * layout belongs beside the page, never here.
 */
:root{
  --sumi:#281f1c; --soft:#6d5f56; --faint:#9b8d83;
  --kinari:#f4eee6; --paper:#fffaf3; --seal:#742c32; --seal-soft:#8d4049;
  --line:rgba(40,31,28,.12); --line-soft:rgba(40,31,28,.07);
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--kinari);color:var(--sumi);
  font:16px/1.85 var(--sans);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}

.screen{min-height:100%;display:flex;flex-direction:column;
  padding:26px 24px 30px;max-width:540px;margin-inline:auto}
.top{display:flex;align-items:center}
.top img{height:28px;width:auto}
.lang{margin-left:auto;background:none;border:0;color:var(--soft);
  font:inherit;font-size:13px;padding:8px 2px;cursor:pointer;border-radius:6px}
.lang:focus-visible{outline:2px solid var(--seal);outline-offset:2px}

.body{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:44px}

/* The introduction reads as writing, not as a specification. */
h1,.panel-s h2{font-family:var(--serif);font-weight:400;letter-spacing:.015em;
  font-size:clamp(27px,7.2vw,36px);line-height:1.55;margin:0 0 22px}
.intro{margin:0 0 14px;font-size:15.5px;color:var(--sumi)}
.intro + .intro{margin-bottom:38px;color:var(--soft)}

/* Depth on demand. Closed, each line is a complete thought; open, it says
   more. Nothing primary is ever hidden to make room for something else. */
.items{border-top:1px solid var(--line)}
.item{border-bottom:1px solid var(--line)}
.q{width:100%;display:flex;align-items:flex-start;gap:14px;
  padding:18px 2px;background:none;border:0;text-align:left;cursor:pointer;
  font:inherit;color:inherit}
.q:focus-visible{outline:2px solid var(--seal);outline-offset:2px;border-radius:4px}
.lbl{flex:0 0 5.2rem;color:var(--faint);font-size:11.5px;letter-spacing:.12em;padding-top:5px}
.say{flex:1;font-size:15.5px}
.plus{flex:0 0 auto;width:20px;height:20px;position:relative;margin-top:6px;opacity:.5;
  transition:opacity .25s var(--ease),transform .4s var(--ease)}
.plus::before,.plus::after{content:"";position:absolute;inset:50% 2px auto;height:1px;
  background:currentColor;transform:translateY(-50%)}
.plus::after{transform:translateY(-50%) rotate(90deg);transition:transform .4s var(--ease)}
.item[open] .plus{opacity:1;transform:rotate(90deg)}
.item[open] .plus::after{transform:translateY(-50%) rotate(90deg) scaleX(0)}

.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.item[open] .panel{grid-template-rows:1fr}
.panel > div{overflow:hidden}
.panel p{margin:0 0 18px;padding-left:calc(5.2rem + 14px);
  color:var(--soft);font-size:14.5px;max-width:28rem;
  opacity:0;transform:translateY(-4px);transition:opacity .35s var(--ease) .08s,transform .35s var(--ease) .08s}
.item[open] .panel p{opacity:1;transform:none}

.act{margin-top:40px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:999px;
  background:var(--seal);color:#fff;text-decoration:none;font-size:15.5px;
  box-shadow:0 1px 2px rgba(40,31,28,.14);
  transition:background .25s var(--ease),transform .25s var(--ease)}
.btn:hover{background:var(--seal-soft);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--sumi);outline-offset:3px}
.quiet{margin:14px 0 0;color:var(--faint);font-size:13px}

.more{margin-top:auto;padding-top:26px;color:var(--faint);font-size:13px;
  text-decoration:none;display:inline-flex;gap:9px;align-items:center;width:fit-content}
.more:hover{color:var(--sumi)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* A deck, not a long page. One panel at a time; a scroll gesture advances to
   the next and it moves, it does not scroll. If a panel is taller than the
   screen it scrolls normally first and only advances at its end, so nothing
   becomes unreachable. Reduced motion turns the whole thing back into an
   ordinary scrolling page. */
html:has(.deck),body:has(.deck){height:100%;overflow:hidden;
  overscroll-behavior:none;overscroll-behavior-y:none}
.deck{position:fixed;inset:0;overscroll-behavior:none;touch-action:pan-y}
.panel-s{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;contain:paint;
  opacity:0;visibility:hidden;transform:translateY(26px) scale(.995);
  transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s linear .55s}
.panel-s[data-active]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.panel-s[data-above]{transform:translateY(-26px) scale(.995)}

.dots{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;gap:11px}
.dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(40,31,28,.22);transition:background .3s var(--ease),transform .3s var(--ease)}
.dots button[aria-current="true"]{background:var(--seal);transform:scale(1.5)}
.dots button:focus-visible{outline:2px solid var(--seal);outline-offset:3px}

.hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;
  color:var(--faint);font-size:12px;letter-spacing:.08em;pointer-events:none;
  transition:opacity .4s var(--ease)}
@media(prefers-reduced-motion:no-preference){
  .hint span{display:inline-block;animation:n 2.6s var(--ease) infinite}
  @keyframes n{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(4px);opacity:1}}
}
@media(prefers-reduced-motion:reduce){
  html:has(.deck),body:has(.deck){overflow:auto}
  .deck{position:static}
  .panel-s{position:static;opacity:1;visibility:visible;transform:none}
  .dots,.hint{display:none}
}

/* Focus is moved into each panel so a keyboard user lands where they just
   navigated. That target should not draw a box: real keyboard focus on
   controls still shows, because those use :focus-visible. */
[tabindex="-1"]:focus{outline:none}

/* ---- First run only ---------------------------------------------------
   A short cinematic opening the first time someone arrives, remembered so
   it never plays again. It can be skipped at any moment, it is skipped
   entirely for reduced motion, and if storage is unavailable it simply does
   not play rather than repeating on every visit. */
.intro-seq{position:fixed;inset:0;z-index:50;background:var(--ink,#120d0c);
  display:grid;place-items:center;overflow:hidden}
.intro-seq[hidden]{display:none}
.seq-stage{position:relative;width:min(88vw,460px);text-align:center}

.seq-mark{width:168px;height:auto;margin-inline:auto;display:block;
  filter:brightness(1.7) saturate(.9);
  opacity:0;transform:scale(.94);
  -webkit-mask-image:linear-gradient(100deg,#000 32%,transparent 46%);
  mask-image:linear-gradient(100deg,#000 32%,transparent 46%);
  -webkit-mask-size:280% 100%;mask-size:280% 100%;
  -webkit-mask-position:100% 0;mask-position:100% 0}
.run .seq-mark{animation:markIn 1500ms var(--ease) 180ms both,
                         markWipe 1700ms var(--ease) 180ms both}
@keyframes markIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes markWipe{to{-webkit-mask-position:0 0;mask-position:0 0}}

.seq-line{margin:26px 0 0;color:#efe4d6;font-family:var(--serif);
  font-size:clamp(17px,4.6vw,21px);letter-spacing:.06em;line-height:1.9}
.seq-line b{display:block;font-weight:400;opacity:0;transform:translateY(10px);filter:blur(6px)}
.run .seq-line b{animation:lineIn 1100ms var(--ease) both}
.run .seq-line b:nth-child(1){animation-delay:1250ms}
.run .seq-line b:nth-child(2){animation-delay:2150ms}
@keyframes lineIn{to{opacity:1;transform:none;filter:blur(0)}}

/* A single hairline of light sweeps once, the way a seal catches it. */
.seq-glint{position:absolute;inset:-40% -10%;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,236,210,.16) 50%,transparent 58%);
  transform:translateX(-60%);opacity:0}
.run .seq-glint{animation:glint 1500ms var(--ease) 1500ms both}
@keyframes glint{0%{transform:translateX(-60%);opacity:0}
  35%{opacity:1}100%{transform:translateX(60%);opacity:0}}

.seq-skip{position:fixed;right:18px;bottom:18px;background:none;border:0;
  color:rgba(239,228,214,.5);font:inherit;font-size:12.5px;letter-spacing:.08em;
  padding:10px;cursor:pointer;border-radius:8px}
.seq-skip:hover{color:#efe4d6}
.seq-skip:focus-visible{outline:2px solid #efe4d6;outline-offset:2px}

/* The curtain lifts and the site is already behind it. */
.intro-seq.out{animation:lift 900ms var(--ease) both}
@keyframes lift{to{opacity:0;transform:translateY(-2%) scale(1.03);visibility:hidden}}
.deck.enter .panel-s[data-active]{animation:settle 1100ms var(--ease) both}
@keyframes settle{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){.intro-seq{display:none!important}}

/* ---- Panel movement ---------------------------------------------------
   The panel does not merely fade. Its contents arrive in sequence, and they
   arrive from the direction you travelled, so moving back feels like going
   back rather than like a second forward step. */
.panel-s{transition:opacity .62s var(--ease),transform .62s var(--ease),visibility 0s linear .62s}
.deck[data-dir="up"] .panel-s{transform:translateY(-30px) scale(.993)}
.deck[data-dir="up"] .panel-s[data-above]{transform:translateY(30px) scale(.993)}

/* Visible by default. The entrance is an enhancement applied on activation,
   so if an animation never runs the words are still simply there. Content
   that depends on JavaScript to become visible is content that can vanish. */
.panel-s[data-active] .body > *{animation:rise .72s var(--ease) backwards}
.panel-s[data-active] .body > *:nth-child(1){animation-delay:.06s}
.panel-s[data-active] .body > *:nth-child(2){animation-delay:.13s}
.panel-s[data-active] .body > *:nth-child(3){animation-delay:.20s}
.panel-s[data-active] .body > *:nth-child(4){animation-delay:.27s}
.panel-s[data-active] .body > *:nth-child(5){animation-delay:.34s}
@keyframes rise{from{opacity:0;transform:translateY(16px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}

/* The rule under each row draws itself rather than appearing. */
.panel-s[data-active] .item{animation:draw .8s var(--ease) both}
.panel-s[data-active] .item:nth-child(1){animation-delay:.24s}
.panel-s[data-active] .item:nth-child(2){animation-delay:.32s}
.panel-s[data-active] .item:nth-child(3){animation-delay:.40s}
@keyframes draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.panel-s[data-active] .item{animation-fill-mode:backwards}

/* Progress reads as a measure, not as three dots. */
.dots{gap:0}
.dots button{width:1px;height:26px;border-radius:0;background:rgba(40,31,28,.18);
  position:relative;transition:background .4s var(--ease)}
.dots button::after{content:"";position:absolute;inset:0;background:var(--seal);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.dots button[aria-current="true"]::after{transform:scaleY(1)}
.dots button[aria-current="true"]{transform:none}

@media(prefers-reduced-motion:reduce){
  .panel-s .body > *,.panel-s .item{opacity:1!important;transform:none!important;
    filter:none!important;animation:none!important;clip-path:none!important}
}

.eyebrow-s{margin:0 0 14px;color:var(--faint);font-size:11.5px;letter-spacing:.14em}
.h-mid{font-size:clamp(24px,6.4vw,32px)!important}
.shot{margin:0 0 26px}
.shot img{width:100%;height:clamp(150px,30vh,240px);object-fit:cover;border-radius:3px;display:block}
.shot figcaption{margin-top:9px;color:var(--faint);font-size:12px}
.item .q{cursor:default}

/* ---- Everything fits -------------------------------------------------
   A panel is exactly one screen. Nothing sits below the fold, so a scroll
   gesture always moves to the next panel instead of travelling down inside
   this one. Sizes are tied to viewport height as well as width, so a short
   laptop window compresses rather than overflowing. */
.panel-s{overflow:hidden}
/* A panel that genuinely does not fit scrolls to its end before the deck
   moves on. Everything else still advances on the first gesture. */
.panel-s:has(details[open]),.panel-form{overflow-y:auto}
.panel-s:has(details[open]) .screen,.panel-form .screen{height:auto;min-height:100%;padding-bottom:72px}
.panel-s:has(details[open]) .body,.panel-form .body{justify-content:flex-start}
.panel-s .top{transition:opacity .28s var(--ease)}
.fine{margin:auto 0 0;display:flex;gap:18px;flex-wrap:wrap;font-size:12px}
.fine a{color:var(--soft);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.12);padding-bottom:1px}
.fine a:hover{color:var(--ink)}
.screen{height:100%;min-height:100%;padding:clamp(16px,2.4vh,26px) 24px clamp(16px,2.4vh,30px)}
/* every slide leaves room for the fixed mark and language control */
.panel-s .screen{padding-top:calc(clamp(14px,2.2vh,24px) + 30px)}
.body{padding-block:clamp(12px,3vh,40px);min-height:0}
h1,.panel-s h2{font-size:clamp(23px,min(7vw,4.6vh),36px);line-height:1.5;margin:0 0 clamp(10px,1.8vh,22px)}
.h-mid{font-size:clamp(21px,min(6vw,3.9vh),31px)!important}
.panel-s h2{margin:0 0 clamp(10px,1.8vh,22px)}
.intro{font-size:clamp(14px,min(4vw,1.9vh),15.5px);margin:0 0 clamp(8px,1.4vh,14px)}
.intro + .intro{margin-bottom:clamp(14px,3vh,38px)}
.q{padding:clamp(11px,1.8vh,18px) 2px}
.say{font-size:clamp(14px,min(4vw,1.9vh),15.5px)}
.panel p{margin-bottom:clamp(10px,1.6vh,18px)}
.shot img{height:clamp(84px,19vh,200px)}
@media (max-height:700px){.shot img{height:clamp(72px,13vh,140px)}}
/* iPhone SE class: the photograph gives up height so the slide still fits. */
@media (max-height:700px) and (max-width:430px){.shot img{height:clamp(72px,12vh,130px)}
  }
/* 320x580 (iPhone SE, 2016) is the floor: the caption goes and the lines
   tighten so the worked example still fits in one screen. */
@media (max-height:600px) and (max-width:340px){
  .shot figcaption{display:none}
  .shot{margin-bottom:8px}
  .items .say{font-size:13px;line-height:1.6}
  .quiet{font-size:11.5px;line-height:1.65}
  .shot figcaption{margin-top:4px;font-size:11px}}
.shot{margin:0 0 clamp(8px,1.6vh,20px)}
.act{margin-top:clamp(16px,3vh,40px)}
.btn{padding:clamp(12px,1.8vh,16px) 30px}
.more{padding-top:clamp(12px,2vh,26px)}
.eyebrow-s{margin-bottom:clamp(8px,1.4vh,14px)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 clamp(10px,1.6vh,16px)}
/* All six records carry a thumbnail: two rows of three, three columns of two
   on a phone is too narrow, so phones get two columns and three rows. */
.cards-six{grid-template-columns:repeat(2,1fr);gap:9px}
@media (min-width:560px){.cards-six{grid-template-columns:repeat(3,1fr)}}
.cards-six img{height:clamp(62px,9.5vh,104px)}
.card{text-decoration:none;color:inherit;display:block}
.card img{width:100%;height:clamp(78px,13vh,130px);object-fit:cover;border-radius:3px;display:block;
  transition:transform .4s var(--ease),filter .4s var(--ease);filter:saturate(.92)}
.card:hover img{transform:translateY(-2px);filter:saturate(1)}
.card span{display:block;margin-top:7px;font-size:clamp(11px,min(3vw,1.5vh),12.5px);color:var(--soft)}
.card:focus-visible{outline:2px solid var(--seal);outline-offset:3px;border-radius:4px}
.rest{margin:0 0 clamp(12px,2vh,20px);display:flex;gap:18px;flex-wrap:wrap}
.rest a{color:var(--faint);font-size:clamp(12px,min(3.4vw,1.6vh),13.5px);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.rest a:hover{color:var(--sumi);border-bottom-color:var(--line)}

/* The canonical mark keeps its proportions wherever it appears. */
.lockup-exact-img{height:auto;aspect-ratio:244 / 112}
.top .lockup-exact-img{height:28px;width:auto}

/* The skip link stays out of the way until a keyboard reaches it. */
.skip-link{position:absolute;left:-9999px;top:10px;z-index:20;
  background:var(--paper);color:var(--seal);padding:10px 14px;border-radius:3px;
  border:1px solid var(--line);font-size:14px;text-decoration:none}
.skip-link:focus,.skip-link:focus-visible{left:12px;outline:2px solid var(--seal);outline-offset:2px}



/* The enquiry, inside the deck. Same controls as everywhere else. */
.panel-form .form{margin-top:22px}
.panel-form .form label{display:block;margin:16px 0 6px;font-size:13.5px;color:var(--soft)}
.panel-form input[type=text],.panel-form input:not([type]),
.panel-form input[type=email],.panel-form textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:3px;
  background:var(--paper);font:inherit;font-size:15.5px;color:var(--sumi)}
.panel-form input:focus-visible,.panel-form textarea:focus-visible{
  outline:2px solid var(--seal);outline-offset:1px}
.panel-form .intent-field{border:0;margin:0;padding:0}
.panel-form .intent-field legend{padding:0;font-size:13.5px;color:var(--soft)}
.panel-form .intent-options{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.panel-form .intent-options label{display:inline-flex;align-items:center;gap:7px;margin:0;
  padding:8px 13px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:14px}
.panel-form .intent-options input,.panel-form .check input{accent-color:var(--seal)}
.panel-form .check{display:flex;gap:10px;align-items:flex-start;margin-top:20px}
.panel-form .check input{margin-top:5px}
.panel-form .fineprint{font-size:12.5px;margin-top:8px}
.panel-form .fineprint a{color:var(--seal)}
.panel-form .form .btn{margin-top:22px}
.panel-form .form-msg{margin-top:14px;font-size:14px;color:var(--soft)}
.panel-form .contact-action{margin-top:18px}

/* The mark and the language control belong to the whole deck, not to its
   first slide. Before, advancing left a reader with no way back to English. */
.deck-top{position:fixed;top:0;left:0;right:0;z-index:7;display:flex;
  align-items:center;gap:12px;max-width:540px;margin-inline:auto;
  padding:26px 24px 0;transition:opacity .28s var(--ease)}
.deck-top img{height:28px;width:auto}
.deck-top .lang{margin-left:auto}
@media (max-height:660px){.deck-top{padding-top:16px}}

/* Nothing but the active slide animates, so no neighbour can paint a row
   through the cross-fade. */
.panel-s:not([data-active]) .body > *,
.panel-s:not([data-active]) .item{animation:none!important}