/* Kohana. build-07 r19 PROTOTYPE (2026-11-03, local, not published) — loaded after build07q.css. CSS only.
   1. Tablets and PC (600px and up): no more side-by-side hero. Every width keeps the phone composition: the mizuhiki and the
      script Kohana. at the top centre, the copy below from the left, IBJ AWARD at the right beside the heading (below and to
      the right of the logo). The copy and the award sit in a centred box of at most 880px, so a wider screen mostly adds side
      space. The logo is sized from the height of its stage and the copy always starts under the stage, so they can never meet,
      whatever the window height. The light and the background follow the stage as on phones.
   2. The copy block, every width: smaller and quieter, in order of importance — the heading compact (22px phones / 26px tablets /
      28px PC, tighter spacing), the sub line one step smaller, the notes smaller and paler, tighter gaps, a little more room on
      the left on phones; the hero ends with its content and the letters start sooner (less space above them).
   The mizuhiki, the logo, IBJ AWARD (image, fade) and every animation are unchanged. */

/* 2. the copy block (all widths) */
#top-fv .eyebrow{font-size:12px;letter-spacing:.2em;margin-bottom:4px}
#top-fv h1{font-size:22px;line-height:1.55;letter-spacing:.03em}
#top-fv .sub{font-size:13px;line-height:1.8;margin-top:8px}
#top-fv .note{font-size:11.5px;line-height:1.75;color:#8a7a70;margin-top:12px}
#top-fv .fn summary{font-size:12px;min-height:40px}
@media(max-width:37.49em){
 #top-fv .copy{padding-left:24px;padding-right:24px;padding-bottom:16px}
 #top-fv>.iaw-adopted{top:calc(var(--hh) + min(46svh,420px) - 6px)}
}
@media(min-width:23.25em) and (max-width:24.3125em){#top-fv>.iaw-adopted{right:16px}}
html[data-v="7"] #top-fv + #letters{padding-top:32px}

/* 1. tablets and PC: the same composition in a centred box */
@media(min-width:37.5em){
 #top-fv{display:block;min-height:0;
  --st:clamp(300px,44svh,440px);--lw:min(300px,calc((var(--st) - 56px)*1.0877));
  --lx:calc(50% - var(--lw)/2);--ly:calc(var(--hh) + (var(--st) - var(--lh))/2 - 8px);
  --bw:min(calc(100% - 64px),880px);--bx:calc((100% - var(--bw))/2);--aw:132px;
  background:
   radial-gradient(circle at 18% calc(var(--hh) + var(--st)*.3),rgba(239,217,207,.4),rgba(239,217,207,0) 30%),
   radial-gradient(circle at 84% calc(var(--hh) + var(--st)*.12),rgba(234,220,196,.5),rgba(234,220,196,0) 32%),
   linear-gradient(180deg,#efe3d1 0,#f4eadc calc(var(--hh) + var(--st)*.6),var(--washi) calc(var(--hh) + var(--st) + 40px))}
 #top-fv .copy{position:relative;z-index:2;width:auto;max-width:var(--bw);margin:0 auto;padding:calc(var(--hh) + var(--st) + 18px) 0 24px}
 #top-fv>.iaw-adopted{--aw:132px;left:auto;right:var(--bx);bottom:auto;top:calc(var(--hh) + var(--st) + 6px)}
 .fv-light{left:0;right:0;width:auto;top:var(--hh);height:calc(var(--st) + 48px);-webkit-mask-image:none;mask-image:none}
 #top-fv h1{font-size:26px}
 #top-fv .sub{font-size:14px}
 #top-fv .note{font-size:12px}
 html[data-v="7"] #top-fv + #letters{padding-top:44px}
}
@media(min-width:64em){
 #top-fv{--st:clamp(320px,46svh,460px);--lw:min(340px,calc((var(--st) - 56px)*1.0877));--aw:144px}
 #top-fv>.iaw-adopted{--aw:144px}
 #top-fv h1{font-size:28px}
 #top-fv .eyebrow{font-size:13px}
 #top-fv .cta-wrap{margin-top:18px}
 #top-fv .note{margin-top:14px}
 html[data-v="7"] #top-fv + #letters{padding-top:56px}
}