:root{--font-sans:'Archivo','Noto Serif SC',ui-sans-serif,system-ui,sans-serif;--font-serif:'Cormorant Garamond','Noto Serif SC',serif;--font-noto:'Noto Serif SC','Cormorant Garamond',serif}
.iw-collapsed{display:none!important}
.iw-chip{font-family:var(--font-sans);font-size:12.5px;letter-spacing:0.06em;cursor:pointer;padding:11px 16px;border:1px solid #DED8CB;background:#FFFDF7;color:#4C574F;transition:all 200ms ease}
.iw-chip-on{border-color:#16211C;background:#16211C;color:#FFFDF7}
.js [data-reveal]{opacity:0;transform:translateY(18px)}
.js [data-reveal].rv-on{opacity:1;transform:none}

/* Header nav. Above 640px display:contents dissolves the panel wrapper, so the
   desktop header keeps its original logo / nav / actions flex row untouched.
   Below it the panel collapses behind the MENU button, which turns a header
   that wrapped onto four rows on a 375px screen into one. */
.iw-navbtn{display:none}
@media (min-width:860px){.iw-navpanel{display:contents}}
@media (max-width:859.98px){
  .iw-navbtn{display:inline-flex;align-items:center;gap:9px;margin-left:auto;padding:10px 14px;border:1px solid #DED8CB;background:#FFFDF7;color:#16211C;font-family:var(--font-sans);font-size:12px;letter-spacing:0.13em;line-height:1;cursor:pointer}
  .iw-navbtn::before{content:"";flex:none;width:14px;height:1px;background:#A8811A;box-shadow:0 -4px 0 #A8811A,0 4px 0 #A8811A}
  .iw-nav-open .iw-navbtn{background:#16211C;border-color:#16211C;color:#FFFDF7}
  .iw-nav-open .iw-navbtn::before{background:#E4CE85;box-shadow:none}
  .iw-navpanel{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:15px;border-top:1px solid #E4DDD0}
  .iw-nav-open .iw-navpanel{display:flex}
  .iw-navpanel>nav{flex-direction:column;align-items:stretch;gap:0;font-size:14px;letter-spacing:0.1em}
  .iw-navpanel>nav>a{padding:15px 2px}
  .iw-navpanel>div{margin-left:0;gap:14px;padding:18px 2px 6px}
  .iw-navpanel>div>a:last-child{flex:1;text-align:center;font-size:12.5px}
}

/* The 2a lockup is small enough that the second line of the logo fits beside
   the menu button all the way down to 320px, so it is no longer dropped — the
   older, larger lockup needed 182px for that line alone and could not. */
@media (max-width:429.98px){
  .iw-navbtn{padding:10px 12px;letter-spacing:0.1em}
}

/* Narrowest phones only. At 320px the hero has 265px to work with: the eyebrow
   overruns it by 4px, and "Paid on approval." wants 41px type rather than the
   46px floor of its clamp. Lowering the clamp itself would shrink the title on
   every phone to rescue the one that is nearly extinct, so it is scoped here
   and nothing at 340px and up is touched. */
@media (max-width:339.98px){
  .iw-hero-title{font-size:40px}
}

/* Four figures, four very different widths. Left to flex-wrap they land 3+1 at
   768px and 1+1+2 at 375px — a stranded cell at almost every phone size — so
   below the header breakpoint they go into two even columns, which always
   gives 2+2. The figures themselves are clamped rather than fixed at 34px:
   a 320px screen leaves a 133px column, and WEBSITES set at 34px needs 164px,
   so a fixed size would put the word straight through its neighbour. */
@media (max-width:859.98px){
  .iw-hero-figures{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
                   gap:26px 14px; align-items:start}
}

/* Chinese body copy wants an even block, not whole words. Breaking between
   any two characters is ordinary Chinese typesetting — books and newspapers do
   it on every page and nobody reads it as an error. What does read as an error
   is a ragged block: keep-all was tried here first and, by breaking only at
   punctuation, gave every line a different length and left the paragraph
   looking crooked. balance keeps the default breaking and evens the lines
   instead, which also clears the real defect — 「如此。」 sitting alone on a
   third line. Chrome gives up on balance past six lines and falls back to
   normal filling, which is what the long legal paragraphs want anyway. */
html[lang^="zh"] p,
html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] span{text-wrap:balance}