/*
Theme Name: FinLi
Theme URI: https://example.com/
Author: FinLi Team
Description: FinLi official one-page theme.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: finli
*/

:root{--bk:#080808;--wh:#f3efe8;--cr:#ebe5da;--rd:#c41e1e;--rd2:#8b1515;--gd:#b8956a;--tx:#222}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Serif JP','Georgia',serif;background:var(--bk);color:var(--wh);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease}
.rv.show{opacity:1;transform:translateY(0)}
.rv.d1{transition-delay:.15s}.rv.d2{transition-delay:.3s}.rv.d3{transition-delay:.4s}
.label{font-size:11px;font-weight:500;letter-spacing:.5em;text-transform:uppercase;margin-bottom:24px}
.label--r{color:var(--rd)}.label--d{color:var(--rd2)}.label--g{color:var(--gd)}

/* HERO */
.hero{position:relative;min-height:125vh;min-height:125svh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:#000}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;filter:none;animation:hz 14s ease forwards}
@keyframes hz{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero-ov{position:absolute;inset:0;background:transparent}
.hero-c{position:absolute;top:65%;left:0;right:0;z-index:1;text-align:center;padding:40px 20px;max-width:600px;width:100%;margin:0 auto;animation:fi 1.8s ease .3s both}
@keyframes fi{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.hero-mark{font-size:clamp(36px,9vw,65px);font-weight:900;letter-spacing:.12em;margin-bottom:6px;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero-sub{font-size:clamp(8px,1.32vw,11px);font-weight:300;letter-spacing:.5em;color:var(--gd);text-transform:uppercase;margin-bottom:clamp(29px,5.4vw,50px)}
.hero-msg{font-weight:300;font-size:clamp(13px,2.28vw,19px);line-height:2.4;letter-spacing:.05em;color:#e7dfd1;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero-msg .acc{color:#b8956a}
.hero-msg b{color:var(--gd);font-weight:500}
.hero-scroll{margin-top:clamp(36px,6vw,60px);display:flex;flex-direction:column;align-items:center;opacity:.4}
.hero-scroll span{display:block;width:1px;height:50px;background:linear-gradient(to bottom,var(--gd),transparent);animation:pu 2.5s infinite}
@keyframes pu{0%,100%{opacity:.3}50%{opacity:1}}
.hero-below-msg{padding:150px 20px;text-align:center;background:var(--wh)}
.hero-below-msg.hero-msg{color:var(--tx);text-shadow:none}
.hero-below-msg.hero-msg .acc{color:var(--rd2)}
@media(min-width:769px){
  .hero-below-msg.hero-msg{font-size:clamp(16px,2.74vw,23px)}
}

/* ABOUT */
.about{background:var(--wh);color:var(--tx);padding:clamp(24px,4vw,40px) 20px clamp(60px,10vw,100px)}
.about-inner{max-width:680px;margin:0 auto}
.about h2{font-size:clamp(18px,4vw,30px);font-weight:700;line-height:1.9;color:var(--bk);margin-bottom:32px}
.about-body{font-weight:300;font-size:clamp(13px,1.5vw,15px);line-height:2.4;color:#4d4d4d}
.about-body p+p{margin-top:18px}
.about-body .hl{color:var(--rd2);font-weight:500}.about-body .bk{color:var(--bk);font-weight:500}

/* DARK ECONOMY */
.dark-econ{padding:clamp(60px,10vw,120px) 20px}
.dark-econ-inner{max-width:680px;margin:0 auto}
.dark-econ h2{font-size:clamp(20px,4.5vw,38px);font-weight:700;line-height:1.8;margin-bottom:40px}
.dark-econ h2 em{font-style:normal;color:var(--rd)}
.qb{border-left:2px solid var(--rd);padding-left:20px;font-weight:300;font-size:clamp(13px,1.6vw,16px);line-height:2.4;color:#888}
.qb strong{color:var(--wh);font-weight:500}.qb .big{font-size:1.1em;color:var(--wh);font-weight:500}
.qb p+p{margin-top:20px}
.et{margin-top:48px;width:100%;border-collapse:collapse;font-size:clamp(11px,1.3vw,13px)}
.et th{text-align:left;padding:10px 12px;border-bottom:2px solid var(--rd2);color:var(--gd);font-weight:500;letter-spacing:.06em;font-size:10px;text-transform:uppercase}
.et td{padding:12px;border-bottom:1px solid rgba(255,255,255,.06);color:#aaa;font-weight:300;line-height:1.7}
.et td:first-child{color:var(--wh);font-weight:500}.et td:nth-child(2){color:var(--rd);font-weight:500;white-space:nowrap}

/* MISSIONS */
.missions{background:var(--bk)}
.mh{text-align:center;padding:clamp(60px,10vw,100px) 20px clamp(32px,5vw,60px)}
.mh h2{font-size:clamp(48px,12vw,110px);font-weight:900;letter-spacing:.08em;line-height:1;margin-bottom:10px}
.mh p{font-size:11px;font-weight:300;letter-spacing:.35em;color:var(--gd)}
.mc{display:grid;grid-template-columns:1fr 1fr}
.mc--r .mc-i{order:2}.mc--r .mc-t{order:1}
.mc-i{position:relative;overflow:hidden;min-height:clamp(280px,50vw,500px);background:#111}
.mc-i img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) contrast(1.1) saturate(.7);transition:transform 1.5s ease}
.mc:hover .mc-i img{transform:scale(1.04)}
.mc-i .n{position:absolute;bottom:12px;left:20px;font-size:clamp(60px,12vw,140px);font-weight:900;color:rgba(255,255,255,.06);line-height:1;pointer-events:none}
.mc-t{padding:clamp(24px,3vw,48px) clamp(18px,2.4vw,34px);display:flex;flex-direction:column;justify-content:center;border-top:1px solid rgba(255,255,255,.04)}
.mc-l{font-size:10px;letter-spacing:.4em;color:var(--rd);text-transform:uppercase;margin-bottom:12px;font-weight:500}
.mc-ti{font-size:clamp(13px,1.6vw,15px);font-weight:500;letter-spacing:.05em;color:var(--gd);margin-bottom:8px}
.mc-s{font-weight:300;font-size:clamp(18px,3vw,30px);line-height:1.6;margin-bottom:clamp(28px,4vw,40px)}
.ops{display:flex;flex-direction:column;gap:clamp(12px,2.2vw,18px);list-style:none}
.ops li{padding-left:10px;border-left:2px solid rgba(196,30,30,.3)}
.ops li h4{font-size:clamp(12px,1.4vw,13px);font-weight:500;letter-spacing:.03em;color:var(--gd);margin-bottom:2px}
.ops li p{font-weight:300;font-size:clamp(11px,1.2vw,13px);line-height:1.9;color:#777}

/* SURVIVOR */
.sv{padding:clamp(60px,10vw,100px) 20px;background:linear-gradient(180deg,var(--bk),#0f0a08)}
.sv-inner{max-width:640px;margin:0 auto}
.sv h2{font-size:clamp(18px,3.5vw,30px);font-weight:700;line-height:1.7;margin-bottom:32px}
.sv h2 em{font-style:normal;color:var(--gd)}
.sv-story{font-weight:300;font-size:clamp(13px,1.6vw,16px);line-height:2.6;color:#bbb;margin-bottom:32px}
.sv-story .hi{color:var(--gd);font-weight:500}
.sv-q{font-weight:300;font-size:clamp(15px,2.2vw,20px);line-height:2.2;color:var(--wh);font-style:italic;border-left:2px solid var(--gd);padding-left:20px;margin-bottom:32px}
.sv-core{font-weight:300;font-size:clamp(13px,1.5vw,15px);line-height:2.4;color:#888}
.sv-core strong{color:var(--wh);font-weight:500}.sv-core p+p{margin-top:16px}

/* PATH */
.path{background:var(--wh);color:var(--tx);padding:clamp(60px,10vw,100px) 20px}
.path-inner{max-width:720px;margin:0 auto}
.path h2{font-size:clamp(18px,3.5vw,28px);font-weight:700;color:var(--bk);margin-bottom:40px}
.ph{display:grid;grid-template-columns:48px 64px 1fr;gap:12px;align-items:start;padding:20px 0;border-bottom:1px solid #e0dbd3}
.ph-n{font-size:clamp(28px,5vw,40px);font-weight:900;color:var(--rd2);line-height:1;opacity:.25}
.ph-d{font-size:12px;font-weight:500;color:var(--rd2);padding-top:6px}
.ph-c h4{font-size:clamp(13px,1.5vw,15px);font-weight:700;color:var(--bk);margin-bottom:4px}
.ph-c p{font-size:clamp(12px,1.3vw,13px);line-height:1.9;color:#555;font-weight:300}

/* NETWORK */
.nw{background:var(--cr);color:var(--tx);padding:clamp(60px,10vw,100px) 20px}
.nw-inner{max-width:880px;margin:0 auto}
.nw-top{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.nw-top img{width:40px;height:40px;flex-shrink:0}
.nw-top h3{font-size:clamp(16px,2.5vw,20px);font-weight:700;color:var(--bk)}
.nw-desc{font-weight:300;font-size:clamp(12px,1.4vw,14px);line-height:2.2;color:#555;max-width:640px;margin-bottom:40px}
.sts{display:flex;gap:clamp(32px,6vw,60px);justify-content:center;padding:36px 0;border-top:1px solid #d5cfc6;border-bottom:1px solid #d5cfc6;margin-bottom:40px;flex-wrap:wrap}
.st-n{font-size:clamp(40px,9vw,72px);font-weight:900;color:var(--rd2);line-height:1;text-align:center}
.st-l{font-size:10px;letter-spacing:.2em;color:#888;text-align:center;margin-top:6px}
.nw-map{width:100%;margin-bottom:40px}
.rg{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:24px}
.rg h4{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--rd2);border-bottom:1px solid #d5cfc6;padding-bottom:6px;margin-bottom:8px}
.rg p{font-size:9.24px;font-weight:300;line-height:2;color:#777}
.rg .sub-r{margin-top:14px}

/* PROFILE */
.pf{background:var(--wh);padding:clamp(48px,8vw,80px) 20px;border-top:1px solid #e0dbd3}
.pf-inner{max-width:640px;margin:0 auto;display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.pf-img{width:100.8px;height:100.8px;border-radius:50%;object-fit:cover;filter:grayscale(.3);flex-shrink:0}
.pf-text{flex:1;min-width:220px}
.pf-text h3{font-size:clamp(15.12px,2.52vw,20.16px);font-weight:700;color:var(--bk);margin-bottom:2px}
.pf-text .en{font-size:9.24px;letter-spacing:.2em;color:#888;margin-bottom:14px}
.pf-text p{font-weight:300;font-size:clamp(10.08px,1.176vw,11.76px);line-height:2.2;color:#555}

/* FOOTER */
.ft{background:var(--bk);padding:48px 20px;text-align:center}
.ft-m{font-size:16px;font-weight:700;letter-spacing:.15em;color:#2a2a2a;margin-bottom:12px}
.ft p{font-size:10px;letter-spacing:.2em;color:#3a3a3a}
.ft p+p{margin-top:4px}

@media(max-width:768px){
  .hero{min-height:100vh;min-height:100svh;align-items:center}
  .hero-bg{object-fit:cover;object-position:center 24%}
  .hero-c{position:absolute;top:75%;left:0;right:0;max-width:600px;margin:0 auto}
  .et{margin-left:-8px;width:calc(100% + 8px)}
  .et th:first-child,.et td:first-child{padding-left:0;padding-right:10px}
  .et th:nth-child(2),.et td:nth-child(2){padding-left:18px;padding-right:0}
  .et th:nth-child(3),.et td:nth-child(3){padding-left:0;padding-right:0}
  .mc{grid-template-columns:1fr}
  .mc--r .mc-i{order:0}.mc--r .mc-t{order:0}
  .mc-t{padding-left:6px;padding-right:2px}
  .mc--r .mc-t{padding-right:2px}
  .missions .mc:last-of-type .mc-t{padding-right:2px}
  .ops li{position:relative;border-left:none;padding-left:6px}
  .ops li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(196,30,30,.45)}
  .ops li p{font-size:13px;line-height:2}
  .hero-msg,
  .about-body,
  .qb,
  .sv-story,
  .sv-core,
  .ph-c p,
  .nw-desc,
  .rg p,
  .pf-text p{font-size:calc(1em + 0.8pt)}
  .rg p{font-size:calc(9.24px + 0.4pt)}
  .pf-text p{font-size:calc(10.08px + 0.4pt)}
  .about h2,
  .sv h2,
  .path h2{font-size:calc(18px + 1.5pt)}
  .dark-econ h2{font-size:calc(20px + 1.5pt)}
  .mc-i{min-height:240px}
  .path{padding-right:10px}
  .ph{grid-template-columns:28px 1fr;gap:2px}
  .ph-d{display:none}
  .pf-inner{flex-direction:column;align-items:center;text-align:center}
}