/* HIYORI TOP (en) — transcribed verbatim from the Claude Design export (en/AB2.dc.html) */
body{margin:0;background:#0f1317}
a{color:#e8e4dc;text-decoration:none}a:hover{color:#ffffff}
.ab{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;color:#e8e4dc;background:#0f1317;overflow-x:clip;overflow-y:visible;position:relative}
.paper{color:#1a1d20}.paper a{color:#1a1d20}
.lat{font-family:'Cormorant Garamond','Times New Roman',serif}
.vt{writing-mode:vertical-rl;text-orientation:mixed}
.ph{position:absolute;overflow:hidden;background:#1a2026}
.ph span{position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.18em;color:rgba(232,228,220,.55);font-family:'Cormorant Garamond',serif}
.ph-light span{color:rgba(26,29,32,.55)}
.ph-mist{background:
  radial-gradient(60% 50% at 30% 35%,rgba(121,135,146,.55),transparent 70%),
  radial-gradient(50% 40% at 75% 70%,rgba(84,97,108,.6),transparent 70%),
  linear-gradient(180deg,#2a333b 0%,#1a2127 55%,#121719 100%)}
.ph-detail{background:
  radial-gradient(60% 60% at 40% 45%,rgba(230,226,218,.9),transparent 70%),
  linear-gradient(160deg,#cfc9bf 0%,#b4ada2 100%)}
.ph-dusk{background:
  radial-gradient(60% 50% at 50% 100%,rgba(90,105,120,.7),transparent 70%),
  linear-gradient(180deg,#9aa6b2 0%,#5d6a78 45%,#1f2a35 100%)}
.ph-fire{background:
  radial-gradient(16% 13% at 52% 42%,rgba(226,190,132,.92),rgba(190,140,80,.32) 42%,transparent 70%),
  radial-gradient(40% 30% at 52% 46%,rgba(150,110,70,.22),transparent 70%),
  linear-gradient(180deg,#07090c 0%,#0c1014 70%,#0f1317 100%)}
.ph-koi{background:
  radial-gradient(18% 14% at 62% 38%,rgba(200,120,80,.55),transparent 70%),
  radial-gradient(14% 12% at 36% 62%,rgba(240,235,225,.7),transparent 70%),
  linear-gradient(180deg,#3b5059 0%,#2a3c44 100%)}
.water{position:absolute;inset:0;pointer-events:none}
.fog{position:absolute;inset:-6%;will-change:transform}
.fog i{position:absolute;display:block;border-radius:50%;filter:blur(46px)}
.fog-a i{animation:driftA 46s ease-in-out infinite alternate}
.fog-b i{animation:driftB 58s ease-in-out infinite alternate}
.fog-c i{animation:driftA 70s ease-in-out infinite alternate-reverse}
@keyframes driftA{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,1.5%,0)}}
@keyframes driftB{from{transform:translate3d(2%,1%,0)}to{transform:translate3d(-2%,-1%,0)}}
.nav a{font-size:12px;letter-spacing:.12em;color:rgba(232,228,220,.78)}
.ul{position:relative;display:inline-block;padding-bottom:6px}
.ul:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.5}
.diff{mix-blend-mode:difference;color:#dedbd4}
.sticky{position:sticky;top:0;height:100vh;max-height:920px;overflow:hidden}
[data-js] .sig-title{opacity:0;transform:none;transition:opacity 2.4s ease-out,transform 2.8s cubic-bezier(.16,.6,.2,1)}
[data-js] .sig-item{opacity:0;transform:none;transition:opacity 2s ease-out,transform 2.4s cubic-bezier(.16,.6,.2,1)}
[data-js].go .sig-title,[data-js].go .sig-item{opacity:1;transform:none}
/* the whole night section stays invisible (not merely transparent) until the About dark is complete */
section[data-js][data-sig]{visibility:hidden}
section[data-js][data-sig].go{visibility:visible;background:#0f1317}
/* leaving upward: everything fades together in half a second, then the section hides */
section[data-js][data-sig].out{visibility:visible;background:transparent}
/* returning upward from the koi: the last chapter dissolves into the black, then the page is carried back to the About dark */
section[data-js][data-sig].leave .sticky{opacity:0;transition:opacity .95s ease}
section[data-js][data-sig].out .scene{opacity:0;transform:none;transition:opacity 1.4s ease!important;transition-delay:0s!important}
.reveal{transition:opacity 2.2s ease,transform 2.6s cubic-bezier(.16,.5,.2,1),filter 2.2s ease}
[data-js] .reveal{opacity:0;transform:translate3d(0,30px,0);filter:blur(6px)}
[data-js] .reveal.in{opacity:1;transform:none;filter:blur(0)}
.nav>a,.nav>div{position:relative;z-index:6}
.burger{outline:none;-webkit-tap-highlight-color:transparent;will-change:transform}
.burger:focus{outline:none;box-shadow:none}
.burger:focus-visible span{background:#fff}
.burger span{transition:transform 1s cubic-bezier(.16,1,.3,1),background-color .3s ease;transform-origin:50% 50%;will-change:transform}
/* over the light (paper / beige) sections the two lines turn charcoal; once the menu is open the × keeps its light colour on the dark drawer */
.burger[data-tone="light"]:not(.open) span{background-color:#242424!important}
.burger.open span:first-child{transform:translateY(4px) rotate(45deg)}
.burger.open span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{transform:translateX(100%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.menu.open{transform:none}
.menu a:hover{color:#fff}
.menu-veil{opacity:0;pointer-events:none;transition:opacity 1s cubic-bezier(.16,1,.3,1)}
.menu-veil.open{opacity:1;pointer-events:auto}
/* ---- lower half (WHY OJIYA and after): its own placeholders and its own quiet entrance ---- */
.ph-sake{background:radial-gradient(40% 30% at 50% 30%,rgba(120,110,95,.5),transparent 70%),linear-gradient(180deg,#2a2622 0%,#15171a 100%)}
.ph-rice{background:radial-gradient(70% 60% at 30% 70%,rgba(198,186,150,.75),transparent 70%),linear-gradient(180deg,#b9b7a6 0%,#8d9078 60%,#5d6552 100%)}
.ph-snow{background:radial-gradient(60% 50% at 40% 40%,rgba(200,208,214,.7),transparent 70%),radial-gradient(50% 40% at 75% 75%,rgba(70,82,92,.7),transparent 70%),linear-gradient(180deg,#b8c0c6 0%,#6d7a85 50%,#1b2228 100%)}
.ph-portrait{background:radial-gradient(50% 40% at 50% 35%,rgba(90,96,100,.7),transparent 70%),linear-gradient(180deg,#5a6065 0%,#2d3236 100%)}
.hy-cta i{transition:width 1s cubic-bezier(.16,1,.3,1)}
.hy-cta:hover i{width:180px}
[data-lw] .lw{opacity:0;transform:translate3d(0,22px,0);transition:opacity 1.8s ease,transform 2.2s cubic-bezier(.16,.5,.2,1)}
[data-lw] .lw.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-lw] .lw{transition:none;transform:none;opacity:1}}
/* ---- WHY OJIYA: centre message, five cultures around it ----
   Layout follows the section's own width (container query), not the window:
   >=1420px  the five photographs around the centre (the composition needs 60–1380px of a 1440 frame)
   768–1419  two columns under the message
   <=767     one column */
.wo{container-type:inline-size;container-name:wo}
.wo figure{margin:0}
.wo-stage{position:relative;max-width:1040px;margin:0 auto;padding:120px 48px 72px;box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr;gap:56px 40px}
.wo-center{grid-column:1 / -1;text-align:center;margin:0 auto 24px;max-width:100%}
.wo-item{min-width:0}
.wo-snow{grid-column:1 / -1;width:calc(50% - 20px);justify-self:center}
.wo-ph{position:relative;width:100%;aspect-ratio:16 / 10;height:auto}
/* hover (mouse only): the whole photograph — its frame with it — swells slowly from its centre, and settles back just as gently */
.wo-ph{overflow:visible!important}
.wo-ph img{transform:scale(1);transform-origin:50% 50%;transition:transform 1.8s cubic-bezier(.22,.61,.36,1);will-change:transform}
@media (hover:hover) and (pointer:fine){.wo-ph:hover{z-index:2}.wo-ph:hover img{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.wo-ph img{transition:none}.wo-ph:hover img{transform:none}}
.wo-cap{margin-top:16px}
.wo-cap b{display:block;font-weight:500;font-size:19px;letter-spacing:.16em;color:#1a1d20}
.wo-cap span{display:block;margin-top:8px;font-size:12.5px;line-height:2;letter-spacing:.06em;color:rgba(26,29,32,.7)}
.wo-snow .wo-cap{text-align:center}
.wo-note{grid-column:1 / -1;margin:8px 0 0;text-align:center;font-size:11px;line-height:2;letter-spacing:.06em;color:rgba(26,29,32,.48)}
/* entrance (two / one column): a quiet rise, one after another */
[data-js].wo .wo-center{opacity:0;transition:opacity 1.8s ease}
[data-js].wo .wo-ph{opacity:0;transform:translate3d(0,16px,0);transition:opacity 1.6s ease,transform 2s cubic-bezier(.16,.6,.2,1);transition-delay:calc(.8s + var(--d))}
[data-js].wo .wo-cap{opacity:0;transition:opacity 1.4s ease;transition-delay:calc(1.6s + var(--d))}
[data-js].wo .wo-note{opacity:0;transition:opacity 1.4s ease 2.6s}
[data-js].wo.on .wo-center,[data-js].wo.on .wo-ph,[data-js].wo.on .wo-cap,[data-js].wo.on .wo-note{opacity:1;transform:none}
@container wo (max-width:767px){
  .wo-stage{grid-template-columns:1fr;max-width:600px;padding:96px 24px 56px;gap:44px}
  .wo-snow{width:auto;justify-self:stretch}
  .wo-snow .wo-cap{text-align:left}
  .wo-cap b{font-size:17px}
  .wo-note{text-align:left}
}
@container wo (min-width:1420px){
  .wo-stage{display:block;max-width:1440px;height:1180px;padding:0}
  .wo-center{position:absolute;left:50%;top:360px;width:480px;margin:0 0 0 -240px}
  .wo-item{position:absolute;width:320px}
  .wo-ph{height:200px;aspect-ratio:auto}
  .wo-koi{left:150px;top:90px}
  .wo-sake{left:970px;top:90px}
  .wo-rice{left:60px;top:480px}
  .wo-chijimi{left:1060px;top:480px}
  .wo-snow{left:560px;top:760px;width:320px}
  .wo-note{position:absolute;left:0;right:0;top:1110px;margin:0}
  /* the photographs open outward from the centre */
  [data-js].wo .wo-ph{transform:translate3d(var(--dx),var(--dy),0) scale(.97);transition:opacity 1.6s ease,transform 2.1s cubic-bezier(.16,.6,.2,1);transition-delay:calc(.8s + var(--d))}
  [data-js].wo.on .wo-ph{transform:none}
}
/* centre message: true optical centring — cancel the trailing letter-spacing of every line, and the blank half of line-end 、。 */
.wo-center{text-align:center}
.wo-c-label{padding-left:.38em}
.wo-c-head{padding-left:.14em}
.wo-c-body{padding-left:.08em}
/* the message keeps its own line breaks at every width: never wraps; on narrow screens the type steps down just enough to fit */
.wo-c-head,.wo-c-body{white-space:nowrap}
.wo-center h2.wo-c-head{font-size:min(34px, calc((100cqi - 48px) / 9.6))!important}
.wo-center p.wo-c-body{font-size:min(13.5px, calc((100cqi - 48px) / 23.6))!important}
@container wo (max-width:767px){ .wo-center h2.wo-c-head{font-size:min(26px, calc((100cqi - 48px) / 9.6))!important} }
.wo-pe{margin-right:-.5em}
/* ---- HOW WE DESIGN: 01→04 read right to left. Layout follows the section's own width:
   >=1420px  the staircase (01 at the right, 04 at the left; the four heights are the same as before)
   1100–1419 one right-to-left row with the same stagger
   768–1099  two by two, right to left, top to bottom
   <=767     a plain list, 01 to 04, top to bottom, set horizontally ---- */
.hw{container-type:inline-size;container-name:hw}
.hw-stage{position:relative;max-width:1440px;margin:0 auto;padding:140px 48px 120px;box-sizing:border-box}
.hw-eyebrow{position:relative;font-size:12px;letter-spacing:.34em;line-height:1;color:rgba(232,228,220,.5)}
.hw-h2{position:relative;margin:32px 0 0;font-size:30px;font-weight:500;line-height:1.85;letter-spacing:.1em;color:#f4f1eb}
.hw-item{display:flex;flex-direction:row-reverse;gap:28px;height:400px}
.hw-num{font-size:54px;font-weight:300;line-height:1;color:rgba(232,228,220,.35)}
.hw-lab{font-size:12px;letter-spacing:.34em;color:rgba(232,228,220,.55);padding-top:6px}
.hw-body{font-size:14px;line-height:2.3;letter-spacing:.08em;color:rgba(232,228,220,.88)}
.hw-cta{position:relative;display:inline-block;margin-top:72px;font-size:12.5px;letter-spacing:.22em;color:#f4f1eb}
/* 1100–1419: one row, right to left (01 rightmost), stagger kept */
.hw-steps{display:flex;flex-direction:row-reverse;justify-content:center;align-items:flex-start;gap:56px;margin-top:90px}
.hw-s1{margin-top:100px}.hw-s2{margin-top:0}.hw-s3{margin-top:140px}.hw-s4{margin-top:60px}
@container hw (max-width:1099px){
  .hw-steps{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:96px;row-gap:56px}
  .hw-s1{grid-column:2;grid-row:1;margin-top:0}
  .hw-s2{grid-column:1;grid-row:1;margin-top:70px}
  .hw-s3{grid-column:2;grid-row:2;margin-top:0}
  .hw-s4{grid-column:1;grid-row:2;margin-top:70px}
}
@container hw (max-width:767px){
  .hw-stage{padding:100px 24px 88px}
  .hw-h2{font-size:22px}
  .hw-h2 br{display:none}
  .hw-steps{display:flex;flex-direction:column;gap:40px;margin-top:56px}
  .hw-s1,.hw-s2,.hw-s3,.hw-s4{margin-top:0}
  .hw-item{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:18px;row-gap:12px;height:auto;padding-top:22px;border-top:1px solid rgba(232,228,220,.12)}
  .hw-num{font-size:40px;grid-column:1;grid-row:1}
  .hw-lab{writing-mode:horizontal-tb;grid-column:2;grid-row:1;padding-top:0}
  .hw-body{writing-mode:horizontal-tb;grid-column:1 / -1;grid-row:2;line-height:2.1}
  .hw-body br{display:none}
  .hw-cta{margin-top:56px}
}
@container hw (min-width:1420px){
  .hw-stage{height:1000px;padding:0}
  .hw-eyebrow{position:absolute;left:120px;top:150px}
  .hw-h2{position:absolute;left:120px;top:194px;margin:0}
  .hw-steps{display:block;margin:0}
  .hw-item{position:absolute;margin:0}
  .hw-s4{left:120px;top:460px}
  .hw-s3{left:440px;top:540px}
  .hw-s2{left:760px;top:400px}
  .hw-s1{left:1060px;top:500px}
  .hw-cta{position:absolute;left:120px;top:900px;margin:0}
}
/* ---- FROM OJIYA: photo / text / vertical phrase. Layout follows the section's own width:
   >=1280px  three areas side by side (photo left, text centre, phrase right)
   <1280     upper row: the portrait photo with the phrase beside it (one unit); lower row: the text, left-aligned, limited width.
             The photo keeps its 340:540 portrait shape at every width and only scales down on narrow screens. ---- */
.fo{container-type:inline-size;container-name:fo}
.fo-stage{position:relative;max-width:720px;margin:0 auto;box-sizing:border-box;padding:120px 48px 128px;display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-areas:"unit" "tx";row-gap:0}
/* the photo and the phrase are one unit, centred as a whole by its own flex layout */
.fo-unit{grid-area:unit;display:flex;justify-content:center;align-items:flex-start;gap:clamp(32px, 10cqi, 104px);min-width:0}
.fo-ph{position:relative;flex:0 1 340px;min-width:0;width:auto;aspect-ratio:340 / 540;height:auto;max-height:none}
/* the phrase box is itself vertical, so its width is simply its columns (a horizontal box around vertical lines is mis-measured by the grid) */
.fo-quote{flex:none;writing-mode:vertical-rl;display:flex;flex-direction:column;gap:22px;align-self:start;padding-top:8px;width:max-content;height:max-content}
/* the text block is as wide as its longest line (at most 560px) and centred as a block; the lines inside stay left-aligned */
.fo-text{grid-area:tx;justify-self:center;width:fit-content;min-width:0;max-width:min(560px, 100%);margin-top:96px;text-align:left}
.fo-h2{margin:0;font-size:30px;font-weight:500;line-height:1.85;letter-spacing:.1em;color:#1a1d20}
.fo-body{margin-top:48px;font-size:14px;line-height:2.2;letter-spacing:.08em;color:rgba(26,29,32,.82)}
.fo-body p{margin:0;white-space:nowrap}
.fo-body p+p{margin-top:22px}
.fo-link{display:inline-block;margin-top:48px;font-size:12.5px;letter-spacing:.22em;color:#1a1d20}
.fo-q-main{font-size:26px;font-weight:500;letter-spacing:.22em;line-height:1.6;color:#1a1d20}
.fo-q-sub{font-size:14px;letter-spacing:.2em;color:rgba(26,29,32,.66);padding-top:6px}
.fo-q-main,.fo-q-sub{white-space:nowrap;flex:0 0 auto}
.fo-q-main{width:1.6em}
.fo-q-sub{width:1.5em;line-height:1.5}
/* narrow (phones and the narrowest tablets): the unit shrinks with the screen, the text wraps naturally */
@container fo (max-width:639px){
  /* the phrase is given its exact width (two vertical lines + gap), so the photo takes the rest (cqw, not cqi: inside vertical text 'inline' would mean height) */
  .fo-stage{--fq1:min(22px, calc((100cqw - 48px) / 15));--fq2:min(13px, calc((100cqw - 48px) / 26));
    padding:88px 24px 96px}
  .fo-unit{gap:clamp(24px, 7cqi, 40px)}
  .fo-text{margin-top:72px}
  .fo-quote{gap:14px;padding-top:4px;width:calc(var(--fq1) * 1.6 + 14px + var(--fq2) * 1.5)}
  .fo-q-main{font-size:var(--fq1)}
  .fo-q-sub{font-size:var(--fq2)}
  .fo-h2{font-size:min(23px, calc((100cqi - 48px) / 16.4));white-space:nowrap}
  .fo-body{margin-top:36px}
  .fo-body p{white-space:normal;word-break:auto-phrase;text-wrap:pretty}
  .fo-body p br{display:none}
  .fo-link{margin-top:40px}
}
@container fo (min-width:1280px){
  /* one row: the photograph is centred on the text block beside it; the text and the phrase keep their places (base = the 1200px frame's left edge) */
  .fo-stage{--fo-base:max(48px, calc(min(100cqi, 1440px) / 2 - 600px));max-width:1440px;grid-template-areas:none;justify-content:normal;display:grid;grid-template-columns:340px 500px minmax(0,1fr);column-gap:40px;row-gap:0;align-items:center;padding:150px var(--fo-base) 164px calc(var(--fo-base) + 40px)}
  .fo-unit{display:contents}
  .fo-ph{grid-column:1;grid-row:1;position:relative;flex:none;width:340px;height:540px;aspect-ratio:auto;max-height:none}
  .fo-text{grid-column:2;grid-row:1;width:500px;max-width:none;margin-top:0}
  .fo-quote{grid-column:3;grid-row:1;justify-self:end;align-self:start;margin-top:10px;margin-right:64px;padding:0}
}
/* entrance: photo, then the text, then — a little later — the phrase; small, quiet movement only */
[data-js].fo .fo-ph{opacity:0;transition:opacity 1.6s ease}
[data-js].fo .fo-text{opacity:0;transform:translate3d(0,12px,0);transition:opacity 1.6s ease .35s,transform 2s cubic-bezier(.16,.6,.2,1) .35s}
[data-js].fo .fo-quote{opacity:0;transition:opacity 1.8s ease 1.2s}
[data-js].fo.on .fo-ph,[data-js].fo.on .fo-text,[data-js].fo.on .fo-quote{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-js].fo .fo-ph,[data-js].fo .fo-text,[data-js].fo .fo-quote{opacity:1;transform:none;transition:none}}
/* ---- CONTACT: the ask on the left, the words and the way to write on the right; one column on narrow screens ---- */
.ct{container-type:inline-size;container-name:ct}
.ct-stage{max-width:1200px;margin:0 auto;box-sizing:border-box;padding:150px 48px 76px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:80px;align-items:start}
.ct-label{font-size:12px;letter-spacing:.34em;line-height:1;color:rgba(232,228,220,.5)}
.ct-h2{margin:34px 0 0;font-size:36px;font-weight:500;line-height:1.8;letter-spacing:.12em;color:#fff;white-space:nowrap}
.ct-side{padding-top:52px}
.ct-body{margin:0;font-size:14px;line-height:2.4;letter-spacing:.08em;color:rgba(232,228,220,.85)}
.ct-cta{display:inline-flex;align-items:center;gap:26px;margin-top:56px;color:#fff;font-size:16px;letter-spacing:.26em}
/* the line beside the link: 65px at rest, drawn out to 110px on hover (0.4s ease-out), back on leave; touch screens just show the short line */
.ct .ct-cta{cursor:pointer}
.ct .ct-cta .ct-cta-line{display:block;flex:none;width:65px;height:1px;background:currentColor;opacity:.7;transition:width .4s ease-out}
.ct .ct-cta:hover .ct-cta-line,.ct .ct-cta:focus-visible .ct-cta-line{width:110px}
@media (hover:none){.ct .ct-cta .ct-cta-line,.ct .ct-cta:hover .ct-cta-line{width:65px;transition:none}}
@media (prefers-reduced-motion:reduce){.ct .ct-cta .ct-cta-line{transition:none}}
.ct-note{margin-top:28px;font-size:11px;letter-spacing:.06em;color:rgba(232,228,220,.45)}
@container ct (max-width:899px){
  .ct-stage{grid-template-columns:minmax(0,1fr);max-width:640px;padding:120px 48px 64px}
  .ct-side{padding-top:48px}
}
@container ct (max-width:639px){
  .ct-stage{padding:96px 24px 56px}
  .ct-h2{font-size:min(28px, calc((100cqw - 48px) / 12.8))}
  .ct-body{word-break:auto-phrase;text-wrap:pretty}
  .ct-body br:nth-of-type(-n+2){display:none}
  .ct-cta{margin-top:44px;gap:20px}
}
/* ---- ACCESS: info on the left, the map on the right (PC); map below the info on phones ---- */
.ac{container-type:inline-size;container-name:ac}
.ac-stage{max-width:1200px;margin:0 auto;box-sizing:border-box;padding:110px 48px 150px;display:grid;grid-template-columns:minmax(0,400px) minmax(0,640px);justify-content:space-between;column-gap:64px;align-items:center}
.ac-label{font-size:12px;letter-spacing:.34em;line-height:1;color:rgba(26,29,32,.5)}
.ac-h2{margin:30px 0 0;font-size:28px;font-weight:500;line-height:1.7;letter-spacing:.14em;color:#1a1d20}
.ac-lead-text{margin:26px 0 0;font-size:13.5px;line-height:2.2;letter-spacing:.06em;color:rgba(26,29,32,.78)}
.ac-block{margin-top:44px}
.ac-block+.ac-block{margin-top:32px}
.ac-kind{display:flex;align-items:baseline;gap:14px;font-size:13px;font-weight:500;letter-spacing:.14em;color:#1a1d20}
.ac-kind .lat{font-size:10.5px;font-weight:400;letter-spacing:.24em;color:rgba(26,29,32,.45)}
.ac-rows{margin:14px 0 0;padding:0}
.ac-rows>div{display:flex;justify-content:space-between;gap:24px;padding:7px 0;font-size:13.5px;letter-spacing:.08em;color:rgba(26,29,32,.82)}
.ac-rows dt,.ac-rows dd{margin:0;white-space:nowrap}
.ac-rows dd{color:#1a1d20}
.ac-note{margin:36px 0 0;font-size:11px;line-height:2;letter-spacing:.05em;color:rgba(26,29,32,.5)}
.ac-map{margin:0;min-width:0}
.ac-mapbox{position:relative;width:100%;max-width:640px;margin:0 auto}
.ac-svg{display:block;width:100%;height:auto}
.ac-land{fill:#d3cdc1;stroke:#e9e6e0;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ac-niigata{fill:#1b2228}
.ac-route{fill:none;stroke:rgba(26,29,32,.5);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:0.1 4.5}
.ac-lead{stroke:rgba(26,29,32,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.ac-dot-ojiya{fill:#e9e6e0;stroke:#e9e6e0;stroke-width:1}
.ac-dot-tokyo{fill:#1b2228}
.ac-pin{position:absolute;display:flex;flex-direction:column;line-height:1.4;white-space:nowrap;pointer-events:none}
.ac-pin b{font-weight:500;font-size:15px;letter-spacing:.16em;color:#1a1d20}
.ac-pin i{font-style:normal;font-size:9.5px;letter-spacing:.28em;color:rgba(26,29,32,.5);margin-top:2px}
.ac-pin-ojiya{transform:translate(calc(-100% - 8px), -50%);align-items:flex-end;text-align:right}
.ac-pin-tokyo{transform:translate(0, -50%)}
@container ac (max-width:1099px){
  .ac-stage{grid-template-columns:minmax(0,360px) minmax(0,1fr);column-gap:48px}
}
/* 768–1023: the words in two short columns above, the map below, large */
@container ac (max-width:1023px){
  .ac-stage{grid-template-columns:minmax(0,1fr);max-width:760px;row-gap:72px}
  .ac-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start}
  .ac-times .ac-block:first-child{margin-top:4px}
  .ac-mapbox{max-width:600px}
  .ac-lead-text,.ac-note{word-break:auto-phrase;text-wrap:pretty}
  .ac-lead-text br{display:none}
}
@container ac (max-width:767px){
  .ac-stage{grid-template-columns:minmax(0,1fr);padding:88px 24px 110px;row-gap:56px}
  .ac-info{display:block;max-width:480px;width:100%;justify-self:center}
  .ac-lead-text br{display:inline}
  .ac-times .ac-block:first-child{margin-top:44px}
  .ac-lead-text{word-break:auto-phrase;text-wrap:pretty}
  .ac-lead-text br{display:none}
  .ac-mapbox{max-width:520px}
  .ac-pin b{font-size:13px}
}
[data-js].ac .ac-f{opacity:0;transform:translate3d(0,14px,0);transition:opacity 1.6s ease,transform 2s cubic-bezier(.16,.5,.2,1)}
[data-js].ac .ac-map{transition-delay:.35s}
[data-js].ac.on .ac-f{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-js].ac .ac-f{opacity:1;transform:none;transition:none}}
/* ---- FOOTER: spacing only (about 22% shorter); on phones the two halves stack with a 24px gutter ---- */
.ft{container-type:inline-size;container-name:ft}
.ft-top{padding:52px 120px 36px}
.ft-tag{margin-top:26px}
.ft-loc{margin-top:28px}
.ft-bot{padding:0 120px 30px}
@container ft (max-width:767px){
  .ft-top{flex-direction:column;gap:36px;padding:48px 24px 32px}
  .ft-nav{column-gap:32px!important}
  .ft-bot{padding:0 24px 32px;gap:16px}
}
/* ---- KATAKAI folded (after the story has been read once): 01 · band · 05, plain vertical flow ---- */
section[data-js][data-sig] .sticky{transition:opacity .45s ease}
section[data-js][data-sig].sig-fading .sticky{opacity:0!important;transition:opacity .45s ease}
.sig-compact,.sig-refold{display:none}
/* pinned story, last phase: the final screen lies over the track; its opacity follows the scroll (set per frame) */
section[data-js][data-sig].sig-final:not(.sig-fold) .sig-compact{display:flex;position:absolute;inset:0;z-index:2;flex-direction:row-reverse;align-items:center;justify-content:center;gap:clamp(40px, 5vw, 84px);padding:0 clamp(48px, 7vw, 120px);box-sizing:border-box;background:#0f1317}
section[data-js][data-sig].sig-final:not(.sig-fold) .sig-compact .sig-title,section[data-js][data-sig].sig-final:not(.sig-fold) .sig-compact .sig-item{opacity:1}
/* normal state: the final screen is held on screen for a short stretch (its opacity follows the scroll, set per frame); its black travels with it, so fading it reveals ABOUT underneath */
section[data-js][data-sig].sig-fold{visibility:visible;background:transparent}
.sig-fold{container-type:inline-size;container-name:sigc}
.sig-fold .sticky{position:sticky!important;top:0;height:min(100vh, 920px)!important;max-height:none!important;background:#0f1317!important}
section[data-js][data-sig].sig-fold:not(.sig-fading) .sticky{transition:none}
.sig-fold [data-track]{display:none!important}
.sig-fold .sig-compact{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:clamp(40px, 5vw, 84px);height:100%;padding:0 clamp(48px, 7vw, 120px);box-sizing:border-box}
.sc-01{display:flex;flex-direction:row-reverse;gap:52px;flex:none}
/* the button sits on the optical centre of the words and the gift beside it (their visible span is 168–650px of the 560px band, so its centre is 40px above the band's) */
.sc-strip{position:relative;flex:none;width:150px;height:560px;display:flex;align-items:center;justify-content:center;left:4px}
.sc-strip .sc-btn{margin-top:-80px}
/* a slim slice of the night sky: the folded chapters 02–04 */
.sc-strip-img{display:none!important}
.sc-strip-img-off{position:absolute;inset:0;background:#0f1317 url("/assets/images/katakai-fireworks.jpg") 58% 50% / cover no-repeat;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 30%,#000 70%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 30%,#000 70%,transparent 100%);mask-composite:intersect}
.sc-btn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:20px;padding:30px 16px 24px;border:1px solid rgba(232,228,220,.7);background:#0f1317;color:#f4f1eb;transition:background-color .4s ease-out,border-color .4s ease-out}
.sc-btn-t{writing-mode:vertical-rl;font-size:15px;letter-spacing:.2em;line-height:1}
.sc-btn-plus{font-size:18px;line-height:1;font-weight:300}
.sc-btn:hover{background:#151a1f;border-color:#f4f1eb}
.sig-fold .sc-plan{opacity:1}
@keyframes sigFbIn{from{opacity:0}to{opacity:1}}
@container sigc (max-width:419px){
  .sig-fold .sc-01{gap:16px}
  .sig-fold .sc-01 .sig-title{font-size:26px!important}
  .sig-fold .sc-01 .sig-item:nth-child(2){font-size:18px!important}
  .sig-fold .sc-01 .sig-item:nth-child(3){font-size:12.5px!important}
  .sig-fold .sc-plan{width:100%!important;height:auto!important}
  .sig-fold .sc-plan>div{width:100%!important;max-width:100%}
  .sig-fold .sc-plan .ph{width:100%!important;height:auto!important;aspect-ratio:300 / 190}
  .sig-fold .sc-plan div[style*="baseline"]{flex-wrap:wrap;row-gap:6px}
}
/* narrower screens: words, then a short horizontal strip with the button, then the gift */
@container sigc (max-width:1199px){
  .sig-fold .sticky{height:auto!important}
  .sig-fold .sig-compact{flex-direction:column;justify-content:flex-start;gap:40px;padding:96px 24px 120px;height:auto}
  .sc-01{gap:22px;align-self:center}
  .sc-01 .sig-title{font-size:30px!important;height:auto!important}
  .sc-01 .sig-item:nth-child(2){font-size:21px!important;height:auto!important}
  .sc-01 .sig-item:nth-child(3){font-size:13.5px!important;height:auto!important}
  .sc-strip{width:100%;max-width:420px;height:150px}
  .sc-btn{flex-direction:row;gap:14px;padding:14px 22px}
  .sc-strip{left:0}
  .sc-strip .sc-btn{margin-top:0}
  .sc-btn-t{writing-mode:horizontal-tb}
}
.sig-replay .sig-refold{display:block;position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;font-size:11.5px;letter-spacing:.26em;color:rgba(232,228,220,.55);padding:8px 4px;border-bottom:1px solid rgba(232,228,220,.25)}
.sig-replay .sig-refold:hover{color:#f4f1eb}
@media (prefers-reduced-motion:reduce){.sig-fold .sig-compact{animation:none}}
/* ---- CONTACT: fades in as a whole section (same section-level trigger as WHY OJIYA / FROM OJIYA) ---- */
[data-js].ct .ct-f{opacity:0;transform:translate3d(0,16px,0);transition:opacity 1.6s ease,transform 2s cubic-bezier(.16,.5,.2,1)}
[data-js].ct.on .ct-f{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-js].ct .ct-f{opacity:1;transform:none;transition:none}}
@media (prefers-reduced-motion:reduce){[data-js].wo .wo-center,[data-js].wo .wo-ph,[data-js].wo .wo-cap,[data-js].wo .wo-note{opacity:1;transform:none;transition:none}}
@media (prefers-reduced-motion:reduce){.fog i{animation:none}}
/* ==== PHONE (container width up to 767px): ABOUT words, the KATAKAI story and its final screen are re-scaled to fit a phone; wider screens are untouched ==== */
[data-about-words]{container-type:inline-size;container-name:abw}
[data-sig]>.sticky{container-type:inline-size;container-name:sigs}
@container abw (max-width:767px){
  [data-about-words]>.reveal{box-sizing:border-box;max-width:100%;padding:0 24px}
  [data-about-words] h2{font-size:min(40px, calc((100cqw - 48px) / 12.6))!important}
  [data-about-words] p{white-space:normal!important;font-size:13px!important;word-break:auto-phrase;text-wrap:pretty}
}
/* the sideways story: the same five chapters, read right to left, at a phone's scale */
@container sigs (max-width:767px){
  [data-track] .scene{gap:24px!important;padding:0 44px!important}
  [data-track] .scene:first-child{padding:0 48px 0 40px!important}
  [data-track] .scene:last-child{padding:0 96px 0 40px!important}
  [data-track] .scene>.vt{height:440px!important}
  [data-track] .scene>.vt:not(.sig-title){font-size:13px!important;letter-spacing:.08em!important}
  [data-track] .scene>.vt:first-child:not(.sig-title),[data-track] .scene>.sig-title+.vt{font-size:21px!important;letter-spacing:.14em!important}
  [data-track] .scene>.sig-title{font-size:28px!important}
  [data-track] .scene>.ph{width:300px!important;height:250px!important;margin-left:8px!important}
  [data-track] .scene:nth-child(2)>.ph{width:250px!important;height:330px!important}
  [data-track] .scene:last-child>div:last-child{width:300px!important;height:210px!important;margin-left:8px!important}
  [data-track] .scene:first-child>div:last-child{height:440px!important;margin-left:8px!important;gap:22px!important}
  [data-track] .scene:first-child>div:last-child .ph{width:260px!important;height:165px!important}
  /* the final screen (while playing and once folded): 01's words, then the gift, then the way back in, all inside one phone screen and clear of the WHY OJIYA paper that rises over its foot */
  [data-sig] .sig-compact{flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:14px!important;padding:96px 24px calc(0.35 * (min(100vh, 920px) / 2 - 78px) + 16px)!important;height:100%!important;box-sizing:border-box}
  [data-sig] .sc-01{order:1;gap:16px!important;align-self:center!important}
  [data-sig] .sc-01 .sig-title{font-size:24px!important;height:270px!important}
  [data-sig] .sc-01 .sig-item:nth-child(2){font-size:18px!important;height:270px!important}
  [data-sig] .sc-01 .sig-item:nth-child(3){font-size:11.5px!important;letter-spacing:.04em!important;line-height:2!important;height:270px!important}
  [data-sig] .sc-plan{order:2;width:100%!important;height:auto!important;gap:14px!important;align-items:stretch!important}
  [data-sig] .sc-plan .ph{width:100%!important;height:64px!important}
  [data-sig] .sc-plan>div:last-child{width:100%!important;gap:9px!important;padding-top:14px!important}
  [data-sig] .sc-plan div[style*="baseline"]{flex-wrap:wrap;row-gap:4px}
  [data-sig] .sc-strip{order:3;width:100%!important;max-width:none!important;height:auto!important;left:0!important}
  [data-sig] .sc-btn{flex-direction:row!important;justify-content:center;gap:14px!important;padding:13px 20px!important;margin-top:0!important;width:100%;box-sizing:border-box}
  [data-sig] .sc-btn-t{writing-mode:horizontal-tb!important;font-size:13.5px}
}
/* shorter or narrower phones: the final screen keeps the place name, 01's heading, the gift and the way back in (01's longer text and the photograph were already read in the story) */
@container sigs (max-width:767px){
  @media (max-height:839px){
    [data-sig] .sig-compact{padding-top:72px!important}
    [data-sig] .sc-01 .sig-item:nth-child(3),[data-sig] .sc-plan .ph{display:none!important}
    [data-sig] .sc-01 .sig-title,[data-sig] .sc-01 .sig-item:nth-child(2){height:220px!important}
    [data-sig] .sc-plan>div:last-child{border-top:1px solid rgba(232,228,220,.2)}
  }
}
@container sigs (max-width:379px){
  [data-sig] .sc-01 .sig-item:nth-child(3),[data-sig] .sc-plan .ph{display:none!important}
}
/* ==== KATAKAI layout by window size: sideways (pinned) from 768px up, vertical below — the same choice on first view, at the end and after 「もう一度」 ==== */
.sig-vbtn{display:none}
/* vertical (phone) reading: the ABOUT section keeps a long pinned stretch that ends in black (built for the sideways story that rises over it on PC);
   here the story is pulled up over that black, so its title rises from the foot of the screen just as the ABOUT words finish fading */
section[data-sig].sig-v{height:auto!important;margin-top:calc(-448px + 0.143 * min(100vh, 920px))!important;padding-bottom:calc(0.35 * (min(100vh, 920px) / 2 - 78px) + 40px);visibility:visible!important;background:linear-gradient(180deg,rgba(15,19,23,0) 0px,#0f1317 120px)!important}
section[data-sig].sig-v .sticky{position:relative!important;top:auto!important;height:auto!important;max-height:none!important;overflow:visible!important;opacity:1!important;background:transparent!important}
section[data-sig].sig-v .sig-compact,section[data-sig].sig-v .sig-refold{display:none!important}
section[data-sig].sig-v [data-track]{position:relative!important;top:auto!important;left:auto!important;height:auto!important;display:flex!important;flex-direction:column-reverse!important;align-items:stretch!important;transform:none!important;opacity:1!important}
section[data-sig].sig-v [data-track] .scene{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;row-gap:30px;align-items:start;height:auto!important;min-width:0!important;padding:88px 24px 8px!important;opacity:1!important;transform:none!important}
section[data-sig].sig-v [data-track] .scene>.vt:first-child:not(.sig-title){grid-column:1 / -1;justify-self:end;height:auto!important;font-size:22px!important;letter-spacing:.14em!important}
section[data-sig].sig-v [data-track] .scene>.sig-title{grid-column:2;grid-row:1;height:auto!important;font-size:30px!important}
section[data-sig].sig-v [data-track] .scene>.sig-title+.vt{grid-column:1;grid-row:1;justify-self:end;height:auto!important;font-size:22px!important;letter-spacing:.14em!important}
section[data-sig].sig-v [data-track] .scene>.vt:nth-last-child(2){grid-column:1 / -1;writing-mode:horizontal-tb!important;height:auto!important;max-width:100%;font-size:14px!important;line-height:2.2!important;letter-spacing:.06em!important;word-break:auto-phrase;text-wrap:pretty}
section[data-sig].sig-v [data-track] .scene>:last-child{grid-column:1 / -1;width:100%!important;height:auto!important;margin-left:0!important}
section[data-sig].sig-v [data-track] .scene:not(:first-child)>:last-child{aspect-ratio:3 / 2}
section[data-sig].sig-v [data-track] .scene:nth-child(3)>:last-child{aspect-ratio:4 / 5}
section[data-sig].sig-v [data-track] .scene:first-child>div:last-child{gap:22px!important}
section[data-sig].sig-v [data-track] .scene:first-child>div:last-child .ph{width:100%!important;height:auto!important;aspect-ratio:300 / 190}
section[data-sig].sig-v [data-track] .scene:first-child>div:last-child>div:last-child{width:100%!important}
section[data-sig].sig-v [data-track] .scene:first-child>div:last-child div[style*="baseline"]{flex-wrap:wrap;row-gap:4px}
/* phone, chapters 02–05: each heading reads horizontally above its body and photograph */
section[data-sig].sig-v [data-track] .scene:not(:last-child){row-gap:0!important;padding-top:80px!important}
section[data-sig].sig-v [data-track] .scene:not(:last-child)>.vt:first-child{grid-column:1 / -1!important;justify-self:start!important;writing-mode:horizontal-tb!important;font-size:22px!important;line-height:1.8!important;letter-spacing:.12em!important;margin:0}
section[data-sig].sig-v [data-track] .scene:not(:last-child)>.vt:nth-last-child(2){margin-top:26px}
section[data-sig].sig-v [data-track] .scene:not(:last-child)>:last-child{margin-top:30px!important}
/* phone, chapter 01: the place name and its line read horizontally, as an opening title — large mincho, then two quiet lines, then the body and photograph as before */
section[data-sig].sig-v [data-track] .scene:last-child{row-gap:0!important;padding-top:96px!important}
section[data-sig].sig-v [data-track] .scene:last-child>.sig-title{grid-column:1 / -1!important;grid-row:1!important;justify-self:start!important;writing-mode:horizontal-tb!important;font-size:40px!important;line-height:1.2!important;letter-spacing:.24em!important;padding-top:0!important;margin:0}
section[data-sig].sig-v [data-track] .scene:last-child>.sig-title+.vt{grid-column:1 / -1!important;grid-row:2!important;justify-self:start!important;writing-mode:horizontal-tb!important;margin-top:22px!important;font-size:19px!important;line-height:1.9!important;letter-spacing:.12em!important}
section[data-sig].sig-v [data-track] .scene:last-child>.vt:nth-last-child(2){margin-top:30px}
section[data-sig].sig-v [data-track] .scene:last-child>:last-child{margin-top:30px!important}
section[data-sig].sig-v.sig-vfold [data-track] .scene[data-mid]{display:none!important}
/* phone, folded after the story has been read: one compact screen — the place name and its line, then the photograph and the gift, then the way back in. The long texts stay in the story only. */
section[data-sig].sig-v.sig-vfold [data-track] .scene:last-child>.vt:nth-last-child(2),
section[data-sig].sig-v.sig-vfold [data-track] .scene:last-child>:last-child,
section[data-sig].sig-v.sig-vfold [data-track] .scene:first-child>.vt{display:none!important}
section[data-sig].sig-v.sig-vfold [data-track] .scene:first-child{padding-top:30px!important}
section[data-sig].sig-v.sig-vfold [data-track] .scene:first-child>:last-child{margin-top:0!important}
section[data-sig].sig-v.sig-vfold [data-track] .scene:first-child>div:last-child{gap:18px!important}
section[data-sig].sig-v.sig-vfold .sig-vbtn{order:-1;margin:30px 24px 0!important}
section[data-sig].sig-v.sig-vfold .sig-vbtn{display:flex;align-items:center;justify-content:center;gap:14px;margin:56px 24px 0;padding:14px 20px;border:1px solid rgba(232,228,220,.7);color:#f4f1eb;font-size:13.5px;letter-spacing:.2em;transition:background-color .4s ease-out,border-color .4s ease-out}
section[data-sig].sig-v.sig-vfold .sig-vbtn:hover{background:#151a1f;border-color:#f4f1eb}
section[data-sig].sig-v.sig-vopen [data-track] .scene[data-mid]{animation:sigVIn 1.2s ease both}
section[data-sig].sig-v [data-track],section[data-sig].sig-v .sig-vbtn{transition:opacity .8s ease}
section[data-sig].sig-v:not(.sig-vin) [data-track],section[data-sig].sig-v:not(.sig-vin) .sig-vbtn{opacity:0!important}
section[data-sig].sig-v.sig-vfade [data-track],section[data-sig].sig-v.sig-vfade .sig-vbtn{opacity:0!important;transition:opacity .42s ease}
@keyframes sigVIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){section[data-sig].sig-v.sig-vopen [data-track] .scene[data-mid]{animation:none}section[data-sig].sig-v [data-track],section[data-sig].sig-v .sig-vbtn{transition:none}}
/* sideways story on narrow tablets (768–899px): the final screen is one and the same screen while playing and once folded —
   the photograph (16:9, full column width) with the gift and the way back in on the left, 01's words standing on the right */
@container sigs (min-width:768px) and (max-width:899px){
  [data-sig] .sig-compact{grid-template-columns:minmax(0,520px) auto;grid-template-areas:"plan words" "strip words";align-content:center!important;justify-content:center!important;align-items:start!important;column-gap:48px!important;row-gap:22px!important;padding:96px 48px calc(0.35 * (min(100vh, 920px) / 2 - 78px) + 20px)!important;height:100%!important;box-sizing:border-box}
  /* shown only in the two states that own the final screen: its last phase while playing, and folded — never while the story plays */
  section[data-sig].sig-final:not(.sig-fold) .sig-compact,section[data-sig].sig-fold .sig-compact{display:grid!important}
  [data-sig] .sc-01{grid-area:words;align-self:center!important;gap:18px!important}
  [data-sig] .sc-01 .sig-title{font-size:30px!important;height:440px!important}
  [data-sig] .sc-01 .sig-item:nth-child(2){font-size:21px!important;height:440px!important}
  [data-sig] .sc-01 .sig-item:nth-child(3){font-size:13px!important;letter-spacing:.04em!important;line-height:2!important;height:440px!important}
  [data-sig] .sc-plan{grid-area:plan;width:100%!important;height:auto!important;gap:22px!important;align-items:stretch!important}
  [data-sig] .sc-plan .ph{width:100%!important;height:auto!important;aspect-ratio:16 / 9}
  [data-sig] .sc-plan .ph img{object-position:50% 42%!important}
  [data-sig] .sc-plan>div:last-child{width:100%!important;gap:12px!important;padding-top:20px!important}
  [data-sig] .sc-plan div[style*="baseline"]{flex-wrap:wrap;row-gap:4px}
  [data-sig] .sc-strip{grid-area:strip;width:100%!important;max-width:none!important;height:auto!important;left:0!important}
  [data-sig] .sc-btn{flex-direction:row!important;justify-content:center;gap:14px!important;padding:14px 20px!important;margin-top:0!important;width:100%;box-sizing:border-box}
  [data-sig] .sc-btn-t{writing-mode:horizontal-tb!important;font-size:14px}
}
/* narrower tablets: 01's longer text steps aside so the photograph keeps its full 16:9 width */
@container sigs (min-width:768px) and (max-width:899px){
  [data-sig] .sc-01 .sig-item:nth-child(3){display:none!important}
}
/* shorter tablet screens: the same layout, a little tighter */
@container sigs (min-width:768px) and (max-width:899px){
  @media (max-height:819px){
    [data-sig] .sig-compact{grid-template-columns:minmax(0,460px) auto;padding-top:80px!important;row-gap:16px!important}
    [data-sig] .sc-plan{gap:16px!important}
    [data-sig] .sc-plan>div:last-child{gap:10px!important;padding-top:16px!important}
    [data-sig] .sc-01 .sig-title,[data-sig] .sc-01 .sig-item{height:400px!important}
  }
}

/* 900–1199px: the same arrangement as PC (gift and photo on the left, the way back in, 01's words on the right), the type and gaps eased a little to the width */
@container sigs (min-width:900px) and (max-width:1199px){
  section[data-sig].sig-final:not(.sig-fold) .sig-compact,section[data-sig].sig-fold .sig-compact{display:flex!important}
  [data-sig] .sig-compact{flex-direction:row-reverse!important;align-items:center!important;justify-content:center!important;gap:clamp(26px, 3.4cqw, 44px)!important;padding:0 clamp(28px, 3.6cqw, 56px)!important;height:100%!important;box-sizing:border-box}
  [data-sig] .sc-01{order:0;align-self:center!important;gap:clamp(20px, 2.6cqw, 36px)!important}
  [data-sig] .sc-01 .sig-title{font-size:clamp(30px, 3.1cqw, 36px)!important;height:520px!important}
  [data-sig] .sc-01 .sig-item:nth-child(2){font-size:clamp(22px, 2.3cqw, 26px)!important;height:520px!important}
  [data-sig] .sc-01 .sig-item:nth-child(3){font-size:clamp(14px, 1.3cqw, 15.5px)!important;letter-spacing:.08em!important;line-height:2.1!important;height:520px!important}
  [data-sig] .sc-strip{order:0;width:clamp(100px, 11cqw, 140px)!important;max-width:none!important;height:520px!important;left:0!important}
  [data-sig] .sc-strip .sc-btn{margin-top:-80px!important}
  [data-sig] .sc-btn{flex-direction:column!important;gap:20px!important;padding:30px 16px 24px!important;width:auto}
  [data-sig] .sc-btn-t{writing-mode:vertical-rl!important;font-size:15px}
  [data-sig] .sc-plan{order:0;width:clamp(270px, 28cqw, 320px)!important;height:520px!important;gap:28px!important}
  [data-sig] .sc-plan .ph{width:100%!important;height:auto!important;aspect-ratio:300 / 190}
  [data-sig] .sc-plan>div:last-child{width:100%!important}
  [data-sig] .sc-plan div[style*="baseline"]{flex-wrap:wrap;row-gap:6px}
  @media (max-height:759px){
    [data-sig] .sc-01 .sig-title,[data-sig] .sc-01 .sig-item,[data-sig] .sc-strip,[data-sig] .sc-plan{height:460px!important}
    [data-sig] .sc-01 .sig-item:nth-child(3){font-size:14px!important;line-height:2!important}
    [data-sig] .sc-plan{gap:22px!important}
  }
}
/* folded on a phone: the final screen stays exactly one screen tall (as on PC), so the page below does not jump when the story folds */
@container sigc (max-width:1199px){
  .sig-fold .sticky{height:min(100vh, 920px)!important}
}
/* language switch: two links in the place of the old label, at its exact size and colour; the language not shown sits a little quieter */
.hy-lang{color:rgba(232,228,220,.78);white-space:nowrap}.nav .hy-lang a{font-size:inherit;letter-spacing:inherit;color:rgba(232,228,220,.78);transition:opacity .3s ease,color .3s ease}.nav .hy-lang a:not([aria-current]){opacity:.6}.nav .hy-lang a:hover,.nav .hy-lang a:focus-visible{opacity:1;color:#fff}

/* ==== ENGLISH EDITION: type set for English — Cormorant Garamond for display, EB Garamond for reading; tracking eased from the Japanese setting ==== */
.en{font-family:'EB Garamond','Cormorant Garamond',Georgia,'Times New Roman',serif;font-kerning:normal;font-variant-ligatures:common-ligatures;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;hyphens:manual;overflow-wrap:break-word}
.en h1,.en h2,.en h3{font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-weight:500;text-wrap:balance}
.en .menu a{font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-size:20px!important;letter-spacing:.03em!important;line-height:1.3}
.en .menu a.ul{font-family:'EB Garamond',Georgia,serif;font-size:14px!important;letter-spacing:.08em!important}
.en .ft-tag{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:17px!important;letter-spacing:.01em!important;line-height:1.5}
.en .ft-nav a{font-size:14px!important;letter-spacing:.04em!important}
.en .ft-bot p{font-size:11.5px!important;letter-spacing:.01em!important;line-height:1.8!important}
/* ---- TOP (English): vertical Japanese settings become horizontal English; the scroll stories, photographs and timing are untouched ---- */
.ab.en .vt{writing-mode:horizontal-tb!important;text-orientation:mixed}
.ab.en a.ul{font-size:14px!important;letter-spacing:.08em!important}
.ab.en i{font-style:italic}
/* hero */
.ab.en .hero-en{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(34px, 6.4vw, 58px)!important;pointer-events:none}
.ab.en .hero-en span{display:block;transform:translateY(-3%)}
.ab.en .hero-en i{font-weight:300}
/* about */
.ab.en [data-about-words] h2{font-family:'Cormorant Garamond',Georgia,serif}
.ab.en [data-about-words] p{font-size:16.5px!important;line-height:1.95!important;letter-spacing:.005em!important}
@container abw (max-width:767px){
  .ab.en [data-about-words] h2{font-size:min(46px, calc((100cqw - 48px) / 13.2))!important;line-height:1.24!important}
  .ab.en [data-about-words] p{font-size:16px!important;line-height:1.85!important}
  .ab.en [data-about-words] p br{display:none}
}

/* KATAKAI, sideways (768px and up): each chapter is one column of English — heading over body — with its photograph beside it.
   The chapters still travel right to left with the scroll, exactly as in Japanese. */
.ab.en section[data-sig]:not(.sig-v) [data-track] .scene{display:grid!important;grid-template-columns:auto minmax(0,460px);grid-template-rows:1fr auto auto auto 1fr;justify-content:end!important;align-items:start;column-gap:84px!important;row-gap:0!important}
.ab.en section[data-sig]:not(.sig-v) [data-track] .scene>.vt{grid-column:2;height:auto!important;width:auto;max-width:460px}
.ab.en section[data-sig]:not(.sig-v) [data-track] .scene>.vt:nth-child(1){grid-row:2}
.ab.en section[data-sig]:not(.sig-v) [data-track] .scene>.vt:nth-child(2){grid-row:3}
.ab.en section[data-sig]:not(.sig-v) [data-track] .scene>.vt:nth-child(3){grid-row:4}
.ab.en section[data-sig]:not(.sig-v) [data-track] .scene>:not(.vt){grid-column:1;grid-row:1 / -1;align-self:center;margin-left:0!important}
/* the type of the story (sideways and in the folded final screen) */
.ab.en [data-sig] .vt{font-family:'EB Garamond',Georgia,serif}
.ab.en [data-sig] .scene>.vt:first-child:not(.sig-title),.ab.en [data-sig] .sig-title+.vt{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:36px!important;font-weight:400!important;line-height:1.2!important;letter-spacing:.003em!important;margin:0 0 30px!important}
.ab.en [data-sig] .sig-title{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:64px!important;font-weight:300!important;line-height:1!important;letter-spacing:.02em!important;padding-top:0!important;margin:0 0 24px!important}
.ab.en [data-sig] .scene>.vt:nth-child(2):not(.sig-title+.vt),.ab.en [data-sig] .sig-title+.vt+.vt{font-size:16.5px!important;line-height:1.85!important;letter-spacing:.005em!important}
/* the gift (plan) block */
.ab.en [data-sig] .en-plan-t{font-family:'Cormorant Garamond',Georgia,serif}
.ab.en [data-sig] .scene:first-child>div:last-child>div:last-child,.ab.en [data-sig] .sc-plan>div:last-child{max-width:380px}
.ab.en [data-sig] div[style*="baseline"]{flex-wrap:wrap;row-gap:4px;column-gap:10px!important}
.ab.en [data-sig] div[style*="baseline"]:first-child{flex-direction:column;align-items:flex-start!important;gap:6px!important}
.ab.en [data-sig] div[style*="white-space:nowrap"]{white-space:normal!important;font-size:11.5px!important;line-height:1.7;letter-spacing:.005em!important}
.ab.en [data-sig] .sc-btn-t{writing-mode:horizontal-tb!important;font-size:14px!important;letter-spacing:.06em!important;line-height:1.3}
.ab.en .sig-replay .sig-refold{font-size:12.5px;letter-spacing:.1em}
/* the final screen (last phase while playing, and folded) from 768px: gift and photograph on the left; the words, then the way back in, on the right */
@container sigs (min-width:768px){
  .ab.en section[data-sig].sig-final:not(.sig-fold) .sig-compact,.ab.en section[data-sig].sig-fold .sig-compact{display:grid!important}
  .ab.en section[data-sig] .sig-compact{grid-template-columns:minmax(0,320px) minmax(0,440px)!important;grid-template-rows:1fr auto auto 1fr;grid-template-areas:"plan ." "plan words" "plan strip" "plan ."!important;align-content:center!important;justify-content:center!important;align-items:start!important;column-gap:84px!important;row-gap:0!important;padding:0 48px!important;height:100%!important;box-sizing:border-box}
  .ab.en [data-sig] .sc-01{grid-area:words;display:flex!important;flex-direction:column!important;gap:0!important;align-self:start!important;order:0!important}
  .ab.en [data-sig] .sc-01>.vt{height:auto!important}
  .ab.en [data-sig] .sc-plan{grid-area:plan;align-self:center!important;width:100%!important;height:auto!important;gap:26px!important;align-items:stretch!important;order:0!important}
  .ab.en [data-sig] .sc-plan .ph{width:100%!important;height:auto!important;aspect-ratio:300 / 190}
  .ab.en [data-sig] .sc-plan>div:last-child{width:100%!important}
  .ab.en [data-sig] .sc-strip{grid-area:strip;justify-content:flex-start!important;width:auto!important;max-width:none!important;height:auto!important;left:0!important;margin-top:34px;order:0!important}
  .ab.en [data-sig] .sc-strip .sc-btn{margin-top:0!important}
  .ab.en [data-sig] .sc-btn{flex-direction:row!important;gap:16px!important;padding:14px 24px!important;width:auto!important}
}
@container sigs (min-width:768px) and (max-width:1199px){
  .ab.en section[data-sig] .sig-compact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:clamp(36px, 5cqw, 64px)!important;padding:0 clamp(32px, 5cqw, 56px)!important}
  .ab.en [data-sig] .sc-01 .sig-title{font-size:52px!important}
  .ab.en [data-sig] .sc-01 .sig-title+.vt{font-size:30px!important;margin-bottom:22px!important}
  .ab.en [data-sig] .sc-01 .sig-title+.vt+.vt{font-size:15.5px!important;line-height:1.8!important}
}
@container sigs (min-width:768px) and (max-width:899px){
  .ab.en [data-sig] .sc-01 .sig-item:nth-child(3){display:none!important}
}
@container sigs (min-width:768px){
  @media (max-height:760px){
    .ab.en [data-sig] .sc-01 .sig-title{font-size:46px!important;margin-bottom:16px!important}
    .ab.en [data-sig] .sc-01 .sig-title+.vt{font-size:28px!important;margin-bottom:18px!important}
    .ab.en [data-sig] .sc-01 .sig-title+.vt+.vt{font-size:15px!important;line-height:1.7!important}
    .ab.en section[data-sig]:not(.sig-v) [data-track] .scene>.vt:first-child:not(.sig-title),.ab.en section[data-sig]:not(.sig-v) [data-track] .sig-title+.vt{font-size:31px!important;margin-bottom:20px!important}
    .ab.en section[data-sig]:not(.sig-v) [data-track] .scene>.vt:nth-child(2):not(.sig-title+.vt),.ab.en section[data-sig]:not(.sig-v) [data-track] .sig-title+.vt+.vt{font-size:15.5px!important;line-height:1.7!important}
  }
}
/* KATAKAI, vertical reading (phones): English sizes */
.ab.en section[data-sig].sig-v [data-track] .scene>.vt:first-child:not(.sig-title){font-family:'Cormorant Garamond',Georgia,serif!important;font-size:30px!important;line-height:1.2!important;letter-spacing:0!important;margin:0!important}
.ab.en section[data-sig].sig-v [data-track] .scene:last-child>.sig-title{font-size:52px!important;letter-spacing:.02em!important;line-height:1!important;margin:0!important}
.ab.en section[data-sig].sig-v [data-track] .scene:last-child>.sig-title+.vt{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:27px!important;line-height:1.22!important;letter-spacing:0!important;margin:20px 0 0!important}
.ab.en section[data-sig].sig-v [data-track] .scene>.vt:nth-last-child(2){font-size:16px!important;line-height:1.85!important;letter-spacing:0!important}
.ab.en section[data-sig].sig-v .sig-vbtn{font-size:14px!important;letter-spacing:.06em!important}
.ab.en section[data-sig].sig-v [data-track] .scene:first-child>div:last-child>div:last-child{max-width:none}

/* WHY OJIYA */
.ab.en .wo-center h2.wo-c-head{font-family:'Cormorant Garamond',Georgia,serif;font-size:min(44px, calc((100cqi - 48px) / 13.2))!important;font-weight:400!important;line-height:1.22!important;letter-spacing:0!important;padding-left:0}
.ab.en .wo-center p.wo-c-body{font-size:min(16px, calc((100cqi - 48px) / 23))!important;line-height:1.85!important;letter-spacing:0!important;padding-left:0}
.ab.en .wo-c-label{padding-left:.38em}
.ab.en .wo-cap b{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:500;letter-spacing:.005em;line-height:1.2}
.ab.en .wo-cap span{margin-top:6px;font-size:14.5px;line-height:1.7;letter-spacing:0}
.ab.en .wo-note{font-size:12px;letter-spacing:0;line-height:1.75}
@container wo (min-width:1420px){
  .ab.en .wo-center{width:560px;margin-left:-280px}
  .ab.en .wo-note{top:1120px}
}
@container wo (max-width:767px){
  .ab.en .wo-center h2.wo-c-head{font-size:min(34px, calc((100cqi - 48px) / 13.2))!important}
  .ab.en .wo-center p.wo-c-body{white-space:normal;font-size:15.5px!important;text-wrap:balance}
  .ab.en .wo-center p.wo-c-body br{display:none}
  .ab.en .wo-cap b{font-size:22px}
}

/* ACCESS */
.ab.en .ac-h2{font-size:38px;font-weight:400;line-height:1.2;letter-spacing:0}
.ab.en .ac-lead-text{font-size:16px;line-height:1.8;letter-spacing:0}
.ab.en .ac-kind{font-size:15.5px;letter-spacing:.01em}
.ab.en .ac-rows>div{font-size:15px;letter-spacing:0}
.ab.en .ac-note{font-size:12.5px;letter-spacing:0;line-height:1.75}
.ab.en .ac-pin b{font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;font-weight:500;letter-spacing:.02em}
@container ac (max-width:767px){ .ab.en .ac-pin b{font-size:16px} }

/* HOW WE DESIGN: the steps read left to right (01 first) in English */
.ab.en .hw-h2{font-size:40px;font-weight:400;line-height:1.22;letter-spacing:0}
.ab.en .hw-lab{letter-spacing:.3em;font-size:12.5px}
.ab.en .hw-body{font-size:15.5px;line-height:1.8;letter-spacing:0}
.ab.en .hw-cta{font-size:14px!important;letter-spacing:.08em!important}
@container hw (min-width:768px){
  .ab.en .hw-item{flex-direction:column;gap:14px;height:auto;width:250px}
  .ab.en .hw-lab{padding-top:4px}
  .ab.en .hw-steps{flex-direction:row}
}
@container hw (min-width:768px) and (max-width:1099px){
  .ab.en .hw-item{width:280px}
  .ab.en .hw-s1{grid-column:1;grid-row:1;margin-top:0}
  .ab.en .hw-s2{grid-column:2;grid-row:1;margin-top:70px}
  .ab.en .hw-s3{grid-column:1;grid-row:2;margin-top:0}
  .ab.en .hw-s4{grid-column:2;grid-row:2;margin-top:70px}
}
@container hw (min-width:1420px){
  .ab.en .hw-s1{left:120px;top:500px}
  .ab.en .hw-s2{left:440px;top:400px}
  .ab.en .hw-s3{left:760px;top:540px}
  .ab.en .hw-s4{left:1080px;top:460px}
}
@container hw (max-width:767px){
  .ab.en .hw-h2{font-size:min(32px, calc((100cqi - 48px) / 11))}
  .ab.en .hw-h2 br{display:inline}
}

/* FROM OJIYA: the phrase reads horizontally beside (or, on phones, below) the photograph */
.ab.en .fo-quote{writing-mode:horizontal-tb;width:240px;gap:14px}
.ab.en .fo-q-main{width:auto;white-space:normal;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400;font-size:30px;line-height:1.25;letter-spacing:0}
.ab.en .fo-q-sub{width:auto;white-space:normal;font-size:15px;line-height:1.6;letter-spacing:0;padding-top:0}
.ab.en .fo-h2{font-size:40px;font-weight:400;line-height:1.22;letter-spacing:0}
.ab.en .fo-body{font-size:16px;line-height:1.85;letter-spacing:0}
.ab.en .fo-body p{white-space:normal;max-width:500px}
.ab.en .fo-body p+p{margin-top:18px}
@container fo (min-width:640px) and (max-width:1279px){
  .ab.en .fo-quote{width:230px;align-self:center}
  .ab.en .fo-q-main{font-size:28px}
}
@container fo (max-width:639px){
  .ab.en .fo-unit{flex-direction:column;align-items:center;gap:30px}
  .ab.en .fo-ph{flex:none;width:min(340px, 100%)}
  .ab.en .fo-quote{width:auto!important;max-width:300px;text-align:center;padding-top:0;align-self:center}
  .ab.en .fo-q-main{font-size:26px!important}
  .ab.en .fo-q-sub{font-size:14.5px!important}
  .ab.en .fo-h2{font-size:min(32px, calc((100cqi - 48px) / 14.2));white-space:nowrap}
}
@container fo (min-width:1280px){
  .ab.en .fo-stage{grid-template-columns:340px 500px minmax(0,1fr)}
  .ab.en .fo-quote{margin-right:24px}
}

/* CONTACT band */
.ab.en .ct-h2{font-size:44px;font-weight:400;line-height:1.2;letter-spacing:0}
.ab.en .ct-body{font-size:16px;line-height:1.85;letter-spacing:0}
.ab.en .ct-body br{display:inline!important}
.ab.en .ct-cta{font-size:17px;letter-spacing:.08em}
.ab.en .ct-note{font-size:12.5px;letter-spacing:0}
@container ct (max-width:1199px){
  .ab.en .ct-stage{grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:56px}
  .ab.en .ct-h2{font-size:36px;white-space:normal}
}
@container ct (max-width:899px){
  .ab.en .ct-stage{grid-template-columns:minmax(0,1fr)}
}
@container ct (max-width:639px){
  .ab.en .ct-h2{font-size:min(34px, calc((100cqw - 48px) / 12.2))}
}
/* narrow tablets (768–1099px): the last chapter (and its gift) must fit the window when the travel ends */
@container sigs (min-width:768px) and (max-width:1099px){
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene{grid-template-columns:auto minmax(0,350px);column-gap:48px!important}
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene>.vt{max-width:350px}
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene>.vt:first-child:not(.sig-title),.ab.en section[data-sig]:not(.sig-v) [data-track] .sig-title+.vt{font-size:30px!important;margin-bottom:22px!important}
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene>.vt:nth-child(2):not(.sig-title+.vt),.ab.en section[data-sig]:not(.sig-v) [data-track] .sig-title+.vt+.vt{font-size:15.5px!important;line-height:1.75!important}
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene:first-child{padding:0 40px!important}
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene:first-child>div:last-child{width:250px!important;gap:22px!important}
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene:first-child>div:last-child .ph{width:250px!important;height:158px!important}
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene:first-child>div:last-child>div:last-child{width:250px!important;max-width:250px}
}
/* 900–1099px: the last chapter keeps its full text column and gift, so it fills the window when the travel ends (no empty stretch before the final screen) */
@container sigs (min-width:900px) and (max-width:1099px){
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene{grid-template-columns:auto minmax(0,460px)}
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene>.vt{max-width:460px}
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene:first-child>div:last-child{width:300px!important}
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene:first-child>div:last-child .ph{width:300px!important;height:190px!important}
  .ab.en section[data-sig]:not(.sig-v) [data-track] .scene:first-child>div:last-child>div:last-child{width:300px!important;max-width:300px}
}