/* The counting house: a ruled ledger page. Every vertical measure is a multiple of the 32px pitch. */
:root{
  color-scheme:light;
  --paper:#F2ECDF; --paper-2:#EAE2D1; --ink:#241F1A; --ink-2:#5A5248; --feint:#D6CEBC; --oxide:#9A3A2B; --oxide-2:#7E2D21;
  --pitch:32px; --phase:-9px;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --margin-col:128px; --content-left:160px; --money:112px; --measure:40em; --head-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:719px){ :root{ --margin-col:32px; --content-left:44px; --money:20px; --head-h:96px; } }
html[lang="zh-Hans"]{
  --serif:"Libre Caslon Text","Noto Serif SC","Songti SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",serif;
  --sans:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Helvetica Neue",Arial,sans-serif;
  --measure:34em;
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/var(--pitch) var(--serif);overflow-x:hidden}
html[lang="zh-Hans"] body{letter-spacing:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--oxide);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:9;background:var(--paper);color:var(--ink);padding:6px 12px;font:500 15px/32px var(--sans)}
.skip:focus{left:8px}

/* header: the head of the page, closed by a double rule */
.head{position:sticky;top:0;z-index:5;display:flex;align-items:center;height:var(--head-h);background:var(--paper)}
.head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.mark{display:flex;align-items:center;height:44px;text-decoration:none;color:var(--ink)}
.mark-box{width:var(--margin-col);display:flex;justify-content:center;align-items:center}
.mark svg{width:40px;height:40px;transition:transform .25s var(--ease),color .25s}
.mark svg circle{transition:stroke-width .25s}
.mark:hover svg,.mark:focus-visible svg{transform:scale(.92);color:var(--oxide)}
.mark:hover svg circle,.mark:focus-visible svg circle{stroke-width:3.2}
.mark .name{margin-left:calc(var(--content-left) - var(--margin-col));font:400 19px/32px var(--serif)}
.nav{margin-left:auto;display:flex;gap:28px}
.nav a,.lang a,.lang .on{position:relative;display:inline-block;padding:6px 0;font:500 15px/32px var(--sans);color:var(--ink);text-decoration:none}
.nav a::after,.lang a::after,.lang .on::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--oxide);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after,.lang a:hover::after,.lang a:focus-visible::after{transform:scaleX(1)}
.lang{display:flex;align-items:center;gap:10px;margin-left:40px;padding-right:24px}
.lang .on{color:var(--oxide)}
.lang .on::after{transform:scaleX(1);transform-origin:right}
.lang:has(a:hover,a:focus-visible) .on::after{transform:scaleX(0)}
.lang .bar{color:var(--feint);font:400 15px/32px var(--sans)}
@media (max-width:719px){
  .head{flex-wrap:wrap;align-content:center}
  .mark svg{width:26px;height:26px}
  .mark .name{font-size:17px}
  .nav{order:3;flex-basis:100%;margin-left:0;padding-left:var(--content-left);gap:22px}
  .lang{order:2;margin-left:auto;padding-right:16px}
}

/* the fixed ruling: margin double rule, two money columns, the clerk's place, the ruler */
.ruling{position:fixed;inset:0;z-index:1;pointer-events:none}
.ruling .v{position:absolute;top:0;bottom:0;width:1px;background:var(--oxide);opacity:.7}
.ruling .vm{left:calc(var(--margin-col) - 4px);box-shadow:4px 0 0 var(--oxide)}
.ruling .v1{left:calc(100% - 2 * var(--money))}
.ruling .v2{left:calc(100% - var(--money))}
.ruling .follow{position:absolute;left:var(--content-left);right:calc(2 * var(--money));top:0;height:1px;background:var(--oxide);opacity:0;transition:opacity .3s;will-change:transform}
.ruling .caret{position:absolute;left:calc(var(--margin-col) - 22px);top:0;width:12px;height:1px;background:var(--oxide);transform:translateY(-10px);will-change:transform}
.ruling .caret::after{content:"";position:absolute;right:-1px;top:-3px;width:1px;height:7px;background:var(--oxide)}
.ruling .stage{position:absolute;left:0;top:50%;width:calc(var(--margin-col) - 26px);text-align:right;font:500 12px/16px var(--sans);color:var(--oxide);margin-top:-8px;clip-path:inset(0 0 0 0)}
@media (max-width:719px){ .ruling .caret,.ruling .stage{display:none} .ruling .follow{opacity:0 !important} }

/* the page: feint horizontal ruling at the pitch; text sits on the line */
.page{position:relative;z-index:2;padding:0 calc(2 * var(--money) + 16px) 0 var(--content-left)}
.page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--pitch) - 1px),var(--feint) calc(var(--pitch) - 1px),var(--feint) var(--pitch));background-position:0 var(--phase)}
.beat{max-width:var(--measure);padding:calc(var(--pitch) * 3) 0;scroll-margin-top:var(--head-h)}
.beat-open{padding:calc(var(--pitch) * 4) 0 calc(var(--pitch) * 4)}
h1{margin:0 0 27px;padding-top:25px;font:400 64px/76px var(--serif);letter-spacing:-.01em;overflow-wrap:anywhere}
h2{margin:0 0 var(--pitch);font:700 24px/32px var(--serif)}
h3{margin:0;font:400 italic 17px/32px var(--serif);color:var(--ink-2)}
html[lang="zh-Hans"] h3{font-style:normal;font-weight:700}
p{margin:0 0 var(--pitch)}
.lead{font-size:21px}
html[lang="zh-Hans"] .lead{font-size:19px}
@media (max-width:719px){ h1{font-size:40px;line-height:44px;padding-top:20px} h2{font-size:22px} .lead{font-size:19px} html[lang="zh-Hans"] .lead{font-size:18px} .beat{padding:calc(var(--pitch) * 2) 0} .beat-open{padding:calc(var(--pitch) * 2) 0 calc(var(--pitch) * 3)} }

/* entries */
.entries{margin:0}
.entries > div{margin:0 0 var(--pitch)}
.entries dt{font-weight:700}
.entries dd{margin:0}

/* the bill of lading: printed words, manuscript fill, a border that draws */
.beat-bol{max-width:none}
.beat-bol h2{max-width:var(--measure)}
.form{position:relative;background:var(--paper-2);padding:calc(var(--pitch) - 1px) 24px 0;margin:0 0 var(--pitch)}
.form-rule{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.form-rule rect{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.row{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px;margin:0 0 calc(var(--pitch) + 1px)}
.print{flex:none;font:500 13px/32px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
html[lang="zh-Hans"] .print{font:700 15px/32px var(--serif);letter-spacing:0;text-transform:none}
.fill{flex:1 1 60%;min-width:0;font-style:italic;border-bottom:1px solid var(--ink)}
html[lang="zh-Hans"] .fill{font-style:normal}
@media (max-width:719px){ .form{padding:calc(var(--pitch) - 1px) 14px 0} }

/* the order: six entries, a foot line, a double rule when settled */
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{position:relative;padding-left:56px;margin:0 0 var(--pitch)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;font:500 14px/32px var(--sans);color:var(--oxide)}
.steps b{display:block}
.tick{position:absolute;left:24px;top:9px;width:14px;height:14px;overflow:visible}
.tick path{fill:none;stroke:var(--oxide);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:0}
.settle-row{position:relative;margin:0 0 var(--pitch)}
.settle{display:none;width:100%;height:var(--pitch);margin:0;padding:0 0 0 56px;text-align:left;background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;font:500 13px/32px var(--sans);color:var(--oxide);cursor:pointer}
.settle .cap{display:inline-block;transition:transform .3s var(--ease)}
.settle:hover .cap,.settle:focus-visible .cap{transform:translateX(6px)}
.settle:disabled{cursor:default;color:var(--ink-2);border-bottom-color:transparent}
.settle:disabled .cap{transform:none}
.drule{position:absolute;left:0;right:0;bottom:-2px;height:5px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);transform-origin:left;transition:transform .9s var(--ease) .5s}
.js .settle{display:block}
@media (max-width:719px){ .steps li{padding-left:48px} .tick{left:22px} .settle{padding-left:48px} }

/* contact */
.form-link{text-decoration:none;background-image:linear-gradient(var(--oxide),var(--oxide));background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;transition:background-size .3s var(--ease);padding-bottom:1px}
.form-link:hover,.form-link:focus-visible{background-size:100% 3px}
.enq{max-width:var(--measure)}
.field{display:block;padding-top:10px;margin:0 0 10px}
.lbl{display:block;font:500 13px/32px var(--sans);color:var(--ink-2)}
.line{position:relative;display:block}
.line::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--oxide);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.line:focus-within::after{transform:scaleX(1)}
.field input,.field textarea{display:block;width:100%;height:44px;margin:0;padding:0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;font:400 17px/32px var(--serif);color:var(--ink);box-shadow:none}
.field textarea{height:140px;line-height:32px;resize:vertical;padding-top:12px}
.field input:focus,.field textarea:focus{outline:none}
.field-msg{margin:0 0 42px}
.btn{display:inline-block;height:48px;margin:0 0 16px;padding:0 24px;border:1px solid var(--ink);border-radius:0;background:var(--paper-2);font:500 15px/46px var(--sans);color:var(--ink);cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.btn:hover,.btn:focus-visible{transform:translateY(1px);box-shadow:inset 0 2px 0 rgba(36,31,26,.28)}
.note{font:400 15px/32px var(--sans);color:var(--ink-2)}
.sent{font-style:italic}
.sent:focus{outline:none}
.sent[hidden]{display:none}

/* footer: the account closed by a double rule; nothing written below */
.foot{position:relative;z-index:2;padding:0 calc(2 * var(--money) + 16px) calc(var(--pitch) * 3) var(--content-left)}
.foot-rule{height:5px;margin:0 0 calc(var(--pitch) - 5px)}
.foot-rule span{display:block;height:1px;background:var(--ink);transform-origin:left}
.foot-rule span + span{margin-top:3px}
.foot p{margin:0;font-size:15px;color:var(--ink-2)}

/* the opening: the book is ruled before the entry is written. html.motion is set in the head script
   unless the visitor prefers reduced motion or the URL carries ?still; without it the page is the finished object. */
.motion .ruling .v{transform:scaleY(0);transform-origin:top;transition:transform .9s var(--ease)}
.motion.ready .ruling .v{transform:scaleY(1)}
.motion .ruling .v1{transition-delay:.15s}
.motion .ruling .v2{transition-delay:.25s}
.motion .head::after{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .35s}
.motion.ready .head::after{transform:scaleX(1)}
.motion .page::before{opacity:0;transition:opacity .8s .6s}
.motion.ready .page::before{opacity:1}
.motion .w{clip-path:inset(0 calc(100% - 1px) 0 -2%)}
.motion .w.in{clip-path:inset(0 -2% 0 -2%);transition:clip-path .8s var(--ease);transition-delay:calc(var(--i, 0) * .12s)}
.motion .form-rule rect{stroke-dasharray:1;stroke-dashoffset:1}
.motion .form.in .form-rule rect{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ease)}
.motion .ruling .stage{clip-path:inset(0 0 0 101%);transition:clip-path .35s var(--ease)}
.motion .ruling .stage.in{clip-path:inset(0 0 0 0)}
.motion .settle-row .drule{transform:scaleX(0)}
.motion .beat-order .tick path{stroke-dashoffset:22;transition:stroke-dashoffset .45s var(--ease)}
.motion .beat-order.settled .tick path{stroke-dashoffset:0;transition-delay:calc(var(--i, 0) * .16s)}
.motion .beat-order.settled .drule{transform:scaleX(1)}
html:not(.motion) .ruling .follow,html:not(.motion) .ruling .caret{display:none}
html:not(.motion) .foot-rule span{transform:none !important}

@media (prefers-reduced-motion: reduce){
  .mark svg,.mark svg circle,.nav a::after,.lang a::after,.lang .on::after,.settle .cap,.line::after,.btn,.form-link{transition:none}
}