/* gc-v1.2 · About. Laid out like Chinese mounted pictures: hanging scroll, four-panel set, album, handscroll.
   Fonts are subsets made at build time from the project's OFL font kit (licences beside them in fonts/). */
@font-face{font-family:"AuSong";src:url(fonts/gc-about-song.woff2) format("woff2");font-display:swap}
@font-face{font-family:"AuBrush";src:url(fonts/gc-about-brush.woff2) format("woff2");font-display:swap}
@font-face{font-family:"AuKai";src:url(fonts/gc-about-kai.woff2) format("woff2");font-display:swap}

.au{
  /* five tones of ink, from scorched to clear */
  --au-jiao:#15120f;--au-nong:#2c2721;--au-zhong:#4d463d;--au-dan:#8c8376;--au-qing:#cfc6b8;
  --au-xuan:#f7f2e8;--au-silk:#ddd2bd;--au-silk2:#cdbfa5;--au-zhu:#a63b27;--au-night:#100e0b;
  --au-ease:cubic-bezier(.2,.7,.2,1);
}
.au .zh{font-family:"AuSong","NotoSerifSCsub","Songti SC",serif}
.au-brush{font-family:"AuBrush","AuSong",serif}
.au-kai{font-family:"AuKai","Kaiti SC","STKaiti","KaiTi",serif}
.au .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.au-eb{display:flex;align-items:center;gap:10px;color:var(--au-dan);margin-bottom:26px}
.au-eb i{width:6px;height:6px;border-radius:50%;background:var(--au-zhu)}
.au main h2{font-size:clamp(40px,3.7vw,62px);line-height:1.04;letter-spacing:-.026em;color:var(--au-jiao)}
.au main h3{font-size:clamp(26px,2vw,32px);line-height:1.12;letter-spacing:-.015em;color:var(--au-jiao)}
.au main section p:not(.mono){font-size:16.5px;line-height:1.7;color:var(--au-nong)}

/* ── 1 · the opening: two lists ───────────────────────────────────────────── */
.au-open{position:relative;min-height:100vh;padding:128px var(--col) 56px;display:flex;flex-direction:column}
.au-rules{position:absolute;inset:0 var(--col);pointer-events:none;
  background-image:linear-gradient(90deg,rgba(29,25,21,.055) 1px,transparent 1px);background-size:calc((100% - 1px)/12) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.au-open .au-eb{position:relative}
.au-ledger{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);align-items:end;gap:0;padding:2vh 0 5vh}
.au-need{padding-right:4vw;padding-bottom:12px}
.au-need ul li{font-family:"FragmentMono",ui-monospace,monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--au-dan);padding:15px 0;border-top:1px solid rgba(29,25,21,.1)}
.au-need ul li:last-child{border-bottom:1px solid rgba(29,25,21,.1)}
.au-lab{color:var(--au-dan);margin-bottom:26px}
.au-alive{border-left:1px solid rgba(29,25,21,.14);padding-left:5vw}
.au-alive .au-lab{color:var(--au-zhong)}
.au-alive .au-lab b{font-weight:400;transition:color 1.2s var(--au-ease) 2.1s}
.au-words{font-size:clamp(60px,7.2vw,122px);line-height:.98;letter-spacing:-.04em;color:var(--au-jiao)}
.au-w{display:block}
.au-cite{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);align-items:start}
.au-cite p{grid-column:2;padding-left:5vw;max-width:780px;font-family:"Sentient",Georgia,serif;font-weight:300;font-style:italic;
  font-size:17px !important;line-height:1.6 !important;color:var(--au-zhong) !important}
.au-cite footer{grid-column:2;padding-left:5vw;margin-top:12px;color:var(--au-dan)}
.au-cite footer i{font-style:normal;color:var(--au-zhong)}
.au-down{position:absolute;right:var(--col);bottom:56px;color:var(--au-dan);display:flex;align-items:center;gap:12px}
.au-down::after{content:"";width:1px;height:38px;background:currentColor;opacity:.6}

/* opening sequence: the necessary first, quietly; then the four words, one by one */
.au-js .au-need,.au-js .au-cite,.au-js .au-down{opacity:0;transition:opacity 1.4s var(--au-ease)}
.au-js .au-w{opacity:0;filter:blur(10px);transform:translateY(.18em);
  transition:opacity 1.3s var(--au-ease),filter 1.3s var(--au-ease),transform 1.3s var(--au-ease);transition-delay:calc(.7s + var(--i) * .2s)}
.au-js .au-open.go .au-need{opacity:1;transition-delay:.15s}
.au-js .au-open.go .au-w{opacity:1;filter:none;transform:none}
.au-js .au-open.go .au-cite{opacity:1;transition-delay:1.9s}
.au-js .au-open.go .au-down{opacity:1;transition-delay:2.4s}
.au-open.go .au-alive .au-lab b,html:not(.au-js) .au-alive .au-lab b{color:var(--au-zhu)}

/* ── 2 · the name, and a hanging scroll ───────────────────────────────────── */
.au-name{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:6vw;align-items:center;padding:16vh var(--col) 15vh}
.au-hang{--hh:min(690px,78vh);justify-self:center;display:flex;flex-direction:column;align-items:center;width:calc(var(--hh) * .34);
  filter:drop-shadow(0 34px 38px rgba(40,26,14,.18))}
.au-hang-m{position:relative;width:100%;height:var(--hh);padding:calc(var(--hh) * .17) 15px calc(var(--hh) * .085);
  background:linear-gradient(90deg,#d6cab2,#e3d9c6 22%,#e3d9c6 78%,#d6cab2);
  clip-path:inset(0 0 100% 0);transition:clip-path 2s var(--au-ease) .2s}
.au-yan{position:absolute;top:0;width:8px;height:calc(var(--hh) * .17);background:#cbbda2;box-shadow:inset 0 -1px 0 rgba(60,40,20,.12)}
.au-yan:first-child{left:34%}.au-yan:nth-child(2){right:34%}
.au-hang-x{height:100%;background:var(--au-xuan);box-shadow:inset 0 0 0 1px rgba(80,60,30,.13);display:flex;justify-content:center;
  gap:12px;padding:calc(var(--hh) * .05) 0}
.au-brush{writing-mode:vertical-rl;font-size:calc(var(--hh) * .082) !important;line-height:1 !important;letter-spacing:.06em;color:var(--au-jiao) !important}
.au-hang-by{writing-mode:vertical-rl;align-self:flex-end;font-size:13px !important;letter-spacing:.3em;color:var(--au-zhong) !important}
.au-rod{position:relative;width:calc(100% + 30px);height:15px;margin-top:-1px;border-radius:3px;
  background:linear-gradient(180deg,#4a3526,#2a1c12 60%,#1d130c);transform:translateY(calc(-1 * var(--hh)));transition:transform 2s var(--au-ease) .2s}
.au-rod::before,.au-rod::after{content:"";position:absolute;top:-3px;width:15px;height:21px;border-radius:4px;background:#1b120b}
.au-rod::before{left:-6px}.au-rod::after{right:-6px}
.au-hang.in .au-hang-m{clip-path:inset(0)}
.au-hang.in .au-rod{transform:none}
.au-name-t{max-width:600px}
.au-name-t h2{margin-bottom:34px}
.au-name-t p+p{margin-top:18px}
.au-lead{font-size:19px !important;line-height:1.62 !important;color:var(--au-jiao) !important}
.au-su{margin:38px 0 34px;padding-top:24px;border-top:1px solid var(--line)}
.au-su .mono{color:var(--au-dan)}
.au-su blockquote{margin-top:14px;font-family:"Sentient",Georgia,serif;font-weight:300;font-size:clamp(24px,2vw,30px);line-height:1.25;color:var(--au-jiao)}
.au-su-by{margin-top:10px !important;font-size:13.5px !important;color:var(--au-dan) !important}

/* ── 3 · ink: what we make, four panels ───────────────────────────────────── */
.au-ink{background:var(--au-night);color:#ece4d6;padding:16vh var(--col) 15vh}
.au-ink h2{color:#f2ebe0 !important}.au-ink h2 em{color:#d39072}
.au-ink .au-eb{color:#8f8576}
.au-ink-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:6vw;align-items:end;margin-bottom:10vh}
.au-ink-head p:not(.mono){color:#b8ad9d !important;max-width:520px}
.au-care{font-family:"Sentient",Georgia,serif;font-weight:300;font-size:clamp(22px,1.75vw,28px) !important;line-height:1.3 !important;
  color:#e2d9ca !important;margin-bottom:30px;padding-top:26px;border-top:1px solid rgba(236,228,214,.14)}
.au-screen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.au-screen li{transition:opacity .7s var(--au-ease)}
.au-screen figure{aspect-ratio:3/4.1;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px rgba(236,228,214,.06)}
.au-screen img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--au-ease)}
.au-screen li:hover img{transform:scale(1.045)}
.au-screen:hover li:not(:hover){opacity:.42}
.au-sv{display:flex;align-items:baseline;gap:12px;margin-top:20px;font-family:"Sentient",Georgia,serif;font-weight:300;
  font-size:30px !important;line-height:1 !important;color:#f2ebe0 !important}
.au-sv .zh{font-size:16px;color:#d39072}
.au-sc{margin-top:10px;font-size:13px !important;line-height:1.55 !important;color:#8f8576 !important;max-width:260px}

/* ── 4 · an album, opened flat ─────────────────────────────────────────────── */
.au-album{padding:16vh var(--col) 15vh}
.au-al-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:6vw;align-items:end;margin-bottom:9vh}
.au-al-head p:not(.mono){max-width:500px;margin-bottom:20px}
.au-leaves{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:14px;background:linear-gradient(180deg,#e2d8c5,#d7cbb3);
  box-shadow:0 36px 50px -34px rgba(40,26,14,.4)}
.au-lf{position:relative;padding:18px 16px 22px;background:var(--au-xuan)}
.au-lf:nth-child(odd){background:linear-gradient(90deg,var(--au-xuan) 82%,#ede5d6)}
.au-lf:nth-child(even){background:linear-gradient(270deg,var(--au-xuan) 82%,#ede5d6)}
.au-lf+.au-lf{box-shadow:inset 1px 0 0 rgba(80,60,30,.12)}
.au-lf-k{display:block;font-size:20px;line-height:1;color:var(--au-zhong);margin-bottom:14px}
.au-lf figure,.au-lf-q{aspect-ratio:3/4;overflow:hidden;background:#0b0a09}
.au-lf img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--au-ease)}
.au-lf:hover img{transform:scale(1.05)}
.au-lf-q{display:flex;align-items:center;padding:0 16px;background:#efe7d8;box-shadow:inset 0 0 0 1px rgba(80,60,30,.1)}
.au-lf-q p{font-family:"Sentient",Georgia,serif;font-weight:300;font-style:italic;font-size:17px !important;line-height:1.38 !important;color:var(--au-jiao) !important}
.au-lf-t{margin-top:16px;font-family:"Sentient",Georgia,serif;font-weight:300;font-size:19px !important;line-height:1.2 !important;color:var(--au-jiao) !important}
.au-lf-c{margin-top:6px;font-size:12.5px !important;line-height:1.5 !important;color:var(--au-dan) !important}

/* ── 5 · the handscroll ───────────────────────────────────────────────────── */
.au-scroll{position:relative;background:#ebe3d4}
.au-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:84px 0 34px}
.au-sc-top{display:flex;align-items:baseline;justify-content:space-between;padding:0 var(--col);margin-bottom:22px}
.au-sc-top .au-eb{margin:0}
.au-dir{color:var(--au-dan)}
.au-dir span{display:inline-block;margin-right:6px;animation:au-nudge 2.6s var(--au-ease) infinite}
@keyframes au-nudge{0%,60%,100%{transform:none}30%{transform:translateX(-6px)}}
.au-track{position:relative;height:min(64vh,580px)}
.au-band{position:absolute;top:0;bottom:0;right:var(--col);width:max-content;display:flex;gap:1px;padding:16px 0;
  background:linear-gradient(180deg,#d9cdb6,#cfc1a7);box-shadow:0 44px 60px -44px rgba(40,26,14,.5);will-change:transform}
.au-p{position:relative;flex:none;height:100%;background:var(--au-xuan);transition:opacity 1s var(--au-ease)}
.au-js .au-p:not(.seen){opacity:.18}
.au-p-note{margin-top:8px;font-size:13px !important;line-height:1.5 !important;color:var(--au-dan) !important}
.au-p-foot{position:absolute;left:30px;right:30px;bottom:26px}
.au-p-foot .mono{color:var(--au-zhong)}
.p-yin{width:470px;padding:46px 46px 40px;display:flex;flex-direction:column;justify-content:center;margin-inline-end:12px}
.p-yin h2{font-size:clamp(36px,3vw,50px) !important;margin-bottom:30px}
.au-wh{font-family:"Sentient",Georgia,serif;font-weight:300;font-size:20px;line-height:1.5;color:var(--au-nong);margin-bottom:18px}
.p-yin .mono{color:var(--au-zhong)}
.p-hua{margin:0;padding:0;background:#e8dfcd;margin-inline-end:12px}
.p-hua img{height:calc(100% - 34px);width:auto;max-width:none}
.p-hua figcaption{position:absolute;left:18px;bottom:9px;color:var(--au-zhong);font-size:10px}
.p-ba{width:420px;padding:48px 42px}
.p-ba .mono{color:var(--au-zhu);margin-bottom:20px}
.p-ba p+p{margin-top:16px}
.p-ba p:not(.mono){font-size:15.5px !important;line-height:1.66 !important}
.p-shi{width:300px;display:flex;flex-direction:row-reverse;justify-content:center;align-items:flex-start;gap:20px;padding:50px 0 0}
.au-poem{writing-mode:vertical-rl;font-size:25px !important;line-height:2.05 !important;letter-spacing:.2em;color:var(--au-jiao) !important}
.au-poem-by{writing-mode:vertical-rl;margin-top:118px !important;font-size:13px !important;letter-spacing:.3em;color:var(--au-zhong) !important}
.p-wu{display:flex;gap:26px;padding:28px 34px 88px 28px}
.p-wu figure{height:100%;aspect-ratio:1120/1500;overflow:hidden;background:#000}
.p-wu figure img{width:100%;height:100%;object-fit:cover}
.au-note{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 0}
.au-note-t{writing-mode:vertical-rl;font-family:"Sentient",Georgia,serif;font-weight:300;font-style:italic;font-size:21px !important;
  line-height:1.3 !important;color:var(--au-jiao) !important}
.au-seal{writing-mode:vertical-rl;text-orientation:upright;display:block;padding:9px 5px;background:var(--au-zhu);color:#f7efe4;
  font-family:"Sentient",Georgia,serif;font-size:13px;line-height:1;letter-spacing:.08em;border-radius:2px;
  box-shadow:inset 0 0 0 2px var(--au-zhu),inset 0 0 0 3px rgba(247,239,228,.55);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.3 1.5'/></filter><rect width='60' height='60' filter='url(%23n)'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.3 1.5'/></filter><rect width='60' height='60' filter='url(%23n)'/></svg>");
  transition:opacity .35s ease-out,transform .5s cubic-bezier(.3,1.6,.5,1)}
.au-js .au-seal{opacity:0;transform:scale(1.35) rotate(-4deg)}
.au-js .au-seal.stamped{opacity:1;transform:none}
.p-ni{width:480px;display:flex;gap:30px;padding:34px 40px 34px 34px}
.au-yours{position:relative;width:86px;flex:none;background:repeating-linear-gradient(90deg,transparent 0 42px,rgba(140,131,118,.28) 42px 43px);
  border-left:1px dashed rgba(140,131,118,.45);border-right:1px dashed rgba(140,131,118,.45)}
.au-verse{writing-mode:vertical-rl;height:100%;padding:6px 0;margin:0 auto;font-size:27px !important;line-height:1.55 !important;
  color:var(--au-jiao) !important;overflow:hidden}
.au-ph{position:absolute;top:10px;left:50%;transform:translateX(-50%);writing-mode:vertical-rl;font-family:"AuKai",serif;font-size:21px;
  letter-spacing:.12em;color:var(--au-qing);transition:opacity .4s}
.au-yours.has .au-ph{opacity:0}
.au-ni-t{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6px}
.au-ni-t .mono{color:var(--au-zhu);margin-bottom:14px}
.au-ni-t h3{margin-bottom:26px}
.au-vin{width:100%;padding:13px 0;border:0;border-bottom:1px solid var(--au-jiao);background:transparent;font-family:"AuKai","Kaiti SC",serif;
  font-size:18px;color:var(--au-jiao);outline:none}
.au-vin::placeholder{color:var(--au-dan)}
.au-vin:focus{border-bottom-color:var(--au-zhu)}
.au-rail{position:relative;height:1px;margin:28px var(--col) 0;background:rgba(29,25,21,.14)}
.au-rail i{position:absolute;inset:-1px 0;background:var(--au-jiao);transform-origin:right;transform:scaleX(var(--p,0))}
/* narrow screens and reduced motion: the scroll is swiped, starting from its right end */
.au-scroll.native .au-pin{position:static;height:auto;padding:14vh 0 12vh}
.au-scroll.native .au-band{position:static;width:auto;max-width:calc(100% - 2 * var(--col));margin:0 var(--col);overflow-x:auto;overflow-y:hidden;
  height:100%;transform:none !important;scrollbar-width:thin}
.au-scroll.native .au-p{opacity:1}
.au-scroll.native .au-rail{display:none}

/* ── 6 · what we promise ──────────────────────────────────────────────────── */
.au-promise{padding:17vh var(--col) 14vh;text-align:center}
.au-promise .au-eb{justify-content:center}
.au-pr-h{max-width:980px;margin:0 auto 10vh;font-size:clamp(34px,3.1vw,52px) !important;line-height:1.12 !important}
.au-pr-l{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:1040px;margin:0 auto}
.au-pr-l::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(29,25,21,.16)}
.au-pr-c{padding:0 4.2vw}
.au-pr-c>.mono{color:var(--au-dan);margin-bottom:18px}
.au-pr-c li{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--au-nong)}
.au-pr-c:first-child li{flex-direction:row-reverse;text-align:right}
.au-num{flex:none;width:18px;font-size:14px;color:var(--au-dan)}
.au-pr-more{display:inline-block;margin-top:8vh}

/* ── 7 · who we are, where we are, a fair return ──────────────────────────── */
.au-us{padding:0 var(--col) 16vh}
.au-us-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5vw;border-top:1px solid rgba(29,25,21,.2);padding-top:7vh}
.au-us-c>.mono{color:var(--au-dan);margin-bottom:18px}
.au-us-c h3{margin-bottom:22px}
.au-us-c p:not(.mono){font-size:15.5px !important}
.au-tl li{display:grid;grid-template-columns:58px 1fr;gap:10px;padding:13px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--au-nong)}
.au-tl li .mono{color:var(--au-dan);padding-top:3px}
.au-tl li.au-here .mono{color:var(--au-zhu)}

/* ── 8 · the end ──────────────────────────────────────────────────────────── */
.au-end{padding:15vh var(--col) 16vh;background:var(--paper2);text-align:center}
.au-end .au-eb{justify-content:center}
.au-end h2{margin-bottom:8vh}
.au-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.6vw;max-width:1040px;margin:0 auto}
.au-card{display:block;padding:10px 10px 22px;background:linear-gradient(180deg,#e2d8c5,#d9cdb6);text-align:left;transition:transform .6s var(--au-ease),box-shadow .6s}
.au-card:hover{transform:translateY(-6px);box-shadow:0 30px 40px -28px rgba(40,26,14,.45)}
.au-card figure{aspect-ratio:4/5;overflow:hidden;background:#000}
.au-card img{width:100%;height:100%;object-fit:cover}
.au-card .mono{display:block;margin:18px 6px 6px;color:var(--au-zhong)}
.au-card b{display:block;margin:0 6px;font-family:"Sentient",Georgia,serif;font-weight:300;font-size:22px;color:var(--au-jiao)}

/* ── narrow screens: readable, designed later ─────────────────────────────── */
@media (max-width:900px){
  .au-open{padding:110px 22px 40px}.au-rules{display:none}
  .au-ledger,.au-cite{grid-template-columns:1fr}.au-need{padding:0 0 30px}.au-alive{border-left:0;padding-left:0}
  .au-cite p,.au-cite footer{grid-column:1;padding-left:0}.au-down{display:none}
  .au-name{grid-template-columns:1fr;padding:12vh 22px}
  .au-ink,.au-album,.au-promise,.au-end{padding:11vh 22px}.au-us{padding:0 22px 11vh}
  .au-ink-head,.au-al-head{grid-template-columns:1fr;gap:24px}
  .au-screen{grid-template-columns:1fr 1fr}
  .au-leaves{grid-template-columns:repeat(6,62vw);overflow-x:auto}
  .au-pr-l{grid-template-columns:1fr}.au-pr-l::before{display:none}.au-pr-c{padding:0}
  .au-pr-c:first-child li{flex-direction:row;text-align:left}.au-pr-c+.au-pr-c{margin-top:36px}
  .au-us-g,.au-cards{grid-template-columns:1fr}
  .au-sc-top{flex-direction:column;gap:10px;padding:0 22px}
  .au-scroll.native .au-band{margin:0 22px;max-width:calc(100% - 44px)}
  .p-yin,.p-ba,.p-ni{width:82vw}
}
@media (prefers-reduced-motion:reduce){
  .au-js .au-w,.au-js .au-need,.au-js .au-cite,.au-js .au-down,.au-js .au-seal{opacity:1;filter:none;transform:none;transition:none}
  .au-hang-m{clip-path:none;transition:none}.au-rod{transform:none;transition:none}.au-dir span{animation:none}
}