/* WE-WIN LAB 品牌建设 — page stylesheet (loads after ../shared/site.css). Page accent gem: amethyst (the LAB logo colour), used sparingly. */

/* ============ SWAPPABLE IMAGES — change one line to replace a picture (sources in CREDITS.txt) ============
   Paths are written as ../studios/assets/… so they resolve the same from this file or from ../shared/site.css (where they are used). */
:root{
  --img-hero:      url("../studios/assets/hero.webp");       /* hero — navy + gold brand-design desk, 4:5 crop (WE-WIN, user-created) */
  --img-surround:  url("../studios/assets/surround.webp");   /* desktop side areas — the same render, full frame, heavily blurred + darkened */
  --img-touch:     url("../studios/assets/touch.webp");      /* 接触点 band — WE-WIN LAB book cover, open book, tablet, card (WE-WIN LAB design work) */
  --img-manual:    url("../studios/assets/manual.webp");     /* 流程 band — open brand manual, swatches, laptop on a walnut desk (WE-WIN LAB design work) */
  --img-ingya:     url("../studios/assets/ingya.webp");      /* 作品 card — ingya identity: folder, tent card, box (WE-WIN LAB design work) */
  --img-marks:     url("../studios/assets/marks.webp");      /* closing band — four gem marks framed on a navy wall (WE-WIN LAB design work) */
  --gem:var(--amethyst);
  --cw:min(100vw,var(--col));                                /* column width, for photo bands sized to the column */
}
.phero{--hero-ratio:4/5; --hero-pos:50% 0; --hero-card-at:1;   /* monitor + open book above the card; card over the desk edge and chair */
  --hero-shade:linear-gradient(180deg,rgba(6,13,31,.45) 0,rgba(6,13,31,.05) 13%,rgba(6,13,31,0) 55%,rgba(6,13,31,.3) 76%,var(--bg) 100%)}

/* 接触点: heading on navy, then the whole render as a visible band (full width, nothing cropped), list over its dark table edge */
#touch  {--top:96px; --ih:calc(var(--cw) * 1.08 * .6255);
  --band:var(--img-touch); --band-size:108% auto; --band-pos:55% var(--top); --band-h:calc(var(--top) + var(--ih) + 160px); --band-pad:0px;
  --band-shade:linear-gradient(180deg,transparent 0,transparent var(--top),rgba(6,13,31,.2) calc(var(--top) + 30px),rgba(6,13,31,.16) calc(var(--top) + 60px),
    rgba(6,13,31,.12) calc(var(--top) + var(--ih) - 64px),rgba(6,13,31,.6) calc(var(--top) + var(--ih) - 18px),rgba(6,13,31,.93) calc(var(--top) + var(--ih)),var(--bg) 100%)}
#touch .touch{margin-top:calc(var(--ih) - 22px)}
/* 流程: the brand manual (marks + swatches) between heading and steps, steps over its lower edge */
#steps  {--top:96px; --ih:calc(var(--cw) * 1.3 * .6255);
  --band:var(--img-manual); --band-size:130% auto; --band-pos:100% var(--top); --band-h:calc(var(--top) + var(--ih) + 160px); --band-pad:0px;
  --band-shade:linear-gradient(180deg,transparent 0,transparent var(--top),rgba(6,13,31,.1) calc(var(--top) + 30px),rgba(6,13,31,0) calc(var(--top) + 60px),
    rgba(6,13,31,0) calc(var(--top) + var(--ih) - 130px),rgba(6,13,31,.62) calc(var(--top) + var(--ih) - 40px),rgba(6,13,31,.93) calc(var(--top) + var(--ih)),var(--bg) 100%)}
#steps .steps{margin-top:calc(var(--ih) - 70px)}
/* closing: the four marks on the wall above, text below the shelf */
#closing{--ih:calc(var(--cw) * 1.6 * .6255);
  --band:var(--img-marks); --band-size:160% auto; --band-pos:100% 0; --band-h:calc(var(--ih) + 120px); --band-pad:calc(var(--ih) - 12px);
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.25) 0%,rgba(6,13,31,0) 14%,rgba(6,13,31,0) calc(var(--ih) * .62),rgba(6,13,31,.55) calc(var(--ih) * .84),rgba(6,13,31,.9) var(--ih),var(--bg) 100%)}

/* light fields behind the glass (navy/amethyst/gold) */
#trust {--lf:radial-gradient(250px 190px at 6% 40%,rgba(160,106,224,.2),transparent 70%),radial-gradient(230px 180px at 96% 74%,rgba(226,196,106,.15),transparent 70%)}
#faq   {--lf:radial-gradient(250px 190px at 94% 30%,rgba(226,196,106,.16),transparent 70%),radial-gradient(260px 200px at 6% 82%,rgba(160,106,224,.2),transparent 70%)}
#work  {--lf:radial-gradient(260px 220px at 8% 30%,rgba(160,106,224,.22),transparent 70%),radial-gradient(240px 200px at 94% 64%,rgba(74,127,240,.2),transparent 70%),radial-gradient(220px 170px at 10% 92%,rgba(226,196,106,.13),transparent 70%)}

/* 作品与案例: one portfolio card (image fully visible, minimal caption) + the case link card */
.work{padding:8px 8px 14px;--g-r:22px}
.work .shot{aspect-ratio:1586/992;border-radius:15px;background:var(--img-ingya) 50% 50%/cover no-repeat,#0a1530;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.js .work .shot.lazy-bg:not(.is-in){background-image:none}
.work figcaption{padding:12px 10px 0}
.work h3{font-family:var(--serif);font-size:16.5px}
.work p{color:var(--tx2);font-size:13.5px;margin-top:2px}
#work .linkcard{margin-top:12px}

/* amethyst mark next to the hero eyebrow text */
.eyebrow span{display:flex;align-items:center;gap:8px}
.eyebrow span::before{content:"";width:12px;height:2px;border-radius:1px;background:var(--gem)}

/* touchpoints: title + short line, small amethyst dot on the title */
.touch h3{display:flex;align-items:center;gap:9px}
.touch h3::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gem);box-shadow:0 0 8px rgba(160,106,224,.8)}
.touch p{padding-left:15px}