/* C skin — "hand scroll". Loaded after tokens/chrome/site on every page of this experiment branch.
   Breaks the DS on purpose: full-bleed layout, display type, vertical titles, terra and night as whole blocks. */
:root{--band:clamp(48px,5.4vw,92px);--night:#17110F;--c-paper:#F6F1E8;
  --wrap-w:calc(100vw - var(--band) - 2 * var(--gx))}
@media(max-width:860px){:root{--band:34px}}
body{padding-right:var(--band)}
.x-nav{right:var(--band)}
.x-mark .zh{display:none}

/* spine */
.c-spine{position:fixed;right:0;top:0;bottom:0;width:var(--band);z-index:45;background:var(--terra);color:var(--night);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px 0 22px}
.c-spine span{writing-mode:vertical-rl}
.c-spine .zh{font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.7vw,26px);letter-spacing:.42em}
/* The two Latin lines stand upright (2026-10-05): rotated with the vertical text they were small and had to be read sideways.
   The English company name is gone from the band (the logo says it); TAIWAN sits at the top and the Taipei time at the bottom. */
.c-spine .place,.c-spine .clock{writing-mode:horizontal-tb;font-family:var(--brand);font-weight:700;font-size:clamp(11px,.9vw,14px);letter-spacing:.14em;line-height:1;font-variant-numeric:tabular-nums}
.c-spine .clock{font-size:clamp(12px,1vw,15px);letter-spacing:.1em}
@media(max-width:1120px){.c-spine .place{font-size:9.5px;letter-spacing:.08em}.c-spine .clock{font-size:11px}}      /* the band is at its narrowest here */
@media(max-width:860px){.c-spine .place,.c-spine .clock{display:none}.c-spine{justify-content:center}.c-spine .zh{font-size:15px}}

/* header turns light over dark blocks */
/* (2026-10-05) The header no longer turns light over dark blocks. It only did so while it had no bar behind it, which is the first 24px of the page;
   scrolling back to the top, the panels lag behind the scroll for a moment, the dark one was still under the corner, and the header text went paper-on-paper,
   leaving the logo's dot and the slash of the language switch on their own. Past 24px the header has its own paper bar, so dark text is always right. */

.v{writing-mode:vertical-rl;text-orientation:upright}
.tcy{text-combine-upright:all;-webkit-text-combine:horizontal;letter-spacing:0}

/* ── display type ── */
.x-thesis,.x-h2,.x-cta-title,.x-close-line,.x-ptitle,.x-display{font-weight:300;letter-spacing:0}
.x-h2{font-size:clamp(36px,5.6vw,120px);line-height:1.16}
.x-team-head{grid-template-columns:1fr!important;display:grid;gap:clamp(20px,2.4vw,36px)}
.x-team-head .x-p{max-width:36em}
.x-h3{font-size:clamp(30px,3.6vw,72px);line-height:1.24;font-weight:300}
.x-offer-title{font-size:clamp(28px,3.2vw,60px);line-height:1.3;font-weight:300}
.x-sec b{font-size:clamp(30px,3.4vw,58px);font-weight:300}

/* ── page heads: vertical title against an ink wash (Chinese pages) ── */
.x-phead{position:relative;overflow:hidden}
.x-phead::before{content:"";position:absolute;left:0;bottom:0;width:70%;height:100%;z-index:0;pointer-events:none;
  background:url(/img/v3/confluence-1400.webp) 22% 70%/cover no-repeat;mix-blend-mode:multiply;opacity:.9;
  -webkit-mask-image:linear-gradient(to left,transparent,#000 52%);mask-image:linear-gradient(to left,transparent,#000 52%)}
.x-phead .x-wrap{position:relative;z-index:1}
@media(min-width:861px){
  html[lang="zh-Hant"] .x-phead{padding:0;height:100svh;min-height:620px}
  html[lang="zh-Hant"] .x-phead .x-wrap{height:100%;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(22px,3vw,60px);padding-top:calc(var(--nav-h) + 2svh)}
  html[lang="zh-Hant"] .x-ptitle{writing-mode:vertical-rl;text-orientation:upright;font-size:var(--pt,8svh);line-height:1.24;white-space:nowrap;flex:none}
  html[lang="zh-Hant"] .x-phead .x-eyebrow{writing-mode:vertical-rl;flex:none;padding-top:.4em;letter-spacing:.5em}
  html[lang="zh-Hant"] .x-lede{writing-mode:vertical-rl;margin:0;padding:.4em clamp(18px,2vw,32px) 0 0;border-top:0;border-right:1px solid rgba(36,27,24,.3);
    max-width:none;max-height:calc(100svh - var(--nav-h) - 16svh);font-size:clamp(15px,1.25vw,19px);line-height:2.15;letter-spacing:.1em;flex:none}
}
@media(max-width:860px){
  html[lang="zh-Hant"] .x-phead{padding-top:calc(var(--nav-h) + 12px)}
  html[lang="zh-Hant"] .x-ptitle{writing-mode:vertical-rl;text-orientation:upright;font-size:var(--pt,7svh);line-height:1.22;white-space:nowrap;height:calc(74svh - var(--nav-h));margin-left:auto}
  html[lang="zh-Hant"] .x-phead .x-eyebrow{position:absolute;left:0;top:0;writing-mode:vertical-rl;letter-spacing:.5em}
  .x-phead::before{width:100%;opacity:.55}
}
html[lang="en"] .x-ptitle{font-size:clamp(40px,6.4vw,136px);line-height:1.06}
html[lang="en"] .x-display{font-size:clamp(36px,5.2vw,118px);line-height:1.08}
html[lang="en"] .x-hero-grid{grid-template-columns:1fr}
html[lang="en"] .x-hero-art{position:absolute;right:calc(var(--band) + 2vw);top:12svh;width:min(34vw,520px);max-width:none;opacity:.2;z-index:0;pointer-events:none}
html[lang="en"] .x-hero{position:relative}
html[lang="en"] .x-hero-copy{position:relative;z-index:1}

/* ── colour blocks ── */
.x-cases{background:var(--night);color:var(--c-paper)}
.x-cases :is(.x-case,.x-case-brand,.x-case-cap,.x-case-sum,.x-case-stat,.x-case-label,.x-case-stat small){color:inherit}
.x-cases :is(.x-sec,.x-link){color:var(--terra)}
.x-cases .x-case{border-top-color:rgba(246,241,232,.5)}
.x-case-stat{font-weight:300;font-size:clamp(150px,21vw,400px)}
.x-case-stat small{font-size:.14em;letter-spacing:.08em;margin-left:.4em}

.x-cta,.x-close{background:var(--terra);border-top:0;color:var(--night)}
.x-cta :is(.x-cta-title,.x-p,.x-mail),.x-close :is(.x-close-line,.x-p,.x-link,.x-mail){color:var(--night)}
.x-cta-title,.x-close-line{font-size:clamp(40px,6.6vw,140px);line-height:1.14}
.x-cta .x-btn,.x-close .x-btn{background:var(--night);color:var(--c-paper);border-color:var(--night)}
.x-cta-grid,.x-close-inner{grid-template-columns:1fr}
.x-cta-fig{display:none}

/* ── home: the hand scroll ── */
.c-scroll{position:relative;height:300vh;--big:min(9.1svh,9vw)}
.c-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.c-track{display:flex;flex-direction:row-reverse;height:100%;width:max-content;position:absolute;right:0;top:0;will-change:transform}
.c-panel{height:100%;width:calc(100vw - var(--band));position:relative;flex:none;overflow:hidden}
.c-p1{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(20px,3vw,56px);padding:0 clamp(24px,4vw,72px)}
.c-p1 h1{font-family:var(--serif);font-weight:300;color:var(--ink);font-size:var(--big);line-height:1.22;letter-spacing:.02em;height:100%;padding-top:8svh;white-space:nowrap;position:relative;z-index:2}
.c-col{display:block;overflow:hidden}.c-col>span{display:block}
.js .c-col>span{animation:c-fall 1.15s cubic-bezier(.2,.7,.1,1) both}
.js .c-col:nth-child(1)>span{animation-delay:.25s}.js .c-col:nth-child(2)>span{animation-delay:.5s}
@keyframes c-fall{from{transform:translateY(-102%)}to{transform:none}}
.c-side{height:100%;padding:9.6svh 0 8svh;position:relative;z-index:2}
.c-side .x-eyebrow{display:block;margin-left:22px;text-orientation:mixed;letter-spacing:.42em}
.c-side p.note{text-orientation:mixed;font-size:clamp(15px,1.3vw,20px);line-height:2.15;letter-spacing:.12em;max-height:66svh;color:var(--text)}
.c-wash{position:absolute;left:0;bottom:0;width:74%;height:100%;max-width:none;object-fit:cover;object-position:18% 62%;mix-blend-mode:multiply;z-index:1;will-change:transform;
  -webkit-mask-image:linear-gradient(to left,transparent,#000 46%);mask-image:linear-gradient(to left,transparent,#000 46%)}
.c-logos{position:absolute;left:var(--gx);bottom:clamp(20px,4svh,44px);z-index:3;display:flex;align-items:center;gap:clamp(18px,2.6vw,44px)}
.c-logos small{font-size:12px;letter-spacing:.3em;color:var(--muted)}
.c-logos ul{list-style:none;display:flex;align-items:center;gap:clamp(18px,2.6vw,44px)}
.c-logos img{height:28px;width:auto;max-width:none}.c-logos img.tall{height:40px}
.c-hint{position:absolute;left:var(--gx);bottom:clamp(76px,12svh,110px);z-index:3;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--muted)}
.c-p2{background:var(--night);color:var(--c-paper);display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(24px,4vw,80px);padding:0 clamp(28px,6vw,120px)}
.c-p2 .num{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,84px);color:var(--terra);padding-top:9svh;line-height:1}
.c-p2 h2{font-family:var(--serif);font-weight:300;font-size:min(8.1svh,8vw);line-height:1.28;height:100%;padding-top:9svh;white-space:nowrap;color:var(--c-paper)}
.c-p2 p{height:100%;padding:16svh 0 10svh;font-size:clamp(15px,1.3vw,19px);line-height:2.2;letter-spacing:.12em;opacity:.86}
.c-p2 img{position:absolute;left:0;top:0;height:100%;width:48%;max-width:none;object-fit:cover;object-position:46% 50%;filter:invert(1) grayscale(1);mix-blend-mode:screen;opacity:.75;
  -webkit-mask-image:linear-gradient(to left,transparent,#000 60%);mask-image:linear-gradient(to left,transparent,#000 60%)}
.c-rule{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:5;background:rgba(36,27,24,.12)}
.c-rule i{display:block;height:100%;background:var(--terra);width:0;margin-left:auto}
@media(max-width:860px){
  .c-scroll{height:auto;--big:min(9.2svh,16.5vw)}.c-pin{position:static;height:auto;overflow:visible}
  .c-track{position:static;flex-direction:column;width:auto;transform:none!important}
  .c-panel{width:100%;height:100svh;min-height:600px}
  .c-p1{padding:0 14px;gap:12px}.c-side p.note{font-size:14px;max-height:58svh}
  .c-wash{width:100%;opacity:.75}
  .c-logos{left:14px;right:14px;bottom:16px;flex-direction:column;align-items:flex-start;gap:10px}.c-logos ul{gap:16px}.c-logos img{height:18px}.c-logos img.tall{height:27px}
  .c-hint,.c-rule{display:none}
  .c-p2{padding:0 16px;gap:14px}.c-p2 p{display:none}.c-p2 h2{font-size:min(8.2svh,15vw)}.c-p2 img{width:100%;opacity:.4}
}
@media (prefers-reduced-motion:reduce){.js .c-col>span{animation:none}}

/* ════════ Round 2: inner sections + English first screens ════════ */
.c-bleed{margin-inline:calc(-1 * var(--gx))}

/* dark scope: flip the tokens, every child follows */
.x-evi,.c-night{--ink:#F6F1E8;--text:#F6F1E8;--muted:rgba(246,241,232,.62);--faint:rgba(246,241,232,.4);--hairline:rgba(246,241,232,.22);
  --paper:#17110F;--paper-lift:#241b18;--paper-deep:#241b18;--terra-deep:#E58163;background:#17110F;color:#F6F1E8}

/* ── services: "three things" as three full-height cells ── */
.x-stance-sec{padding-top:0}
.x-stance-sec .x-stance:not(.is-plain){display:block;border-top:0;padding-top:clamp(64px,9vw,150px)}
.x-stance h2{font-weight:300;letter-spacing:0;font-size:clamp(34px,5.2vw,108px);line-height:1.12}
.x-stance-sec .x-stance:not(.is-plain) h2{font-size:clamp(40px,7.4vw,152px);margin-bottom:clamp(40px,6vw,96px)}
.c-cells{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));margin-inline:calc(-1 * var(--gx));border-top:1px solid var(--ink)}
.c-cells > div{display:flex!important;flex-direction:column;justify-content:space-between;gap:clamp(36px,6vw,90px);min-height:min(74vh,760px);
  padding:clamp(24px,3vw,48px) var(--gx) clamp(32px,4vw,64px)!important;border-bottom:0!important;border-right:1px solid rgba(36,27,24,.22)}
.c-cells > div:nth-child(2){background:var(--terra);--text:#17110F;--ink:#17110F;--terra-deep:#17110F;color:#17110F}
.c-cells > div:nth-child(3){--ink:#F6F1E8;--text:#F6F1E8;--terra-deep:#E58163;--hairline:rgba(246,241,232,.22);background:#17110F;color:#F6F1E8;border-right:0}
.c-cells dt{font-family:var(--serif);font-weight:300;font-size:clamp(64px,9.4vw,190px);line-height:1.02;letter-spacing:0!important;color:var(--ink);padding:0;text-transform:none!important}
html[lang="zh-Hant"] .c-cells dt{writing-mode:vertical-rl;text-orientation:upright}
html[lang="en"] .c-cells dt{font-size:clamp(40px,5.2vw,104px)}
.c-cells dd{font-size:clamp(16px,1.2vw,19px);line-height:1.85}
.c-cells dd > b,.c-cells dd li > b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.1vw,36px);line-height:1.3;margin-bottom:.6em;color:var(--ink)}
.c-cells li{padding-left:0}.c-cells li::before{display:none}
.x-stance-eco{margin-top:clamp(64px,9vw,150px)}

/* ── services: the two offers ── */
.x-offerspec{grid-template-columns:1fr;border-top:0;padding-top:0;gap:clamp(36px,5vw,80px)}
.x-offerspec-pitch{position:static;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px)}
.x-offerspec-pitch > *{grid-column:1 / span 6}
.x-offerspec-pitch .x-kicker{grid-column:1 / -1;font-size:clamp(15px,1.2vw,19px)!important;padding-top:20px;border-top:var(--rule) solid var(--ink)}
html .x-offerspec-pitch .x-offer-title,html:not([lang="en"]) .x-offerspec-pitch .x-offer-title{grid-column:1 / -1;font-size:clamp(36px,6.2vw,128px);font-weight:300;line-height:1.1;letter-spacing:0;margin:clamp(20px,2.6vw,40px) 0 clamp(32px,4.4vw,72px)}
html[lang="en"] .x-offerspec-pitch .x-offer-title{font-size:clamp(34px,5vw,104px)}
.x-offerspec-pitch .x-p{font-size:clamp(18px,1.5vw,24px);line-height:1.8}
.x-offerspec-pitch .x-specs{grid-column:7 / -1;grid-row:3 / span 2;margin-top:0;align-self:start}
.x-specs .num{font-weight:300;font-size:clamp(64px,8vw,168px);line-height:.95}
.x-specs .num small{font-size:.16em}
.x-offerspec > .x-facts > div{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(20px,2.4vw,40px);padding-block:clamp(28px,3vw,48px)}
.x-offerspec > .x-facts dt{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.8vw,52px);letter-spacing:0!important;color:var(--terra-deep);line-height:1.1;padding:0;text-transform:none!important}
.x-offerspec > .x-facts dd{font-size:clamp(17px,1.3vw,20px);max-width:44em}
.x-offerspec > .x-facts li > b{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.7vw,28px);line-height:1.4}

/* result band: dark, the figure fills the width */
.x-evi{margin-inline:calc(-1 * var(--gx));padding:clamp(56px,7vw,120px) var(--gx);margin-top:clamp(56px,7vw,120px);border:0;border-radius:0;display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,80px)}
.x-evi-h{font-family:var(--serif);font-weight:300;font-size:clamp(48px,9vw,190px);line-height:1;letter-spacing:-.01em;color:#F6F1E8;margin:clamp(14px,2vw,28px) 0}
.x-evi-h i{color:var(--terra);font-style:normal;margin-inline:.14em}
.x-evi-cap{font-size:clamp(17px,1.4vw,22px);max-width:34em}
.x-evi .x-evi-flows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}

/* "what stays": numbered cells */
.x-stays{margin-top:clamp(64px,8vw,130px)}
.x-stays-h{font-size:clamp(15px,1.2vw,19px)}
.x-stays .x-steps,.x-stays.is-3 .x-steps{counter-reset:c;gap:0;margin-inline:calc(-1 * var(--gx));grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--ink)}
.x-stays.is-3 .x-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.x-stays .x-steps li{counter-increment:c;border-top:0;border-right:1px solid rgba(36,27,24,.22);padding:clamp(24px,2.6vw,44px) clamp(20px,2.4vw,44px) clamp(40px,5vw,80px);min-height:min(56vh,560px)}
.x-stays .x-steps li:first-child{padding-left:var(--gx)}
.x-stays .x-steps li:last-child{border-right:0;background:var(--terra);--text:#17110F;--ink:#17110F;color:#17110F}
.x-stays .x-steps li::before{content:counter(c,trad-chinese-formal);display:block;font-family:var(--serif);font-weight:300;font-size:clamp(56px,7vw,136px);line-height:1;color:var(--terra);margin-bottom:clamp(28px,5vw,80px)}
.x-stays .x-steps li:last-child::before{color:#17110F}
html[lang="en"] .x-stays .x-steps li::before{content:counter(c,decimal-leading-zero)}
.x-stays .x-steps h3{font-weight:300;font-size:clamp(22px,2.1vw,38px);letter-spacing:0;line-height:1.3}
.x-stays .x-steps p{margin-top:16px}
.x-stays + .x-offerspec{margin-top:clamp(96px,12vw,200px)}

/* guarantees: same three cells */
.x-offerspec:has(.x-cred) .x-offerspec-pitch .x-cred{grid-column:7 / -1;grid-row:2}
.x-offerspec:has(.x-cred) .x-offerspec-pitch .x-offer-title{grid-column:1 / span 6;margin-bottom:0}

/* ── about ── */
.x-essay{grid-template-columns:1fr}
.x-essay .x-toc{display:none}
.x-prose{max-width:none;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,5vw,100px);counter-reset:s}
/* the picture band on about / approach: a cut from the home painting, where the rivers meet. No frame; the edges fade into the paper.
   (2026-10-05: replaces the boxed line drawing of streams, which read as a pasted-in diagram next to the home painting.) */
.x-prose::before{content:"";grid-column:1 / -1;height:min(52vh,560px);margin:0 0 clamp(56px,7vw,120px);
  background:url(/img/v3/confluence-2560.webp) 30% 64%/135% auto no-repeat;mix-blend-mode:multiply;opacity:.95;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent),linear-gradient(to right,transparent,#000 12%,#000 82%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent),linear-gradient(to right,transparent,#000 12%,#000 82%,transparent);mask-composite:intersect}
@media(max-width:860px){.x-prose::before{background-size:230% auto;background-position:34% 62%;height:min(40vh,320px)}}
.x-section:has(> .x-essay){padding-top:0}
.x-prose > h2{counter-increment:s;grid-column:1;position:sticky;top:calc(var(--nav-h) + 24px);align-self:start;margin:0 0 clamp(72px,9vw,150px)!important;padding-top:20px;border-top:var(--rule) solid var(--ink);
  font-weight:300;font-size:clamp(32px,4.4vw,92px);line-height:1.14;letter-spacing:0}
.x-prose > h2::before{content:counter(s,trad-chinese-formal);display:block;font-size:.42em;color:var(--terra);margin-bottom:.5em}
html[lang="en"] .x-prose > h2::before{content:counter(s,decimal-leading-zero)}
.x-prose > div{grid-column:2;padding-top:20px;border-top:1px solid var(--hairline);margin-bottom:clamp(72px,9vw,150px);font-size:clamp(17px,1.3vw,20px)}
.x-prose > div > p:first-of-type{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.2vw,38px);line-height:1.6;color:var(--ink);margin-bottom:1em}
.x-prose > div > p{max-width:36em}
.x-prose > div > p:first-of-type{max-width:none}
.c-night{padding-block:clamp(72px,9vw,150px)}
.c-night .x-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-inline:calc(-1 * var(--gx));border-top:1px solid var(--hairline)}
.c-night .x-facts > div{display:block;padding:clamp(22px,2.4vw,40px) clamp(20px,2.4vw,44px) clamp(36px,4vw,64px)!important;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.c-night .x-facts > div:first-child{padding-left:var(--gx)!important}
.c-night .x-facts dd{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2vw,34px);line-height:1.35;margin-top:14px;overflow-wrap:anywhere}

/* ── English first screens ── */
@media(min-width:861px){
  html[lang="en"] .x-phead{padding:0;height:100svh;min-height:620px}
  html[lang="en"] .x-phead .x-wrap{height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:clamp(20px,2.4vw,40px);padding:calc(var(--nav-h) + 3svh) 0 clamp(28px,5svh,60px)}
  html[lang="en"] .x-phead .x-eyebrow{grid-column:1 / -1;grid-row:1}
  html[lang="en"] .x-ptitle{grid-column:1 / -1;grid-row:3;font-size:clamp(44px,7.6vw,168px);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
  html[lang="en"] .x-ptitle .l{display:inline}html[lang="en"] .x-ptitle .l > span{display:inline;white-space:normal;transform:none!important}
  html[lang="en"] .x-lede{grid-column:8 / -1;grid-row:2;align-self:end;margin:0 0 clamp(24px,4svh,48px);max-width:none;border-top:1px solid rgba(36,27,24,.3)}
  html[lang="en"] .x-phead::before{width:100%;background-position:30% 40%;opacity:.8;-webkit-mask-image:linear-gradient(to top,transparent 8%,#000 60%);mask-image:linear-gradient(to top,transparent 8%,#000 60%)}
}
html[lang="en"] .c-p1{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto auto;column-gap:clamp(20px,2.4vw,40px);padding:calc(var(--nav-h) + 3svh) var(--gx) clamp(20px,4svh,44px)}
html[lang="en"] .c-p1 h1{grid-column:1 / -1;grid-row:2;height:auto;padding:0;white-space:normal;font-size:clamp(44px,7.9vw,172px);line-height:.98;letter-spacing:-.02em;text-wrap:balance;max-width:11.5em}
html[lang="en"] .c-side{grid-column:8 / -1;grid-row:1;align-self:end;height:auto;padding:0 0 clamp(20px,4svh,48px)}
html[lang="en"] .c-side .x-eyebrow{margin:0 0 14px}
html[lang="en"] .c-side p.note{max-height:none;letter-spacing:0;line-height:1.7;padding-top:14px;border-top:1px solid rgba(36,27,24,.3)}
html[lang="en"] .c-wash{left:0;top:0;bottom:auto;width:100%;height:78%;object-position:30% 34%;-webkit-mask-image:linear-gradient(to top,transparent,#000 46%);mask-image:linear-gradient(to top,transparent,#000 46%)}
html[lang="en"] .c-logos{position:relative;left:auto;bottom:auto;grid-column:1 / -1;grid-row:3;margin-top:clamp(18px,3svh,36px);padding-top:16px;border-top:1px solid rgba(36,27,24,.3)}
html[lang="en"] .c-hint{left:auto;right:var(--gx);bottom:clamp(20px,4svh,44px)}
html[lang="en"] .c-track{flex-direction:row;right:auto;left:0}
html[lang="en"] .c-p2{flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:clamp(16px,2.4vw,32px);padding:0 var(--gx) clamp(40px,7svh,90px)}
html[lang="en"] .c-p2 .num{padding:0;font-size:clamp(28px,3vw,52px)}
html[lang="en"] .c-p2 h2{height:auto;padding:0;white-space:normal;font-size:clamp(40px,6.6vw,140px);line-height:1;letter-spacing:-.02em;max-width:12em;text-wrap:balance;position:relative;z-index:2}
html[lang="en"] .c-p2 p{height:auto;padding:0;letter-spacing:0;line-height:1.7;max-width:34em;position:relative;z-index:2}
html[lang="en"] .c-p2 img{left:auto;right:0;width:62%;-webkit-mask-image:linear-gradient(to right,transparent,#000 60%);mask-image:linear-gradient(to right,transparent,#000 60%)}
html[lang="en"] .c-rule i{margin-left:0}

@media(max-width:860px){
  .c-cells,.c-night .x-facts,.x-stays .x-steps,.x-stays.is-3 .x-steps,.x-evi .x-evi-flows{grid-template-columns:1fr}
  .c-cells > div{min-height:0;border-right:0;gap:28px}
  html[lang="zh-Hant"] .c-cells dt{writing-mode:horizontal-tb}
  .x-offerspec-pitch > *,.x-offerspec-pitch .x-specs,.x-offerspec:has(.x-cred) .x-offerspec-pitch .x-cred,.x-offerspec:has(.x-cred) .x-offerspec-pitch .x-offer-title{grid-column:1 / -1;grid-row:auto}
  .x-offerspec-pitch .x-specs{margin-top:28px}
  .x-offerspec > .x-facts > div{grid-template-columns:1fr}
  .x-stays .x-steps li{min-height:0;border-right:0;border-bottom:1px solid rgba(36,27,24,.22);padding-left:var(--gx)}
  .x-prose{grid-template-columns:1fr}.x-prose > h2{position:static;margin-bottom:24px!important}.x-prose > div{grid-column:1;border-top:0;padding-top:0}
  .x-prose::before{height:42vh}
  .c-night .x-facts > div{padding-left:var(--gx)!important;border-right:0}
  html[lang="en"] .c-p1{display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 12px) 16px 20px;gap:18px}
  html[lang="en"] .c-p1 h1{order:1;font-size:13.2vw}
  html[lang="en"] .c-side{order:2;padding:0}html[lang="en"] .c-logos{order:3;margin-top:0}
  html[lang="en"] .c-p2{padding:0 16px 40px}html[lang="en"] .c-p2 p{display:block}
  html[lang="en"] .c-p2 h2{font-size:11.5vw}
  html[lang="en"] .x-ptitle{font-size:12vw;line-height:1}
}

/* round 2 fixes */
.x-offerspec > .x-facts.c-cells > div{display:flex}
.x-offerspec > .x-facts.c-cells dt{font-size:clamp(64px,9.4vw,190px);color:var(--ink);line-height:1.02}
html[lang="en"] .x-offerspec > .x-facts.c-cells dt{font-size:clamp(40px,5.2vw,104px)}
html[lang="en"] .x-ptitle .l::after{content:" "}
.x-prose > h2{font-size:clamp(30px,3.7vw,78px);text-wrap:balance}
@media(max-width:860px){
  html[lang="en"] .c-track{flex-direction:column;left:auto}
  html[lang="zh-Hant"] .x-offerspec > .x-facts.c-cells dt{font-size:64px}
}
.x-prose > h2{position:static}
html .x-evi .x-evi-h{font-size:clamp(48px,9vw,190px)}
html[lang="en"] .x-evi .x-evi-h{font-size:clamp(40px,6.6vw,140px)}

/* ════════ Round 3: pacing (less dead air) ════════ */

/* photographs stay in colour (author, 2026-09-30; confirmed again 2026-10-04) */

/* pacing: sections sit closer, content fills its block */
.x-sec-block{padding-block:clamp(64px,7vw,112px)}
.x-section{padding-block:clamp(60px,6.6vw,104px)}
.x-section > .x-wrap > .x-sec,.x-section .x-sec-head{margin-bottom:clamp(28px,3.4vw,52px)}
.x-stance-sec .x-stance:not(.is-plain){padding-top:clamp(48px,6vw,96px)}
.x-stance-sec .x-stance:not(.is-plain) h2{margin-bottom:clamp(28px,4vw,60px)}
.x-stance-eco{margin-top:clamp(48px,6vw,96px)}
.c-cells > div{min-height:min(62vh,640px);gap:clamp(28px,4vw,60px)}
.x-stays{margin-top:clamp(48px,6vw,96px)}
.x-stays .x-steps li{min-height:0;padding-bottom:clamp(32px,4vw,60px)}
.x-stays .x-steps li::before{margin-bottom:clamp(20px,3vw,44px)}
.x-stays + .x-offerspec{margin-top:clamp(72px,9vw,140px)}
.x-evi{margin-top:clamp(48px,6vw,96px);padding-block:clamp(48px,6vw,96px)}
.c-night{padding-block:clamp(56px,7vw,112px)}

/* home: the hand scroll moves on sooner; the dark panel is filled by the painting */
@media(min-width:861px){.c-scroll{height:230vh}}   /* wide screens only: on phones the panels stack and set their own height */
.c-p2 img{width:66%;opacity:.95;-webkit-mask-image:linear-gradient(to left,transparent,#000 42%);mask-image:linear-gradient(to left,transparent,#000 42%)}
html[lang="en"] .c-p2 img{width:74%;-webkit-mask-image:linear-gradient(to right,transparent,#000 46%);mask-image:linear-gradient(to right,transparent,#000 46%)}
/* home: fast/slow block, diagram carries the right half */
.x-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px)}
.x-split .x-diagram{max-width:none}
/* home: cases block opens straight into the numbers */
.x-cases .x-sec-head{margin-bottom:clamp(20px,2.4vw,36px)}
.x-case-stat{margin-top:clamp(12px,1.6vw,24px)}

/* closing block: title left, action on the same row at the right */
.x-cta,.x-close{padding-block:clamp(64px,7.5vw,120px)}
@media(min-width:861px){
  .x-cta-grid,.x-close-inner{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:end;gap:clamp(24px,4vw,64px)}
  .x-cta-copy{display:contents}
  .x-cta-copy > .x-cta-title{grid-column:1;grid-row:1;margin-bottom:0}
  .x-cta-copy > .x-p{grid-column:1;grid-row:2;margin-top:clamp(18px,2vw,28px)}
  .x-cta-copy > .x-cta-actions,.x-close-inner > .x-cta-actions{grid-column:2;grid-row:1 / span 2;align-self:end;justify-content:flex-end;margin-top:0;flex-direction:column;align-items:flex-end;gap:16px}
}

/* services: pitch without figures uses the right half for its text */
@media(min-width:861px){
  .x-offerspec-pitch:not(:has(.x-specs)):not(:has(.x-cred)) > .x-p{grid-column:1 / span 7;font-size:clamp(19px,1.7vw,28px);line-height:1.7}
  .x-offerspec-pitch:not(:has(.x-specs)):not(:has(.x-cred)) > .x-flow{grid-column:9 / -1;grid-row:3;align-self:start;margin-top:.4em}
  .x-offerspec:has(.x-cred){gap:clamp(28px,3.4vw,52px)}
  .x-offerspec:has(.x-cred) .x-offerspec-pitch{align-items:end}
}

/* about: each chapter keeps its title beside the text while it is read */
.x-prose:has(.c-chap){display:block}
.x-prose:has(.c-chap)::before{display:block;margin-bottom:clamp(48px,6vw,96px)}
.c-chap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,5vw,100px);margin-bottom:clamp(56px,7vw,112px)}
.c-chap:last-child{margin-bottom:0}
.c-chap > h2{position:sticky!important;top:calc(var(--nav-h) + 24px);margin-bottom:0!important}
.c-chap > div{margin-bottom:0}
@media(max-width:860px){.c-chap{grid-template-columns:1fr}.c-chap > h2{position:static!important;margin-bottom:20px!important}}

/* ════════ Round 4: only display titles run vertically; reading text is horizontal ════════ */
html[lang="zh-Hant"] .c-side{writing-mode:horizontal-tb;height:auto;align-self:flex-start;flex:0 1 min(30vw,440px);min-width:0;padding:calc(8svh + .5em) 0 0}
html[lang="zh-Hant"] .c-side .x-eyebrow{margin:0 0 16px;letter-spacing:.3em}
html[lang="zh-Hant"] .c-side p.note{max-height:none;letter-spacing:.02em;line-height:1.95;padding-top:16px;border-top:1px solid rgba(36,27,24,.3);font-size:clamp(16px,1.3vw,20px)}
html[lang="zh-Hant"] .c-p2 p{writing-mode:horizontal-tb;height:auto;align-self:flex-end;flex:0 1 min(28vw,420px);padding:0 0 12svh;letter-spacing:.02em;line-height:1.95;font-size:clamp(16px,1.3vw,20px);position:relative;z-index:2}
@media(min-width:861px){
  html[lang="zh-Hant"] .x-phead .x-eyebrow{writing-mode:horizontal-tb;position:absolute;left:0;top:calc(var(--nav-h) + 2svh);padding:0;letter-spacing:.4em}
  html[lang="zh-Hant"] .x-lede{writing-mode:horizontal-tb;align-self:flex-end;flex:0 1 min(34vw,520px);max-height:none;margin:0 0 clamp(40px,9svh,96px);padding:18px 0 0;border-right:0;border-top:1px solid rgba(36,27,24,.3);letter-spacing:.02em;line-height:1.95;font-size:clamp(16px,1.3vw,20px)}
}
@media(max-width:860px){
  html[lang="zh-Hant"] .c-side{flex:1 1 0;padding-top:calc(8svh + .3em)}
  html[lang="zh-Hant"] .c-side p.note{font-size:14px;line-height:1.85}
  html[lang="zh-Hant"] .c-side .x-eyebrow{font-size:12px;letter-spacing:.16em}
  html[lang="zh-Hant"] .c-p2 p{display:block;flex:1 1 0;padding-bottom:8svh;font-size:14px}
  html[lang="zh-Hant"] .x-phead .x-eyebrow{writing-mode:horizontal-tb;letter-spacing:.4em}
}

/* ════════ Round 5: English first screens — the painting never sits behind text ════════ */
html[lang="en"] .c-wash{left:0;top:0;bottom:auto;width:64%;height:56%;object-position:24% 30%;
  -webkit-mask-image:linear-gradient(to top,transparent 2%,#000 58%),linear-gradient(to left,transparent 4%,#000 46%);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(to top,transparent 2%,#000 58%),linear-gradient(to left,transparent 4%,#000 46%);mask-composite:intersect}
@media(min-width:861px){
  html[lang="en"] .x-phead::before{left:0;top:0;bottom:auto;width:62%;height:54%;background-position:24% 30%;opacity:.9;
    -webkit-mask-image:linear-gradient(to top,transparent 2%,#000 58%),linear-gradient(to left,transparent 4%,#000 46%);-webkit-mask-composite:source-in;
            mask-image:linear-gradient(to top,transparent 2%,#000 58%),linear-gradient(to left,transparent 4%,#000 46%);mask-composite:intersect}
  html[lang="en"] .x-ptitle{font-size:clamp(44px,7vw,152px)}
}
@media(max-width:860px){
  html[lang="en"] .c-wash{width:100%;height:30%;opacity:.85;-webkit-mask-image:linear-gradient(to top,transparent 4%,#000 70%);mask-image:linear-gradient(to top,transparent 4%,#000 70%);-webkit-mask-composite:source-over;mask-composite:add}
  html[lang="en"] .x-phead::before{width:100%;height:34%;top:0;bottom:auto;opacity:.6;-webkit-mask-image:linear-gradient(to top,transparent 4%,#000 70%);mask-image:linear-gradient(to top,transparent 4%,#000 70%)}
}

/* ════════ Round 6: phones ════════ */
@media(max-width:860px){
  /* fast / slow: one column again (round 3 set two columns for wide screens and never undid it here) */
  .x-split{grid-template-columns:1fr;gap:28px}
  .x-split .x-diagram{max-width:100%;justify-self:stretch}
  /* closing title fits its eight characters on one line */
  .x-cta-title,.x-close-line{font-size:min(9vw,40px);line-height:1.2}
  /* first screen: the panel ends at the bottom of the window even with a strip above the site; text sits on clear paper, the painting below it */
  .c-panel{height:calc(100svh - var(--vt,0px));min-height:560px}
  html[lang="zh-Hant"] .c-wash{top:auto;bottom:0;width:100%;height:58%;opacity:.9;object-position:22% 50%;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 34%);mask-image:linear-gradient(to bottom,transparent,#000 34%)}
  html[lang="zh-Hant"] .c-p1 h1{text-shadow:0 0 14px var(--c-paper),0 0 6px var(--c-paper)}
  .c-logos{background:linear-gradient(to top,var(--c-paper) 62%,transparent);padding-top:22px;left:0;right:0;bottom:0;padding-inline:14px;padding-bottom:12px}
  .c-p2 img{opacity:.5}
  /* inner page heads: same idea, painting behind the title only */
  html[lang="zh-Hant"] .x-phead::before{top:0;bottom:auto;height:62%;opacity:.4;-webkit-mask-image:linear-gradient(to top,transparent,#000 45%);mask-image:linear-gradient(to top,transparent,#000 45%)}
  .x-phead .x-lede{position:relative;background:var(--c-paper)}
}

/* ════════ Round 7: typefaces (author, 2026-10-04) ════════
   Chinese pages: headings in 匯文明朝體 (old metal-type Ming, one weight), reading text in 源雲明體 (400 / 500 / 600).
   Both are subsets holding only the characters this site uses — run tools/subset-fonts.sh after any copy change.
   English pages keep their current faces. The heading file is 匯文明朝's drawings grafted into 源雲明體's font file (tools/graft-heading-font.py): Safari's engine
   misplaces the original by half a character in vertical text. Punctuation comes from 源雲明體 and has proper vertical forms. */
@font-face{font-family:'cp-huiwen';src:url(/v/fonts/huiwen.woff2?v=3) format('woff2');font-display:swap}
@font-face{font-family:'cp-genwan';src:url(/v/fonts/genwan-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'cp-genwan';src:url(/v/fonts/genwan-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'cp-genwan';src:url(/v/fonts/genwan-600.woff2) format('woff2');font-weight:600 900;font-display:swap}
html[lang="zh-Hant"]{--serif:'cp-huiwen','Noto Serif TC',serif;--sans:'cp-genwan','Noto Serif TC','Songti TC',serif;font-synthesis:none}
html[lang="zh-Hant"] .c-scroll{--big:min(8.6svh,8.6vw)}
@media(max-width:860px){html[lang="zh-Hant"] .c-scroll{--big:min(8.4svh,15.5vw)}}
/* the heavy face needs less size and more air than the light one it replaces */
html[lang="zh-Hant"] :is(.x-h2,.x-thesis,.x-cta-title,.x-close-line){letter-spacing:.01em}
html[lang="zh-Hant"] .x-case-stat{font-family:'cp-genwan','Noto Serif TC',serif;font-weight:400}   /* big figures: the reading face draws numerals cleanly */

/* ── inner pages, first screen (2026-10-05): content starts in the first screen instead of under a full-screen painting.
   Markup: .x-phead.p2 > .p2-wash + .x-wrap > [.x-eyebrow] + h1.x-ptitle + .p2-body > .x-lede + [.p2-side] + the page's first block.
   Wide screens: the vertical title stays on the right and follows the scroll; the painting is a pale band pinned to the lower left.
   Phones: the lede (and .p2-side, if any) sit beside the title; everything else follows below at full width.
   Chinese pages only; the home page keeps its own opening. ── */
@media(min-width:861px){
  html[lang="zh-Hant"] .x-phead.p2{height:auto;min-height:100svh;overflow:clip}
  html[lang="zh-Hant"] .x-phead.p2 .x-wrap{height:auto;min-height:100svh;padding-bottom:clamp(60px,10svh,140px);margin-top:-60svh}   /* starts at the top, over the pinned wash */
  html[lang="zh-Hant"] .x-phead.p2 .x-ptitle,html[lang="zh-Hant"] .x-phead.p2 .x-eyebrow{position:sticky;top:calc(var(--nav-h) + 2svh)}
  .x-phead.p2 .p2-body{flex:1;min-width:0;padding-top:1.2svh}
  html[lang="zh-Hant"] .x-phead.p2 .x-lede{writing-mode:horizontal-tb;position:static;border:0;padding:0;max-height:none;max-width:30em;margin:0 0 clamp(32px,6svh,72px);
    font-size:clamp(17px,1.35vw,23px);line-height:2;letter-spacing:.04em;background:none}
  .x-phead.p2::before{display:none}
  .p2-wash{position:sticky;top:40svh;height:60svh;width:74%;z-index:0;pointer-events:none;
    background:url(/img/v3/confluence-1400.webp) 22% 78%/cover no-repeat;mix-blend-mode:multiply;opacity:.26;
    -webkit-mask-image:linear-gradient(to top,#000 30%,transparent),linear-gradient(to left,transparent,#000 40%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(to top,#000 30%,transparent),linear-gradient(to left,transparent,#000 40%);mask-composite:intersect}
}
@media(max-width:860px){
  .p2-wash{display:none}
  html[lang="zh-Hant"] .x-phead.p2 .x-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:18px;align-items:start}
  .x-phead.p2 .p2-body{display:contents}
  html[lang="zh-Hant"] .x-phead.p2 .x-ptitle{grid-column:2;grid-row:1 / span 2;height:auto;margin:0;line-height:1.2}      /* size: c.js fits it to 58% of the screen */
  html[lang="zh-Hant"] .x-phead.p2 .x-eyebrow{position:static;grid-column:1;grid-row:1;writing-mode:horizontal-tb;align-self:start;margin:0}
  html[lang="zh-Hant"] .x-phead.p2 .x-lede{grid-column:1;grid-row:1;writing-mode:horizontal-tb;position:static;margin:.3em 0 22px;padding:0;border:0;max-height:none;background:none;
    font-size:15.5px;line-height:1.9;letter-spacing:.03em}
  html[lang="zh-Hant"] .x-phead.p2 .x-eyebrow + .x-ptitle + .p2-body > .x-lede{margin-top:2.4em}       /* room for the eyebrow above it */
  .x-phead.p2 .p2-side{grid-column:1;grid-row:2}
  .x-phead.p2 .p2-body > :not(.x-lede):not(.p2-side){grid-column:1 / -1}
  .x-phead.p2 .p2-body > :not(.x-lede):not(.p2-side):first-of-type,.x-phead.p2 .p2-side + *{margin-top:34px}
  html[lang="zh-Hant"] .x-phead.p2::before{opacity:.22;height:min(70svh,560px)}      /* the head is now as tall as its content: keep the painting to the first screen */
}
/* English .p2 heads: horizontal title at the top, lede under it, then the first block. Same pale pinned wash. */
html[lang="en"] .x-phead.p2{height:auto;min-height:0;padding:0;overflow:clip}
html[lang="en"] .x-phead.p2 .x-wrap{display:block;height:auto;padding:calc(var(--nav-h) + 5svh) 0 clamp(60px,10svh,140px)}
html[lang="en"] .x-phead.p2 .x-ptitle{font-size:clamp(32px,4.4vw,80px);line-height:1.08;letter-spacing:-.015em;max-width:17em;margin:0 0 .45em;text-wrap:balance}
html[lang="en"] .x-phead.p2 .x-lede{position:static;max-width:40em;margin:0 0 clamp(30px,6svh,68px);padding:0;border:0;background:none}
html[lang="en"] .x-phead.p2 .p2-body{display:block;padding:0}
html[lang="en"] .x-phead.p2 .x-eyebrow{position:static;display:block;margin:0 0 1.2em}
html[lang="en"] .p2-entry small{letter-spacing:.16em}
@media(min-width:861px){html[lang="en"] .x-phead.p2 .x-wrap{margin-top:-60svh;min-height:100svh}}
/* about / approach: the first chapter starts in the first screen; the picture band moves down to sit after it */
.x-phead.p2 .x-prose:has(.c-chap){display:flex;flex-direction:column}
.x-phead.p2 .x-prose > :first-child{order:-1}
.x-phead.p2 .x-prose:has(.c-chap)::before{margin-inline:0;flex:none}
/* services: the two ways to work with us, as two doors in the first screen */
.p2-entry{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink)}
.p2-entry a{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 20px;padding:clamp(18px,2vw,30px) clamp(16px,2vw,32px) clamp(20px,2.2vw,34px) 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline)}
.p2-entry a + a{padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--hairline)}
.p2-entry small{grid-column:1 / -1;font-size:var(--site-t-label);letter-spacing:.3em;color:var(--terra-deep);font-weight:500}
.p2-entry b{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.8vw,32px);line-height:1.45}
.p2-entry span{grid-column:1;color:var(--text);font-size:clamp(15px,1.05vw,18px);line-height:1.8}
.p2-entry i{grid-column:2;grid-row:2 / span 2;font-style:normal;font-size:22px;transition:transform .25s}
.p2-entry a:hover i{transform:translateY(4px)}.p2-entry a:hover b{color:var(--terra-deep)}
@media(max-width:860px){.p2-entry{grid-template-columns:1fr}.p2-entry a + a{padding-left:0;border-left:0}}

/* home, adoption-program row: the same painting, closer in on the meeting of the rivers; no tile behind it */
/* The reveal (data-rise) sits on .x-photo itself, not on its parent. While a PARENT fades or moves it is its own compositing group,
   so the multiply below has nothing to blend with until the animation ends: the picture showed plain, then changed colour a second later. */
.x-photo.is-wash{background:none;isolation:auto;mix-blend-mode:multiply;       /* the masked box as a whole multiplies into the section's paper colour, so no tile shows */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 58%,transparent 92%),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 58%,transparent 92%),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.x-photo.is-wash img{position:absolute;left:-22%;top:-52%;width:165%;height:165%;max-width:none;object-fit:cover;filter:grayscale(1) brightness(1.12) contrast(1.1)}
/* grey ink only: the painting's own warm washes, multiplied into this warm section, read as a yellow cast (author, 2026-10-05).
   brightness lifts its paper to white so the empty parts stay exactly the section colour. The red tree is put back by a second copy
   of the picture, masked down to the tree alone. */
.x-photo.is-wash img.tree{filter:brightness(1.05);-webkit-mask-image:radial-gradient(circle at 48.9% 50.2%,#000 0,#000 1.1%,transparent 2.1%);mask-image:radial-gradient(circle at 48.9% 50.2%,#000 0,#000 1.1%,transparent 2.1%)}

/* home, dark panel: on a phone the text sits in a narrow column beside the vertical title, so only its last sentence (what we do) is shown;
   the lead-in about adoptions that are too big or too small is for wide screens. */
@media(max-width:860px){.c-p2 .c-p2-lead{display:none}}