/* v7.0 light first screen ("浅 · 渐隐", Tim, 30 Oct 2026).
   Loaded last on every page with a photo hero. The photo is no longer under a dark veil:
   - phones: the photo fills the top of the first screen and dissolves downwards into the paper;
     the headline and text sit on the paper below it
   - computers: the paper is on the left with the text; the photo stays clear on the right and
     dissolves towards the text
   Pages whose first screen has no photo (Industrial Ventures, legal pages, Taiwan "plain" heroes) keep a
   petrol colour block. Colours: petrol #1A484D, copper #B76937 / dark copper #8C4A24, paper #F7F5F0. */

:root{--lf-paper:#F7F5F0;--lf-paper-0:rgba(247,245,240,0);--lf-head:#173F43;--lf-text:#3D5759;--lf-soft:#5F7274;
  --lf-petrol:#1A484D;--lf-petrol-d:#123438;--lf-copper:#B76937;--lf-copper-d:#8C4A24;--lf-copper-l:#E2A983;
  --lf-photo:max(300px,48svh)}

/* ---------- 1. Home page and blog (b3 look): .hero / .post-hero with img.bg ---------- */
.hero:has(> img.bg + .hero-in){background:var(--lf-paper);color:var(--lf-head);min-height:0;display:block;padding-bottom:0}
.hero > img.bg:has(+ .hero-in){height:var(--lf-photo);bottom:auto;object-position:60% 30%}
.hero:has(> img.bg + .hero-in)::before{height:var(--lf-photo);bottom:auto;
  background:linear-gradient(to bottom,rgba(0,0,0,.32) 0%,rgba(0,0,0,0) 22%,var(--lf-paper-0) 46%,rgba(247,245,240,.86) 80%,var(--lf-paper) 100%)}
.hero:has(> img.bg + .hero-in) .hero-in{padding-top:calc(var(--lf-photo) - 56px)}
.post-hero:has(> img.bg + .hero-in){padding-bottom:40px}
.hero:has(> img.bg + .hero-in) h1{color:var(--lf-head)}
.hero:has(> img.bg + .hero-in) h1 span,.hero:has(> img.bg + .hero-in) .kicker,.hero:has(> img.bg + .hero-in) .crumb,.hero:has(> img.bg + .hero-in) .crumb-k{color:var(--lf-copper-d)}
.hero:has(> img.bg + .hero-in) .crumb span{color:var(--lf-soft)}
.hero:has(> img.bg + .hero-in) .lead{color:var(--lf-text)}
.hero:has(> img.bg + .hero-in) .chip,.hero:has(> img.bg + .hero-in) .byline{color:var(--lf-text)}
.hero:has(> img.bg + .hero-in) .chip strong,.hero:has(> img.bg + .hero-in) .byline a{color:var(--lf-head)}
.hero:has(> img.bg + .hero-in) .micro{color:var(--lf-soft)}
.hero:has(> img.bg + .hero-in) .micro .i,.hero:has(> img.bg + .hero-in) .byline .dot{color:var(--lf-copper-d)}
.hero:has(> img.bg + .hero-in) .btn{background:var(--lf-petrol);border-color:var(--lf-petrol);color:#fff}
.hero:has(> img.bg + .hero-in) .btn:hover{background:var(--lf-petrol-d)}
.hero:has(> img.bg + .hero-in) .btn-2{background:transparent;color:var(--lf-petrol);border-color:rgba(26,72,77,.45)}
/* the four facts become a petrol band at the end of the first screen */
.hero:has(> img.bg + .hero-in) .strip{background:var(--lf-petrol);border-top:0;margin-top:8px}
.hero:has(> img.bg + .hero-in) .strip b{color:var(--lf-copper-l)}
.hero:has(> img.bg + .hero-in) .strip span{color:rgba(255,255,255,.8)}
/* the light sheet under the hero no longer needs to overlap a dark picture */
.hero:has(> img.bg + .hero-in) + .sheet,.post-hero:has(> img.bg + .hero-in) + .post,.post-hero:has(> img.bg + .hero-in) ~ .post{margin-top:0}

@media(min-width:900px){
  .hero:has(> img.bg + .hero-in){min-height:min(100svh,880px);display:flex;flex-direction:column;justify-content:center}
  .post-hero:has(> img.bg + .hero-in){min-height:0;display:block;padding-bottom:64px}
  .hero > img.bg:has(+ .hero-in){height:100%;object-position:center}
  .hero:has(> img.bg + .hero-in)::before{height:auto;bottom:0;
    background:linear-gradient(to right,var(--lf-paper) 0%,var(--lf-paper) 30%,rgba(247,245,240,.84) 44%,var(--lf-paper-0) 66%),
               linear-gradient(to bottom,rgba(0,0,0,.25),rgba(0,0,0,0) 18%)}
  .hero:has(> img.bg + .hero-in) .hero-in{align-items:flex-start;text-align:left;padding-top:150px}
  .post-hero:has(> img.bg + .hero-in) .hero-in{max-width:1240px}
  .hero:has(> img.bg + .hero-in) h1{max-width:13ch}
  .post-hero:has(> img.bg + .hero-in) h1{max-width:17ch}
  .post-hero:has(> img.bg + .hero-in) h1 span{margin-left:0;max-width:26ch}
  .hero:has(> img.bg + .hero-in) .lead{margin-left:0;max-width:26rem}
  .hero:has(> img.bg + .hero-in) .chip,.hero:has(> img.bg + .hero-in) .ctas,.hero:has(> img.bg + .hero-in) .micro,
  .hero:has(> img.bg + .hero-in) .byline,.hero:has(> img.bg + .hero-in) .crumb{justify-content:flex-start}
  .hero:has(> img.bg + .hero-in) .strip{margin-top:auto}
  /* header: brand on the paper, menu over the photo */
  body:has(.hero > img.bg + .hero-in) .hd:not(.hd-pin) .brand-n{color:var(--lf-head)}
  body:has(.hero > img.bg + .hero-in) .hd:not(.hd-pin) .brand-s{color:var(--lf-copper-d)}
}
@media(min-width:1180px){
  body:has(.hero > img.bg + .hero-in) .hd:not(.hd-pin) .nav a{text-shadow:0 1px 10px rgba(0,0,0,.5)}
}

/* ---------- 2. Copied pages (M&A, Partners; DE and EN): .hero with div.bg and an overlay div ---------- */
section.hero:has(> div.bg){background:var(--lf-paper);display:block;min-height:0}
section.hero > div.bg{height:var(--lf-photo);bottom:auto;background-position:60% 30%}
section.hero > div.bg + div{height:var(--lf-photo);bottom:auto;
  background:linear-gradient(to bottom,rgba(0,0,0,.32) 0%,rgba(0,0,0,0) 22%,var(--lf-paper-0) 46%,rgba(247,245,240,.86) 80%,var(--lf-paper) 100%)!important}
section.hero:has(> div.bg) .hero-in{padding-top:calc(var(--lf-photo) - 56px);padding-bottom:48px}
section.hero:has(> div.bg) .text-white{color:var(--lf-head)}
section.hero:has(> div.bg) [class*="text-white/"]{color:var(--lf-text)}
section.hero:has(> div.bg) [class*="text-[#C9A84C]"]{color:var(--lf-copper-d)}
section.hero:has(> div.bg) a[class*="bg-[#C9A84C]"]{background:var(--lf-petrol);color:#fff}
section.hero:has(> div.bg) a[class*="bg-[#C9A84C]"]:hover{background:var(--lf-petrol-d)}
section.hero:has(> div.bg) a[class*="border-white"]{color:var(--lf-petrol);border-color:rgba(26,72,77,.45)}
section.hero:has(> div.bg) .en-hero-fact{color:var(--lf-text)}
.lite > header + section.hero:has(> div.bg) p.font-inter.text-lg{color:var(--lf-text)}
@media(min-width:900px){
  section.hero:has(> div.bg){display:flex;min-height:min(78svh,760px)}
  section.hero > div.bg{height:auto;bottom:0;background-position:center}
  section.hero > div.bg + div{height:auto;bottom:0;
    background:linear-gradient(to right,var(--lf-paper) 0%,var(--lf-paper) 30%,rgba(247,245,240,.84) 46%,var(--lf-paper-0) 70%),
               linear-gradient(to bottom,rgba(0,0,0,.25),rgba(0,0,0,0) 18%)!important}
  section.hero:has(> div.bg) .hero-in{padding-top:9rem;width:100%}
  section.hero:has(> div.bg) h1{max-width:14ch}
  section.hero:has(> div.bg) .hero-in > p{max-width:30rem}
  body:has(section.hero > div.bg) .hd:not(.hd-pin) .brand-n{color:var(--lf-head)}
  body:has(section.hero > div.bg) .hd:not(.hd-pin) .brand-s{color:var(--lf-copper-d)}
}
@media(min-width:1180px){
  body:has(section.hero > div.bg) .hd:not(.hd-pin) .nav a{text-shadow:0 1px 10px rgba(0,0,0,.5)}
}

/* ---------- 3. Taiwan pages (tw.css): header bar on top, .hero with img.bg and an ::after veil ---------- */
body:has(.top) .hero:has(> img.bg){background:#f7f4ee;color:var(--lf-head)}
body:has(.top) .hero > img.bg{height:var(--lf-photo);bottom:auto}
body:has(.top) .hero:has(> img.bg)::after{height:var(--lf-photo);bottom:auto;
  background:linear-gradient(to bottom,rgba(247,244,238,0) 0%,rgba(247,244,238,0) 40%,rgba(247,244,238,.86) 78%,#f7f4ee 100%)}
body:has(.top) .hero:has(> img.bg) .wrap{padding-top:calc(var(--lf-photo) - 48px);padding-bottom:56px}
body:has(.top) .hero:has(> img.bg) h1{color:var(--lf-head)}
body:has(.top) .hero:has(> img.bg) .gold,body:has(.top) .hero:has(> img.bg) .kicker{color:var(--lf-copper-d)}
body:has(.top) .hero:has(> img.bg) .lede,body:has(.top) .hero:has(> img.bg) .who p{color:var(--lf-text)}
body:has(.top) .hero:has(> img.bg) .who b,body:has(.top) .hero:has(> img.bg) .byline a{color:var(--lf-head)}
body:has(.top) .hero:has(> img.bg) .byline,body:has(.top) .hero:has(> img.bg) .byline small{color:var(--lf-soft)}
body:has(.top) .hero:has(> img.bg) .btn.solid{background:var(--lf-petrol);color:#fff}
body:has(.top) .hero:has(> img.bg) .btn.solid:hover{background:var(--lf-petrol-d)}
body:has(.top) .hero:has(> img.bg) .btn.line{border-color:rgba(26,72,77,.45);color:var(--lf-petrol)}
@media(min-width:900px){
  body:has(.top) .hero > img.bg{height:100%;bottom:0}
  body:has(.top) .hero:has(> img.bg)::after{height:auto;bottom:0;
    background:linear-gradient(to right,#f7f4ee 0%,#f7f4ee 38%,rgba(247,244,238,.84) 54%,rgba(247,244,238,0) 74%)}
  body:has(.top) .hero:has(> img.bg) .wrap{padding-top:110px;padding-bottom:100px}
  body:has(.top) .hero:has(> img.bg) h1{max-width:12em}
  body:has(.top) .hero.sub:has(> img.bg) h1{max-width:11em;font-size:clamp(30px,3.2vw,44px)}
  body:has(.top) .hero:has(> img.bg) .lede,body:has(.top) .hero:has(> img.bg) .who{max-width:30em}
}

/* Phones: the photo settles from 106 % to 100 % when the page opens (motion.css). While it is still larger,
   its lower edge reaches past the fade and showed as a dark line. The photo now fades out at its own lower
   edge, so wherever that edge is during the movement, it runs into the paper. */
@media(max-width:899px){
  .hero > img.bg:has(+ .hero-in),section.hero > div.bg,body:has(.top) .hero > img.bg{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 94%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 94%)}
}