/* gc-v1.5 → gc-v1.6 → gc-v1.7 · light, air, and the home page on paper. Loaded after home32.css and gc-home.css on the
   home page (body.gc15.gc16) and on mood.html. gc-v1.6 additions are at the end.
   The page alternates an ink stage, where pictures live, with paper, where reading happens.
   Sections: tokens · header · moving pictures · 1 opening · bridge · 2 Series still · scenes (four acts) · 3 every piece ·
   4 Carry/Give · 6 before you choose · closing band · bead strand · visual-direction page · narrow screens · reduced motion. */

@font-face{font-family:"NotoSerifSC15";src:url(fonts/noto-serif-sc-gc15-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"NotoSerifSC15";src:url(fonts/noto-serif-sc-gc15-500.woff2) format("woff2");font-weight:500;font-display:swap}

.gc15,.gc15-doc{--ink0:#0b0908;--ink1:#110e0c;--ink2:#16120f;--moon:#ece5d7;--moon2:#c3b9a8;--dim:#8f8575;--candle:#d9a46f;
  --em-d:#e09a78;--zhu-d:#e0866a;--hair:rgba(236,229,215,.13);--hair2:rgba(236,229,215,.28);--bar-t:calc(88px + 8vh);--bar-b:16vh}
.gc15 .zh,.gc15-doc .zh{font-family:"NotoSerifSC15","NotoSerifSCsub","Noto Serif SC","Songti SC",serif;font-weight:300}
.gc15{background:var(--ink0)}

/* ═══ header: ivory over the stage, paper over the page ═══════════════════════════ */
.gc15 .hd{color:var(--moon)}
.gc15 .hd .pill{border-color:rgba(236,229,215,.45)}
.gc15 .hd .pill:hover{background:var(--moon);color:var(--ink0)}
.gc15 .hd:not(.dk){color:var(--ink)}
.gc15 .hd:not(.dk) .pill{border-color:var(--ink)}
.gc15 .hd.dk.scrolled{color:var(--moon);background:rgba(11,9,8,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair)}
.gc15 .hd.dk.scrolled .pill{border-color:rgba(236,229,215,.45)}
.gc15 .hd.dk.scrolled .pill:hover{background:var(--moon);color:var(--ink0)}

/* ═══ moving pictures ═════════════════════════════════════════════════════════════ */
.cine{position:relative;overflow:hidden;background:#0b0908}
.cine>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cine>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.cine.live>canvas{opacity:1}
.cine>canvas.air{z-index:1;pointer-events:none;mix-blend-mode:screen}
/* a subtitle, as in a film: what is happening, said once and quietly */
.subt{position:absolute;z-index:4;left:50%;bottom:6%;width:max-content;max-width:min(80%,760px);margin:0;transform:translateX(-50%);
  text-align:center;font:300 clamp(14px,1.08vw,17px)/1.45 "Sentient",Georgia,serif;letter-spacing:.01em;color:#f4ede1;
  text-shadow:0 1px 2px rgba(0,0,0,.65),0 0 22px rgba(0,0,0,.55)}
.di-chip{position:absolute;z-index:4;left:16px;top:16px;padding:6px 10px 5px;border:1px solid rgba(236,229,215,.16);background:rgba(11,9,8,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:rgba(236,229,215,.8);font-size:8.5px}
/* film grain on the dark ground between pictures */
.gc15 .grain::after,.gc15 .a15::after,.gc15 .h15s::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain .9s steps(5) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-60px 40px}40%{background-position:50px -70px}60%{background-position:-90px -30px}80%{background-position:30px 80px}100%{background-position:0 0}}
html[data-mo="off"] .gc15 .a15::after,html[data-mo="off"] .gc15 .h15s::after,html[data-mo="off"] .gc15 .grain::after{animation:none}

/* ═══ 1 opening ═══════════════════════════════════════════════════════════════════ */
.h15s{position:relative;background:var(--ink0);color:var(--moon)}
.h15-full{position:relative;height:100vh;min-height:680px;max-height:1100px;overflow:hidden}
.h15-full .h15-cine{position:absolute;inset:0}
.h15-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,9,8,.86) 0%,rgba(11,9,8,.5) 32%,rgba(11,9,8,0) 54%),
             linear-gradient(0deg,rgba(11,9,8,.62) 0%,rgba(11,9,8,0) 28%)}
/* the frame opens like a film gate, then two thin bars stay */
.h15-bars i{position:absolute;left:0;right:0;z-index:3;height:50.5%;background:var(--ink0);animation:h15-gate 2.1s cubic-bezier(.77,0,.18,1) .15s forwards}
.h15-bars i:first-child{top:0}
.h15-bars i:last-child{bottom:0}
@keyframes h15-gate{to{height:4.6vh}}
.h15-text{position:absolute;z-index:4;left:var(--col);top:52%;transform:translateY(-50%);width:min(42vw,680px)}
.h15-eb{display:inline-flex;align-items:center;gap:12px;color:rgba(236,229,215,.66);font-size:10px;opacity:0;animation:gh-fade 1s 1.9s forwards}
.h15-eb:hover{color:var(--moon)}
.h15-eb i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--zhu-d);box-shadow:0 0 12px rgba(224,134,106,.75)}
.h15-h{margin-top:26px;font-size:clamp(52px,5.5vw,96px);line-height:1.01;letter-spacing:-.035em;color:#f4ede1}
.h15-h em{color:var(--em-d)}
.h15 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.h15 .ln>span{display:block;white-space:nowrap;transform:translateY(110%);animation:gh-up 1.3s cubic-bezier(.2,.75,.1,1) 1.15s forwards}
.h15 .ln+.ln>span{animation-delay:1.3s}
.h15-sub{margin-top:28px;max-width:24em;font:300 clamp(17px,1.3vw,20px)/1.5 "Sentient",serif;color:rgba(236,229,215,.76);
  opacity:0;transform:translateY(12px);animation:gh-in 1s 1.7s var(--ease) forwards}
.h15-cta{display:flex;align-items:center;gap:28px;margin-top:36px;opacity:0;transform:translateY(12px);animation:gh-in 1s 1.9s var(--ease) forwards}
.gc15 .btn-lt{background:#efe7d9;color:#14100d;box-shadow:0 0 0 1px #efe7d9}
.gc15 .btn-lt:hover{background:transparent;color:var(--moon)}
.h15s .lnk,.a15 .lnk,.c15 .lnk{color:var(--moon);border-color:rgba(236,229,215,.42)}
.h15s .lnk:hover,.a15 .lnk:hover,.c15 .lnk:hover{border-color:var(--moon)}
.h15-full .subt{bottom:calc(4.6vh + 24px);opacity:0;animation:gh-fade 1.4s 2.6s forwards}
.h15-full .di-chip{left:auto;top:auto;right:var(--col);bottom:calc(4.6vh + 20px);opacity:0;animation:gh-fade 1s 2.4s forwards}
.h15-down{position:absolute;z-index:4;left:var(--col);bottom:calc(4.6vh + 18px);display:block;width:1px;height:52px;background:rgba(236,229,215,.2);overflow:hidden;
  opacity:0;animation:gh-fade 1s 2.2s forwards}
.h15-down i{position:absolute;left:0;top:0;width:1px;height:20px;background:var(--moon);animation:gh-drop 2.4s 2.6s cubic-bezier(.65,0,.2,1) infinite}
/* B · a widescreen frame, the title set under it like a film's billing */
.h15-box{display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:104px var(--col) 6vh}
.h15-boxtop{margin-bottom:22px;text-align:center}
.h15-frame{position:relative;width:min(100%,calc(60vh * 2.39));margin:0 auto;aspect-ratio:2.39/1;
  clip-path:inset(50% 0 50% 0);animation:h15-open 1.9s cubic-bezier(.77,0,.18,1) .15s forwards}
@keyframes h15-open{to{clip-path:inset(0)}}
.h15-frame .h15-cine{position:absolute;inset:0}
.h15-frame .subt{left:5%;bottom:8%;transform:none;text-align:left;opacity:0;animation:gh-fade 1.4s 2.2s forwards}
.h15-boxtext{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5vw;align-items:end;width:min(100%,calc(60vh * 2.39));margin:5vh auto 0}
.h15-box .h15-h{margin-top:0;font-size:clamp(40px,4.2vw,72px)}
.h15-boxside{padding-bottom:6px}
.h15-box .h15-sub{margin-top:0}
.h15-box .h15-cta{margin-top:24px}

/* ═══ bridge: the words are written into the mist, as on the empty sky of a landscape ═══ */
.gc15 .b15{position:relative;height:142vh;min-height:980px;max-height:1500px;padding:0;overflow:hidden;background:var(--paper)}
.b15-land{position:absolute;inset:0}
.b15-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--ink0) 0%,rgba(11,9,8,.55) 6%,rgba(11,9,8,0) 15%),
             radial-gradient(ellipse 52% 20% at 50% 27%,rgba(214,222,212,.62),rgba(214,222,212,0)),
             linear-gradient(0deg,var(--paper) 0%,rgba(242,236,225,.94) 12%,rgba(242,236,225,.45) 26%,rgba(242,236,225,0) 40%)}
.b15-in{position:absolute;z-index:3;left:0;right:0;top:15%;padding:0 var(--col)}
.gc15 .b15 .gb-eb{color:rgba(29,25,21,.62)}
.gc15 .b15 .gb-h{color:#141210}
.gc15 .b15 .gb-t{color:#2c2722}
.gc15 .b15 .gb-line{background:#141210;opacity:.4}
.b15-credit{position:absolute;z-index:3;right:var(--col);bottom:13vh;font-size:8.5px;letter-spacing:.06em;text-transform:none;color:rgba(29,25,21,.45)}

/* ═══ 2 Series: one still before the four columns ════════════════════════════════ */
.gc15 .fc{background:linear-gradient(180deg,var(--paper) 0,color-mix(in srgb,var(--sa-soft) 58%,var(--paper)) 30vh)}
.gc15 .s15-still{position:relative;margin:0 0 11vh;aspect-ratio:2.39/1;box-shadow:0 60px 90px -60px rgba(40,22,10,.6)}
.gc15 .s15-still .cine{position:absolute;inset:0}
.gc15 .s15-still figcaption{position:absolute;left:0;top:calc(100% + 14px);font-size:9px;color:var(--mute)}
.gc15 .s15-still figcaption .zh{font-size:11px;letter-spacing:.14em;text-transform:none}

/* ═══ scenes: a dark stage, four acts ═════════════════════════════════════════════ */
.a15{position:relative;background:var(--ink0);color:var(--moon)}
.a15-stage{position:relative;height:100vh;min-height:720px;max-height:1080px;overflow:hidden}
.a15-frame,.a15-pics,.a15-titles,.a15-subs,.a15-shade{position:absolute;left:0;right:0;top:var(--bar-t);bottom:var(--bar-b)}
.a15-frame{z-index:1}
.a15-pic{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.a15-pic.on{opacity:1}
.a15-pic img{width:100%;height:100%;object-fit:cover}
.a15-stage.live .a15-pics{visibility:hidden}
.a15-shade{z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(11,9,8,.55),rgba(11,9,8,0) 16%,rgba(11,9,8,0) 80%,rgba(11,9,8,.6))}
.a15-stage>.di-chip{top:calc(var(--bar-t) + 16px);left:auto;right:var(--col)}
.a15-titles{z-index:3;pointer-events:none}
.a15-t{position:absolute;top:var(--ty);display:flex;gap:16px;align-items:flex-start}
.a15-t.left{left:var(--col)}
.a15-t.right{right:var(--col)}
.a15-zh{writing-mode:vertical-rl;font-size:clamp(46px,4.6vw,78px);line-height:1;letter-spacing:.32em;color:#f4ede1;text-shadow:0 2px 34px rgba(0,0,0,.55)}
.a15-no{writing-mode:vertical-rl;margin-top:6px;font-size:13px;letter-spacing:.5em;color:rgba(236,229,215,.62)}
.a15-t .ch{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(-.25em);transition:opacity 1.2s var(--ease),filter 1.4s var(--ease),transform 1.4s var(--ease)}
.a15-t.on .ch{opacity:1;filter:none;transform:none}
.a15-t.on .ch:nth-child(2){transition-delay:.18s}.a15-t.on .ch:nth-child(3){transition-delay:.32s}
.a15-subs{z-index:4;pointer-events:none}
.a15-sub{opacity:0;transition:opacity 1.1s ease}
.a15-sub.on{opacity:1;transition-delay:1.1s}
.a15-top,.a15-bot{position:absolute;z-index:6;left:var(--col);right:var(--col);display:flex;justify-content:space-between;gap:4vw}
.a15-top{top:0;height:var(--bar-t);align-items:flex-end;padding-bottom:14px}
.a15-head .mono{color:var(--dim);font-size:9.5px}
.a15-head h2{margin-top:7px;font-size:clamp(24px,2.1vw,34px);line-height:1.05;letter-spacing:-.02em;color:#f4ede1}
.a15-head h2 em{color:var(--em-d)}
.a15-nav{display:flex;align-items:flex-end;gap:26px}
.a15-idx{display:flex;gap:6px}
.a15-idx button{position:relative;display:grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;column-gap:9px;row-gap:2px;min-width:132px;padding:0 6px 11px;
  border:0;background:none;color:rgba(236,229,215,.45);text-align:left;cursor:pointer;transition:color .4s}
.a15-idx button:hover,.a15-idx button[aria-pressed="true"]{color:var(--moon)}
.a15-idx .mono{font-size:9px;color:inherit}
.a15-idx b{font-weight:300;font-size:17px;letter-spacing:.2em}
.a15-en{grid-column:1/-1;font-size:11.5px;letter-spacing:.02em}
.a15-bar{position:absolute;left:6px;right:6px;bottom:0;height:1px;background:rgba(236,229,215,.16);overflow:hidden}
.a15-bar::after{content:"";position:absolute;inset:0;background:var(--zhu-d);transform:scaleX(0);transform-origin:left}
.a15-idx button[aria-pressed="true"] .a15-bar::after{animation:a15-run var(--act-ms,9000ms) linear forwards}
.a15-stage.hold .a15-idx button[aria-pressed="true"] .a15-bar::after{animation-play-state:paused}
.a15-stage.still .a15-idx button[aria-pressed="true"] .a15-bar::after{animation:none;transform:scaleX(1)}
@keyframes a15-run{to{transform:scaleX(1)}}
.a15-play{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding:9px 15px;border:1px solid var(--hair2);border-radius:999px;background:none;
  color:var(--moon2);font:400 9px "FragmentMono",monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s}
.a15-play:hover{border-color:var(--moon);color:var(--moon)}
.a15-play i{position:relative;width:8px;height:9px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
.a15-play[aria-pressed="true"] i{width:0;height:0;border:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.a15-bot{bottom:0;height:var(--bar-b);align-items:center}
.a15-infos,.a15-cards{position:relative;align-self:stretch}
.a15-infos{flex:1;max-width:620px}
.a15-info,.a15-piece{position:absolute;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .9s var(--ease),transform .9s var(--ease),visibility 0s .9s}
.a15-info.on,.a15-piece.on{opacity:1;visibility:visible;transform:none;transition-delay:.7s,.7s,0s}
.a15-info{left:0;top:50%;margin-top:-46px}
.a15-info .mono{color:var(--dim);font-size:9.5px}
.a15-info .mono .zh{font-size:11px;letter-spacing:.2em;color:var(--moon2)}
.a15-info h3{margin-top:8px;font-size:clamp(24px,2vw,32px);line-height:1.05;letter-spacing:-.015em;color:#f4ede1}
.a15-line{margin-top:8px;max-width:34em;font-size:14px;line-height:1.55;color:var(--moon2)}
.a15-cards{flex:none;width:400px}
.a15-piece{right:0;top:50%;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;width:100%;margin-top:-46px;padding:12px 18px 12px 12px;
  border:1px solid var(--hair);background:rgba(236,229,215,.03);transition:opacity .9s var(--ease),transform .9s var(--ease),visibility 0s .9s,border-color .4s,background .4s}
.a15-piece:hover{border-color:var(--hair2);background:rgba(236,229,215,.07)}
.a15-th{display:block;width:64px;height:64px;overflow:hidden;background:#000}
.a15-th img{width:100%;height:100%;object-fit:cover}
.a15-pt{display:flex;flex-direction:column;gap:4px;min-width:0}
.a15-pt .mono{font-size:8.5px;color:var(--dim)}
.a15-pt b{font-weight:300;font-size:17px;letter-spacing:.14em;color:var(--moon)}
.a15-pt b.col-name{font-family:"Sentient",serif;letter-spacing:0}
.a15-pt em{font-style:normal;font-size:12px;line-height:1.35;color:var(--moon2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a15-piece>i{font-style:normal;color:var(--moon2);transition:transform .4s}
.a15-piece:hover>i{transform:translateX(4px)}

/* light passes over a piece when the pointer reaches it */
.gc15 .pg .gc-frame::after{content:"";position:absolute;inset:-30% -60%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,238,210,.2) 50%,transparent 58%);transform:translateX(-62%);transition:transform 1.25s var(--ease)}
.gc15 .pg .gc-frame.on::after{transform:translateX(62%)}

/* ═══ 4 Carry / Give: two stills that breathe ═════════════════════════════════════ */
.gc15 .gw-side figure.w15-fig{position:relative;aspect-ratio:5/4;margin:0 0 30px}
.gc15 .w15-fig .cine{position:absolute;inset:0}
.gc15 .w15-fig .cine canvas{transition:opacity 1.4s ease,transform 1.8s var(--ease)}
.gc15 .gw-side:hover .w15-fig .cine canvas,.gc15 .gw-side:hover .w15-fig .cine img{transform:scale(1.03)}
.gc15 .w15-fig .subt{bottom:7%;font-size:14.5px}

/* ═══ 6 before you choose: the email moves to the closing band ═══════════════════ */
.gc15 .gpr{padding-bottom:15vh}

/* ═══ closing band: over dark water ═══════════════════════════════════════════════ */
.c15{position:relative;display:grid;place-items:center;height:86vh;min-height:620px;max-height:920px;overflow:hidden;background:var(--ink0);color:var(--moon)}
.c15>.cine{position:absolute;inset:0}
.c15-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 44% 38% at 50% 50%,rgba(11,9,8,.78),rgba(11,9,8,.3) 72%,rgba(11,9,8,0)),
             linear-gradient(180deg,var(--ink0),rgba(11,9,8,0) 26%,rgba(11,9,8,0) 68%,var(--night) 100%)}
.c15-in{position:relative;z-index:3;max-width:640px;padding:0 24px;text-align:center}
.c15-in>.mono{color:var(--moon2);font-size:9.5px}
.c15-in h2{margin-top:14px;font-size:clamp(34px,3.4vw,56px);line-height:1.05;letter-spacing:-.022em;color:#f4ede1}
.c15-in h2 em{color:var(--em-d)}
.gc15 .c15-form{max-width:520px;margin:32px auto 0}
.gc15 .c15-form input{background:rgba(236,229,215,.07);border-color:rgba(236,229,215,.26);color:var(--moon);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gc15 .c15-form input::placeholder{color:rgba(236,229,215,.55)}
.gc15 .c15-form input:focus{border-color:var(--moon)}
.gc15 .c15-form button{background:var(--moon);color:var(--ink0)}
.c15-in .fine{margin-top:14px;font-size:12px;color:rgba(236,229,215,.5)}
.c15-credit{position:absolute;z-index:3;right:var(--col);bottom:26px;font-size:8.5px;letter-spacing:.06em;text-transform:none;color:rgba(236,229,215,.38)}

/* ═══ the strand: a bracelet down the right edge, one bead for each part of the page ═ */
.strand{position:fixed;z-index:26;right:20px;top:50%;display:flex;flex-direction:column;align-items:flex-end;gap:15px;padding:12px 0;
  transform:translateY(-50%);color:var(--moon);transition:color .5s,opacity .5s}
.strand.lt{color:var(--ink)}
.strand-cord{position:absolute;right:6px;top:0;bottom:0;width:1px;background:currentColor;opacity:.22}
.strand a{position:relative;display:flex;align-items:center;gap:12px;height:13px;color:inherit}
.strand a i{flex:none;width:8px;height:8px;margin-right:2.5px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55),currentColor 62%);opacity:.5;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),opacity .4s,background .4s,box-shadow .4s}
.strand a:hover i{opacity:.9}
.strand a.on i{width:13px;height:13px;margin-right:0;opacity:1;background:radial-gradient(circle at 34% 30%,#ffd2bf,#d0563b 58%,#8f2a17);
  box-shadow:0 0 0 3px rgba(224,134,106,.16),0 0 16px rgba(224,134,106,.45)}
.strand a span{font:400 8.5px "FragmentMono",monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(6px);
  pointer-events:none;transition:opacity .35s,transform .35s}
.strand:hover a span,.strand a:focus-visible span{opacity:.85;transform:none}
.strand a.on span{opacity:.85;transform:none}
.strand:not(:hover) a.on span{opacity:0}

/* ═══ visual-direction page ═══════════════════════════════════════════════════════ */
.md{padding:6vh var(--col) 16vh;max-width:1240px;margin:0 auto}
.md-h{margin:12vh 0 4vh;font-size:clamp(28px,2.6vw,42px);line-height:1.05;letter-spacing:-.02em}
.md-h:first-child{margin-top:4vh}
.md-note{max-width:44em;margin:-1vh 0 4vh;font-size:15px;line-height:1.65;color:var(--ink2)}
.md-took{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.md-took li{padding:28px 26px 30px;background:var(--paper)}
.md-took b{display:block;font-size:24px;letter-spacing:.2em}
.md-took p{margin-top:14px;font-size:14px;line-height:1.6;color:var(--ink2)}
.md-took+.md-note{margin-top:3vh}
.md-pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:28px 22px}
.md-pal span{display:block;height:92px;margin-bottom:12px;box-shadow:inset 0 0 0 1px var(--line)}
.md-pal b{font-size:19px;letter-spacing:.2em}
.md-pal em{display:block;margin-top:4px;font:400 10px "FragmentMono",monospace;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.md-pal p{margin-top:6px;font-size:13px;line-height:1.5;color:var(--ink2)}
.md-rh{display:flex;flex-direction:column;max-width:560px;border:1px solid var(--line)}
.md-rh li{display:flex;align-items:center;height:44px;padding:0 18px;font:400 10px "FragmentMono",monospace;letter-spacing:.14em;text-transform:uppercase}
.md-rh .t-ink{background:#0b0908;color:#ece5d7}.md-rh .t-paper{background:#f2ece1}.md-rh .t-silk{background:#e9e1d2}
.md-rh .t-mist{background:linear-gradient(180deg,#0b0908,#4b6a64 40%,#d3dbd1 70%,#f2ece1);color:#1d1915;height:88px}
.md-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:44px 36px}
.md-list li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start}
.md-list figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#0b0908}
.md-list figure img{width:100%;height:100%;object-fit:cover}
.md-list .mono{font-size:9.5px;color:var(--mute)}
.md-list h3{margin-top:8px;font-size:19px;line-height:1.25}
.md-list p:not(.mono){margin-top:8px;font-size:13px;line-height:1.55;color:var(--ink2)}

/* ═══ narrow screens: readable, not yet designed ═════════════════════════════════ */
@media (max-width:900px){
  .gc15{--bar-t:96px;--bar-b:230px}
  .h15-full{height:92vh;min-height:620px}
  .h15-text{left:22px;right:22px;top:auto;bottom:16vh;transform:none;width:auto}
  .h15-h{font-size:46px}
  .h15-shade{background:linear-gradient(0deg,rgba(11,9,8,.92) 0%,rgba(11,9,8,.55) 48%,rgba(11,9,8,0) 72%)}
  .h15-full .subt,.h15-full .di-chip{display:none}
  .h15-down{display:none}
  .h15-box{padding:96px 22px 8vh}
  .h15-boxtext{grid-template-columns:1fr;gap:20px}
  .gc15 .b15{height:120vh;min-height:760px}
  .b15-in{padding:0 22px}
  .gc15 .s15-still{aspect-ratio:4/3}
  .a15-top{left:22px;right:22px;padding-bottom:10px}
  .a15-nav{display:none}
  .a15-bot{left:22px;right:22px;flex-direction:column;align-items:stretch;gap:12px;padding:18px 0}
  .a15-infos{flex:none;height:96px}.a15-cards{width:auto;height:90px}
  .a15-t.left{left:22px}
  .a15-zh{font-size:40px}
  .strand{display:none}
  .md-list{grid-template-columns:1fr}.md-list li{grid-template-columns:120px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .h15-bars i{animation:none;height:4.6vh}
  .h15-frame{animation:none;clip-path:none}
  .h15 .ln>span,.h15-eb,.h15-sub,.h15-cta,.h15-full .subt,.h15-full .di-chip,.h15-down,.h15-frame .subt{animation:none;opacity:1;transform:none}
  .h15-down i,.gc15 .a15::after,.gc15 .h15s::after{animation:none}
  .a15-t .ch{transition:none}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   gc-v1.6 · one landscape scroll. Grounds: 绢 silk for reading, 墨 ink and 檀 sandalwood for photographs, 黛 for water.
   Wherever the page turns between dark and light it passes through a picture (hills, branch, conifers, willows, water)
   whose quiet part carries the words.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.gc16,.gc16-doc{--silk:#efe7d6;--silk2:#e6dbc4;--tan:#15110e;--dai:#0b1312;--foot:#0b1312;--shilv:#7f9e93}
html[data-ct="ink"] .gc16{--foot:#191612}

/* opening: the words sit on whichever side the photograph leaves dark */
.h16 .h15-h{font-size:clamp(44px,4.4vw,78px)}
.h16.side-left .h15-text{width:min(36vw,560px)}
.h16.side-right .h15-text{left:auto;right:var(--col);width:min(28vw,450px)}
.h16.side-right .h15-h{font-size:clamp(42px,4.1vw,72px)}
.h16.side-right .h15-shade{background:linear-gradient(180deg,rgba(11,9,8,.62) 0%,rgba(11,9,8,0) 15%),
  linear-gradient(270deg,rgba(11,9,8,.84) 0%,rgba(11,9,8,.46) 26%,rgba(11,9,8,0) 44%),
  linear-gradient(0deg,rgba(11,9,8,.55) 0%,rgba(11,9,8,0) 26%)}
.h16.side-left .h15-shade{background:linear-gradient(180deg,rgba(11,9,8,.62) 0%,rgba(11,9,8,0) 15%),
  linear-gradient(90deg,rgba(11,9,8,.78) 0%,rgba(11,9,8,.4) 28%,rgba(11,9,8,0) 44%),
  linear-gradient(0deg,rgba(11,9,8,.55) 0%,rgba(11,9,8,0) 26%)}
.h16-piece{position:absolute;z-index:4;right:var(--col);bottom:calc(4.6vh + 18px);display:flex;align-items:center;gap:12px;padding:7px 16px 7px 7px;
  border:1px solid rgba(236,229,215,.2);background:rgba(11,9,8,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--moon);
  opacity:0;animation:gh-fade 1s 2.4s forwards;transition:border-color .4s,background .4s}
.h16-piece:hover{border-color:rgba(236,229,215,.5);background:rgba(11,9,8,.55)}
.h16-th{display:block;width:44px;height:44px;overflow:hidden;background:#000}
.h16-th img{width:100%;height:100%;object-fit:cover}
.h16-pt{display:flex;flex-direction:column;gap:3px}
.h16-pt .mono{font-size:8.5px;color:rgba(236,229,215,.6)}
.h16-pt b{font-weight:300;font-size:16px;letter-spacing:.16em}
.h16-piece>i{font-style:normal;color:var(--moon2);margin-left:6px;transition:transform .4s}
.h16-piece:hover>i{transform:translateX(4px)}

/* bridge: its mist now settles into silk */
.gc16 .b15{background:var(--silk)}
.gc16 .b15-veil{background:linear-gradient(180deg,var(--ink0) 0%,rgba(11,9,8,.55) 6%,rgba(11,9,8,0) 15%),
  radial-gradient(ellipse 52% 20% at 50% 27%,rgba(214,222,212,.62),rgba(214,222,212,0)),
  linear-gradient(0deg,var(--silk) 0%,rgba(239,231,214,.94) 12%,rgba(239,231,214,.45) 26%,rgba(239,231,214,0) 40%)}

/* Series 01: written into the sky beside a branch of red fruit */
.gc16 .fc.s16{padding:0 var(--col) 14vh;background:var(--silk)}
.s16-head{position:relative;height:96vh;min-height:700px;max-height:1020px;margin:0 calc(-1 * var(--col)) 8vh}
.s16-land{position:absolute;inset:0;background:var(--silk)}
.s16-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--silk) 0%,rgba(239,231,214,.72) 14%,rgba(239,231,214,0) 40%),
             linear-gradient(0deg,var(--silk) 0%,rgba(239,231,214,.9) 10%,rgba(239,231,214,0) 34%),
             linear-gradient(90deg,rgba(239,231,214,.6) 0%,rgba(239,231,214,.25) 30%,rgba(239,231,214,0) 50%)}
.s16-text{position:absolute;z-index:3;left:var(--col);top:22%;width:min(46vw,680px)}
.s16 .gf-title{margin-top:22px}
.s16 .fc-begins{flex-direction:row;align-items:baseline;gap:12px;margin:30px 0 22px}
.s16 .fc-begins b{font-size:clamp(20px,1.6vw,26px)}
.s16 .gf-cta{justify-content:flex-start}
.s16 .gf-path{display:inline-block;margin-top:20px}
.s16 .gf-one{left:0;right:auto}
.s16-credit{position:absolute;z-index:3;left:var(--col);bottom:12%;font-size:8.5px;letter-spacing:.06em;text-transform:none;color:rgba(29,25,21,.42)}
.s16-text>*{opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.s16-head.in .s16-text>*{opacity:1;transform:none}
.s16-head.in .s16-text>*:nth-child(2){transition-delay:.12s}.s16-head.in .s16-text>*:nth-child(3){transition-delay:.24s}
.s16-head.in .s16-text>*:nth-child(4){transition-delay:.36s}.s16-head.in .s16-text>*:nth-child(5){transition-delay:.48s}
.s16-head.in .s16-text>*:nth-child(n+6){transition-delay:.6s}

/* every piece: dusk comes down through the conifers; the grid stays on the photographs' own black */
.gc16 .gpcs.p16{padding:0 0 15vh;background:var(--ink0)}
.p16-head{position:relative;height:100vh;min-height:720px;max-height:1060px;margin-bottom:6vh}
.p16-land{position:absolute;inset:0;background:var(--ink0)}
.p16-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--silk) 0%,rgba(239,231,214,.55) 8%,rgba(239,231,214,0) 24%),
             linear-gradient(0deg,var(--ink0) 0%,rgba(12,11,10,.8) 20%,rgba(12,11,10,0) 48%)}
.gc16 .p16-head .gp-head{position:absolute;z-index:3;left:0;right:0;bottom:8vh;margin:0;padding:0 var(--col)}
.p16-credit{position:absolute;z-index:3;right:var(--col);top:27%;font-size:8.5px;letter-spacing:.06em;text-transform:none;color:rgba(29,25,21,.45)}
.p16-head .gp-head>*{opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.p16-head.in .gp-head>*{opacity:1;transform:none}
.p16-head.in .gp-head>*+*{transition-delay:.2s}

/* Carry / Give: on sandalwood; each photograph has no frame and dissolves into the ground */
.gc16 .gw.w16{padding:15vh var(--col) 4vh;background:linear-gradient(180deg,var(--ink0) 0%,var(--tan) 24%);color:var(--moon)}
.w16 .gw-head .mono{color:var(--dim)}
.w16 .gw-head h2{color:#f4ede1}
.w16 .gw-head h2 em,.w16 .gw-side h3 em{color:var(--em-d)}
.w16 .gw-lead{color:var(--moon2)}
.gc16 .w16 .gw-side figure.w16-fig{position:relative;aspect-ratio:16/11;margin:0 -2vw 18px;overflow:visible;background:none}
.w16-fig .cine{position:absolute;inset:0;background:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent 100%);
          mask-composite:intersect}
.w16-fig .cine>img{transition:transform 1.8s var(--ease)}
.gc16 .w16 .gw-side:hover .w16-fig .cine img,.gc16 .w16 .gw-side:hover .w16-fig .cine canvas{transform:scale(1.03)}
.w16 .gw-lab{color:var(--dim)}
.w16 .gw-side h3{color:#f4ede1}
.w16 .gw-line{color:var(--moon2)}
.w16 .gw-themes{border-top-color:rgba(236,229,215,.42)}
.w16 .gw-themes a{border-bottom-color:var(--hair);color:var(--moon)}
.w16 .gw-themes a i{color:var(--moon2)}
.w16 .gw-foot .lnk{color:var(--moon);border-color:rgba(236,229,215,.42)}
.w16 .gw-wk{color:var(--dim)}

/* How a piece begins: the willows come down from the dark; the title is written into the mist over the lake */
.gc16 .gm.m16{padding:0 var(--col) 13vh;background:var(--silk)}
.m16-head{position:relative;height:100vh;min-height:720px;max-height:1060px;margin:0 calc(-1 * var(--col)) 4vh}
.m16-land{position:absolute;inset:0;background:var(--silk)}
.m16-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--tan) 0%,rgba(21,17,14,.82) 9%,rgba(21,17,14,.35) 22%,rgba(21,17,14,0) 34%),
             radial-gradient(ellipse 30% 16% at 50% 27%,rgba(239,231,214,.5),rgba(239,231,214,0)),
             linear-gradient(0deg,var(--silk) 0%,rgba(239,231,214,.92) 10%,rgba(239,231,214,0) 32%)}
.gc16 .m16-head .gm-title{position:absolute;z-index:3;left:0;right:0;top:22%;text-align:center;color:#161311}
.m16-head .gm-title .w{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(7px);
  transition:opacity .9s var(--ease) calc(var(--i) * 70ms),transform 1.1s var(--ease) calc(var(--i) * 70ms),filter 1.1s var(--ease) calc(var(--i) * 70ms)}
.m16-head.in .gm-title .w{opacity:1;transform:none;filter:none}
.m16-credit{position:absolute;z-index:3;right:var(--col);bottom:14%;font-size:8.5px;letter-spacing:.06em;text-transform:none;color:rgba(29,25,21,.42)}
.gc16 .m16-steps{margin-top:0}
.m16-steps .gm-step2>.var{position:relative}
.m16-pic,.m16-art{aspect-ratio:4/5}
.gc16 .m16-pic>img{object-fit:cover;transform:none}
.gc16 .m16-art{display:grid;place-items:center;background:#f6f0e3;box-shadow:inset 0 0 0 1px rgba(42,34,28,.12)}
.gc16 .m16-art svg{width:86%;height:auto}
.gc16 .m16-art em{background:none;color:var(--mute)}
/* the three steps hang on one cord, with a bead between each */
.m16-steps .gm-step2:not(:last-child)>.var::after{content:"";position:absolute;z-index:2;top:50%;left:100%;width:3.2vw;height:1px;background:rgba(42,34,28,.35)}
.m16-steps .gm-step2:not(:last-child)>.var::before{content:"";position:absolute;z-index:3;top:calc(50% - 5px);left:calc(100% + 1.6vw - 5px);width:10px;height:10px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#b08a68,#6b4a33 60%,#3a271a)}
.m16-steps .gm-step2:nth-child(2)>.var::before{background:radial-gradient(circle at 35% 30%,#ec7a5c,#b63d29 58%,#6e1d12)}
.m16-more{margin-top:8vh;text-align:center}

/* Before you choose: old silk; the axis between the two columns reads like the seam between two couplet scrolls */
.gc16 .gpr.r16{padding:14vh var(--col) 15vh;background:linear-gradient(180deg,var(--silk) 0%,var(--silk2) 34%)}
.r16 .gpr-axis{background:linear-gradient(180deg,rgba(182,61,41,0),rgba(182,61,41,.42) 18%,rgba(182,61,41,.42) 82%,rgba(182,61,41,0))}
.r16 .gpr-tl li::before{background:var(--silk2)}

/* closing: the scroll ends in water, as it began in hills */
.c16-pics,.c16-pics>.var,.c16-pics .cine{position:absolute;inset:0}
.gc16 .c16{background:var(--foot)}
.gc16 .c16 .c15-veil{background:radial-gradient(ellipse 44% 38% at 50% 52%,rgba(6,9,9,.74),rgba(6,9,9,.26) 72%,rgba(6,9,9,0)),
  linear-gradient(180deg,var(--silk2) 0%,rgba(230,219,196,.5) 6%,rgba(230,219,196,0) 20%,rgba(0,0,0,0) 66%,var(--foot) 100%)}
.gc16 .gfoot{background:var(--foot)}

/* visual-direction page */
.gc16-doc .md-rh .t-dusk{background:linear-gradient(180deg,#efe7d6,#3a4440 50%,#0c0b0a);color:#ece5d7;height:88px}
.gc16-doc .md-rh .t-dawn{background:linear-gradient(180deg,#15110e,#56635e 50%,#efe7d6);color:#1d1915;height:88px}
.gc16-doc .md-rh .t-silk{background:#efe7d6}.gc16-doc .md-rh .t-old{background:#e6dbc4}
.gc16-doc .md-rh .t-tan{background:#15110e;color:#ece5d7}.gc16-doc .md-rh .t-dai{background:#0b1312;color:#ece5d7}
.gc16-doc .md-rh .t-mist{background:linear-gradient(180deg,#0b0908,#4b6a64 40%,#d3dbd1 70%,#efe7d6)}

@media (max-width:900px){
  .h16 .h15-text,.h16.side-left .h15-text,.h16.side-right .h15-text{left:22px;right:22px;width:auto}
  .h16 .h15-h,.h16.side-right .h15-h{font-size:44px}
  .h16 .cine img{object-position:50% 40% !important}
  .h16{background:var(--ink0)}
  .h16.h15-full .h15-cine{bottom:38%}
  .h16 .h15-text{bottom:7vh}
  .h16.side-right .h15-shade,.h16.side-left .h15-shade{background:linear-gradient(180deg,rgba(11,9,8,.55) 0%,rgba(11,9,8,0) 12%),
    linear-gradient(0deg,var(--ink0) 0%,var(--ink0) 38%,rgba(11,9,8,.6) 46%,rgba(11,9,8,0) 60%)}
  .h16-piece{display:none}
  .s16-head,.p16-head,.m16-head{height:82vh;min-height:560px}
  .s16-head,.m16-head{margin-left:-22px;margin-right:-22px}
  .gc16 .fc.s16,.gc16 .gm.m16{padding-left:22px;padding-right:22px}
  .s16-text{left:22px;right:22px;width:auto;top:16%}
  .gc16 .p16-head .gp-head{padding:0 22px}
  .s16-credit,.p16-credit,.m16-credit{display:none}
  .gc16 .w16 .gw-side figure.w16-fig{margin:0 0 18px}
  .m16-steps .gm-step2>.var::before,.m16-steps .gm-step2>.var::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .h16-piece{animation:none;opacity:1}
  .s16-text>*,.p16-head .gp-head>*,.m16-head .gm-title .w{transition:none;opacity:1;transform:none;filter:none}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   gc-v1.7 · paper again. The page reads on 宣 paper as v2-A, v3 and v3.2 did; landscapes stay, in light ink, behind
   the words of the bridge, the Series and “How a piece begins”. Only the closing water and the footer are dark.
   Every section is sized to be read on one screen at 1440 × 900 (header 89 px).
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.gc17{--p2:#e9e1d2;background:var(--paper)}
.gc17 .zh{font-weight:400}

/* 1 opening · claude-v3.2's hero; the photograph also leads to the piece */
.gc17 .hero{position:relative;background:var(--paper)}
.gc17 .hero-text{max-width:42vw}
.gc17 .hero .promise{max-width:30em}
.gc17 .hero-photo>a{position:absolute;inset:0;display:block}
.gc17 .hero-photo figcaption .zh{font-family:"NotoSerifSC15","Noto Serif SC",serif}
/* the header button sits over the photograph at the top right: give it paper to stand on */
.gc17 .hd:not(.dk) .pill{background:var(--paper)}

/* bridge · pale hills under the words, paper above and below */
.gc17 .b15.b17{height:64vh;min-height:500px;max-height:620px;background:var(--paper)}
.gc17 .b17 .b15-veil{background:linear-gradient(180deg,var(--paper) 0%,rgba(242,236,225,.5) 18%,rgba(242,236,225,.12) 42%,rgba(242,236,225,.3) 70%,var(--paper) 100%),
  radial-gradient(ellipse 46% 34% at 50% 48%,rgba(242,236,225,.72),rgba(242,236,225,0))}
.gc17 .b17 .b15-in{top:50%;transform:translateY(-50%)}
.gc17 .b17 .gb-line{display:none}
.gc17 .b17 .gb-h{font-size:clamp(36px,3.5vw,56px)}
.gc17 .b17 .gb-t{margin-top:18px}

/* 2 Series · the whole issue on one screen: five lines in the mist beside the branch, then the four columns */
.gc17 .gf{background:var(--paper)}
.gc17 .fc.s17{position:relative;overflow:hidden;padding:6vh var(--col) 5vh;background:var(--paper)}
.s17-land,.s17-veil{position:absolute;top:0;right:0;left:34%;height:46%}
.s17-land .cine{position:absolute;inset:0;background:var(--paper)}
.s17-veil{z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,rgba(242,236,225,.4) 18%,rgba(242,236,225,0) 40%),
             linear-gradient(0deg,var(--paper) 0%,rgba(242,236,225,.75) 14%,rgba(242,236,225,0) 40%),
             linear-gradient(180deg,var(--paper) 0%,rgba(242,236,225,0) 16%)}
.s17-head{position:relative;z-index:2;max-width:600px}
.s17-eb{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:10px}
.s17-eb i{width:7px;height:7px;border-radius:50%;background:var(--sa)}
.gc17 .s17 .gf-title{margin-top:16px;font-size:clamp(40px,3.5vw,56px);line-height:1.02;letter-spacing:-.025em}
.gc17 .s17 .gf-title em{color:var(--sa)}
.s17-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:18px}
.s17-name b.zh{font-size:19px;letter-spacing:.18em;color:var(--ink)}
.s17-name>span:not(.mono){font-family:"Sentient",serif;font-style:italic;font-weight:300;font-size:16px;color:var(--ink2)}
.s17-name .mono{font-size:9.5px;color:var(--mute)}
.gc17 .s17 .gf-intro{margin-top:6px;max-width:30em;font-family:"Sentient",serif;font-weight:300;font-size:18px;line-height:1.45;color:var(--ink2)}
.s17-cta{display:flex;align-items:center;gap:28px;margin-top:22px}
.s17-cta .gf-whole{padding:0;background:none;border:0;border-bottom:1px solid currentColor;font:inherit;font-size:13px;cursor:pointer}
.s17 .gf-one{left:0;right:auto}
.gc17 .s17-cols{position:relative;z-index:2;margin-top:4.5vh;padding-top:20px;border-top:1px solid var(--line)}
.gc17 .s17 .fc-col{padding:0 22px}
.gc17 .s17 .fc-col::before,.gc17 .s17 .fc-col:last-child::after{top:-20px}
.gc17 .s17 .fc-col h3{margin-top:10px;font-size:clamp(18px,1.4vw,21px);line-height:1.2}
.gc17 .s17 .fc-poem{height:132px;margin-top:14px;font-size:15px;line-height:2}
.gc17 .s17 .fc-src{margin-top:6px}
.gc17 .s17 .fc-t{margin-top:8px;font-size:13px;line-height:1.5}
.gc17 .s17 .fc-big{margin-top:12px;font-size:clamp(16px,1.2vw,18px);line-height:1.5}
.gc17 .s17 .fc-plate{margin-top:12px}
.gc17 .s17 .fc-notes{margin-top:6px}
.gc17 .s17 .fc-notes li{padding:4px 0;font-size:12px;line-height:1.4}
.gc17 .s17 .fc-q{margin-top:12px;font-size:clamp(24px,1.9vw,30px)}
.gc17 .s17 .fc-zh{margin-top:6px}
.gc17 .s17-sample .fc-img.wide{max-height:170px}
.gc17 .s17 .k-pair .fc-fig{display:inline-block;width:calc(50% - 6px);margin-top:12px;vertical-align:top}
.gc17 .s17 .k-pair .fc-fig+.fc-fig{margin-left:12px}
.gc17 .s17-sample .fc-thought{margin-top:12px;font-size:17px}

/* 3 every piece · on old paper, two rows of six; the photographs' own black frames the pieces */
.gc17 .gpcs.p17{padding:5.5vh 0 4.5vh;background:var(--p2)}
.gc17 .p17 .gp-head{margin-bottom:3.5vh}
.gc17 .p17 .gc-frame{aspect-ratio:1/1 !important}
.gc17 .p17 .gp-head h2{font-size:clamp(38px,3.4vw,54px)}
.gc17 .p17 .pg-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 16px}
.gc17 .p17 .gc-info{margin-top:8px}
.gc17 .p17 .gc-info b{font-size:15px;line-height:1.3}
.gc17 .p17 .gc-info b.col-name{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.gc17 .p17 .gc-info em{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px}
.gc17 .p17 .pg-foot{margin-top:18px}

/* 4 Carry / Give · the act each side stands for: a piece kept on the wrist, a parcel being tied */
.gc17 .gw.w17{padding:9vh var(--col) 8vh;background:var(--paper)}
.gc17 .w17 .gw-head{margin-bottom:5.5vh}
.gc17 .w17 .gw-head h2{margin-top:14px;font-size:clamp(36px,3.4vw,54px);line-height:1.02}
.gc17 .w17 .gw-lead{margin-top:14px;font-size:clamp(16px,1.2vw,19px)}
.gc17 .w17 .gw-a{grid-template-rows:none;column-gap:4.5vw}
.gc17 .w17-side{display:grid;grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:0 26px;align-items:start}
.gc17 .w17 .gw-side figure.w17-fig{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--p2)}
.gc17 .w17-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.gc17 .w17-side:hover .w17-fig img{transform:scale(1.03)}
.gc17 .w17 .gw-side h3{margin-top:12px;font-size:clamp(26px,2.2vw,36px)}
.gc17 .w17 .gw-line{margin-top:12px;font-size:14.5px;line-height:1.55}
.gc17 .w17 .gw-themes{margin-top:18px}
.gc17 .w17 .gw-themes a{min-height:44px;padding:8px 0;font-size:17px}
.gc17 .w17-tx>.lnk{display:inline-block;margin-top:18px}

/* 5 How a piece begins · a band of willows for the title; the questions stay, each example brings three pictures */
.gc17 .gm.m17{padding:0 var(--col) 6vh;background:var(--paper)}
.m17-head{position:relative;display:grid;place-items:center;height:28vh;min-height:220px;max-height:280px;margin:0 calc(-1 * var(--col))}
.gc17 .m17-land{position:absolute;inset:0;background:var(--paper)}
.m17-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--paper) 0%,rgba(242,236,225,.1) 26%,rgba(242,236,225,.1) 62%,var(--paper) 100%),
             radial-gradient(ellipse 30% 30% at 50% 52%,rgba(242,236,225,.7),rgba(242,236,225,0))}
.gc17 .m17 .gm-title{position:relative;z-index:2;text-align:center;font-size:clamp(42px,4.2vw,68px)}
.gc17 .m17-a{margin-top:1vh;padding-top:0;border-top:0}
.m17-qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 3.2vw;max-width:1140px;margin:22px auto 0;padding-top:16px;border-top:1px solid var(--line)}
.m17-qs .mono{font-size:9.5px;color:var(--verm)}
.m17-qs h3{margin-top:6px;font-size:clamp(18px,1.4vw,21px);line-height:1.2}
.gc17 .m17-cases{max-width:1140px;margin:16px auto 0}
.gc17 .m17-case{gap:0 3.2vw}
.m17-fig{margin:0}
.gc17 .gm-case.on .m17-fig{animation:gw-up .9s var(--ease) both}
.gc17 .gm-case.on .m17-fig:nth-child(2){animation-delay:.1s}.gc17 .gm-case.on .m17-fig:nth-child(3){animation-delay:.2s}
.m17-pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--p2)}
.m17-pic>img{width:100%;height:100%;object-fit:cover}
.m17-fig figcaption{margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink2)}
.m17-und figcaption{font-family:"Sentient",serif;font-weight:300;font-size:17px;line-height:1.4;color:var(--ink)}
.m17-note{display:block;margin-top:6px;font-size:12px;color:var(--mute)}
.m17-fig figcaption .lnk{display:table;margin-top:8px;white-space:nowrap}
.m17-poem{display:grid;place-items:center;background:var(--card)}
.m17-poem p{writing-mode:vertical-rl;font-size:19px;line-height:2.1;letter-spacing:.24em;color:var(--ink)}
.m17-quote{display:grid;place-items:center;padding:12%;background:var(--card)}
.m17-quote p{font:italic 300 clamp(18px,1.6vw,24px)/1.35 "Sentient",serif;text-align:center;color:var(--ink)}
.m17-more{margin-top:3.5vh;text-align:center}

/* 6 Before you choose · old paper, tighter */
.gc17 .gpr.r16{padding:9vh var(--col) 9vh;background:var(--p2)}
.gc17 .r16 .gpr-m{margin-top:5vh}
.gc17 .r16 .gpr-tl{margin-top:5.5vh}
.gc17 .r16 .gpr-tl li::before{background:var(--p2)}

/* closing · water, shorter; dark by default, so the footer follows on */
.gc17 .c15.c17{height:62vh;min-height:470px;max-height:600px}
.gc17 .c17 .c15-veil{background:radial-gradient(ellipse 44% 38% at 50% 52%,rgba(6,9,9,.74),rgba(6,9,9,.26) 72%,rgba(6,9,9,0)),
  linear-gradient(180deg,var(--p2) 0%,rgba(233,225,210,.45) 7%,rgba(233,225,210,0) 22%,rgba(0,0,0,0) 66%,var(--foot) 100%)}
html[data-ct="light"] .gc17 .c17{background:var(--paper);color:var(--ink)}
html[data-ct="light"] .gc17 .c17 .c15-veil{background:radial-gradient(ellipse 42% 36% at 50% 52%,rgba(242,236,225,.86),rgba(242,236,225,.4) 72%,rgba(242,236,225,0)),
  linear-gradient(180deg,var(--p2) 0%,rgba(233,225,210,0) 20%,rgba(242,236,225,0) 74%,var(--paper) 100%)}
html[data-ct="light"] .gc17 .c17 .c15-in>.mono{color:var(--mute)}
html[data-ct="light"] .gc17 .c17 .c15-in h2{color:var(--ink)}
html[data-ct="light"] .gc17 .c17 .c15-in h2 em{color:var(--em)}
html[data-ct="light"] .gc17 .c17 .c15-form input{background:rgba(251,247,239,.7);border-color:rgba(29,25,21,.22);color:var(--ink)}
html[data-ct="light"] .gc17 .c17 .c15-form input::placeholder{color:var(--mute)}
html[data-ct="light"] .gc17 .c17 .c15-form button{background:var(--ink);color:var(--paper)}
html[data-ct="light"] .gc17 .c17 .fine{color:var(--mute)}

/* visual-direction page */
.gc17-doc .md-rh .t-p2{background:#e9e1d2}.gc17-doc .md-rh .t-hills{background:linear-gradient(180deg,#f2ece1,#9fb0aa 50%,#f2ece1)}
.gc17-doc .md-rh .t-water{background:linear-gradient(180deg,#e9e1d2,#0b1312 60%);color:#ece5d7;height:88px}

@media (max-width:900px){
  .gc17 .hero{padding-top:72px}
  .gc17 .hero-text{max-width:none}
  .gc17 .b15.b17{height:72vh}
  .gc17 .fc.s17{padding:0 22px 6vh}
  .s17-land,.s17-veil{left:0;right:0;height:190px}
  .s17-head{padding-top:176px}
  .gc17 .s17-cols{grid-template-columns:1fr;gap:28px}
  .gc17 .p17 .pg-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gc17 .gpcs.p17 .pg-c:nth-child(n+7){display:none}
  .gc17 .gpcs.p17 .pg.open .pg-c{display:block}
  .gc17 .gw.w17{padding:8vh 22px}
  .gc17 .w17 .gw-a{grid-template-columns:1fr;row-gap:44px}
  .gc17 .w17-side{grid-template-columns:1fr;gap:18px}
  .gc17 .w17 .gw-side figure.w17-fig{aspect-ratio:4/3}
  .gc17 .gm.m17{padding:0 22px 8vh}
  .m17-head{margin:0 -22px}
  .m17-qs{display:none}
  .gc17 .m17-case{grid-template-columns:1fr;gap:22px}
  .gc17 .m17-fig::before{display:block;margin-bottom:8px;font:400 9.5px "FragmentMono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--verm)}
  .gc17 .m17-fig:nth-child(1)::before{content:"01 · Where it began"}
  .gc17 .m17-fig:nth-child(2)::before{content:"02 · What it made us feel"}
  .gc17 .m17-fig:nth-child(3)::before{content:"03 · The piece"}
  .m17-pic{aspect-ratio:4/3}
  .gc17 .gpr.r16{padding:8vh 22px}
}