:root{
  --paper:#FFFFFF;
  --ink:#111111;
  --growth:#4C7A3F;
  --blue:#0000FF;
  --font:'neue-haas-unica','Helvetica Neue',Helvetica,Arial,'PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif;
  --text:15.5px;
  --gutter:10px;
  --colgap:clamp(20px,3vw,44px);
  --key:176px;
  --band:clamp(48px,8vw,120px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--text);line-height:1.55;font-weight:400;padding-bottom:0;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;cursor:pointer}
a:hover{color:var(--blue);text-decoration-thickness:2px}
p{margin:0 0 1em;max-width:62ch}
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}

/* flat titles + the label voice */
.pagehead{padding-top:var(--band);display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline}
.pagehead h1{font-size:1rem;margin:0;text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.stamp{text-transform:uppercase;font-size:.74rem;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.spec .k,.credits .k,.tsg .k{text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;margin-right:6px}
.no,.spec,.capline{font-variant-numeric:tabular-nums}
.fine{font-size:.84rem}

/* the setout */
.row{display:grid;grid-template-columns:var(--key) 1fr;gap:6px var(--colgap);padding-top:var(--band);padding-bottom:0}
.row+.row{padding-top:var(--band)}
.row--tight{padding-top:calc(var(--band)*.5)}
.key .k-links{margin-top:2px}
.key .k-links a{text-decoration:none}
.key .k-links a:hover{text-decoration:underline}
.key .spec div{margin-bottom:1px}
@media(max-width:719px){
  .row{grid-template-columns:1fr;gap:12px 0}
  .key{display:flex;flex-wrap:wrap;gap:2px 14px}
  .key .spec{display:contents}
}

/* register entries */
.reg{list-style:none;margin:0;padding:0}
.reg li{display:block;padding:4.5px 0}
/* library register: single left column, covers appear on hover */
.reg--lib{max-width:104ch}
.reg--lib li{grid-template-columns:1fr;padding:0 0 35px}
@media(max-width:719px){}

/* hover peek: the work appears in the white space on the right */
@media(max-width:899px){}

/* the status colour */
.live{color:var(--growth);font-weight:500;animation:breathe 4s ease-in-out infinite}
li:nth-child(2) .live,figure:nth-child(2) .live{animation-delay:.7s}
li:nth-child(3) .live,figure:nth-child(3) .live{animation-delay:1.5s}
li:nth-child(4) .live,figure:nth-child(4) .live{animation-delay:2.2s}
li:nth-child(5) .live,figure:nth-child(5) .live{animation-delay:2.9s}
li:nth-child(6) .live{animation-delay:.4s}
li:nth-child(7) .live{animation-delay:1.9s}
li:nth-child(8) .live{animation-delay:1.1s}
li:nth-child(9) .live{animation-delay:2.6s}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.live{animation:none}}

/* interior streams: centred singles, edge-to-edge pairs */
.stream{padding-top:calc(var(--band)*.7)}
.stream>*{margin:0 0 clamp(48px,7vw,96px)}
figure{margin:0}
.fw100{width:100%}
.fw70{width:70%;margin-left:auto;margin-right:auto}
.fw55{width:55%;margin-left:auto;margin-right:auto}
@media(max-width:719px){.fw55{width:86%}}
.pair{display:flex;gap:var(--gutter)}
.pair>figure{flex:1 1 0;min-width:0}
.capline,figcaption{font-size:.84rem;font-weight:400;line-height:1.45;max-width:none}
figcaption{margin-top:8px}
.ph{background:#F5F5F5;display:block;overflow:hidden}
.ph img{width:100%;height:auto;display:block}

/* shop grid */
/* project split: text left, carousel right */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--colgap);align-items:start}
.split-l .row{padding-top:calc(var(--band)*.55)}
.split-r{position:fixed;top:0;right:0;width:54%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 3vw 0 12px;box-sizing:border-box;z-index:20;pointer-events:none}
.caro{display:flex;align-items:center;justify-content:center;max-width:100%;width:100%}
.caro img{display:none;background:none;flex:0 0 auto;object-fit:contain}
.caro img.on{display:block}
.caro img.land{width:100%;height:auto;max-width:100%;max-height:84vh;object-fit:contain}
.caro img.port{height:80vh;width:auto;max-width:100%}
.caro-meta{text-align:center;max-width:100%}
.caro-cap{font-size:.84rem;margin:0;padding:0}
.caro-num{font-size:.84rem;font-variant-numeric:tabular-nums;margin:0 0 2px;padding:0}
.arw{padding:0 8px;opacity:.55}
@media(max-width:899px){
  .split{display:block}
  /* out of the way until the thumb asks for them */
  .split-r{position:fixed;inset:0;width:auto;height:auto;display:none;padding:0;
    pointer-events:none;transform:none !important;background:none;z-index:60}
  .split-r.touching{display:flex;flex-direction:column;align-items:center;justify-content:center}
  .caro{display:flex;align-items:center;justify-content:center;width:100%;max-width:100%}
  /* a portrait keeps 15% of the screen either side, a landscape 10% */
  .caro img{width:auto;height:auto;max-height:76vh;margin:0}
  .caro img.port{width:70vw;height:auto;max-height:78vh}
  .caro img.land{width:80vw;height:auto}
  .caro--cover img{max-width:60vw}
  .caro-meta{position:absolute;left:0;right:0;bottom:12vh;text-align:center;padding:0 8vw}
  .caro-cap,.caro-num{display:block;background:var(--paper);padding:2px 6px;display:inline-block}
  /* the hover preview follows the same measure */
}

/* test, seed, grow */
.tsg{max-width:62ch}
.tsg>div{margin-bottom:4.5px}

/* threads: associative trails */
.threads{list-style:none;margin:0;padding:0;max-width:62ch}
.threads li{padding:4.5px 0}

/* film-style credits */
.credits{columns:2;column-gap:var(--colgap)}
.credits div{break-inside:avoid;margin-bottom:3px}
@media(max-width:719px){.credits{columns:1}}

input[type=email]{font-family:var(--font);font-size:var(--text);color:var(--ink);background:transparent;border:1px solid var(--ink);padding:9px 12px;border-radius:0;-webkit-appearance:none;width:min(320px,100%)}


/* header */
.site-head{background:var(--paper);display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:26px;padding-top:10px;padding-bottom:8px}
.site-head a{text-decoration:none}
.site-head .mark{font-weight:900;font-size:1.45rem;line-height:1;letter-spacing:-0.008em}
.site-head nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 18px}
.site-head nav a{text-transform:uppercase;letter-spacing:.05em;font-size:.82rem}
.site-head nav a.on{color:var(--blue);text-decoration:underline}
.langs{display:inline-flex;gap:10px;margin-left:10px}
.langs a{font-size:.78rem;letter-spacing:.05em}
.langs a.on{color:var(--blue);text-decoration:underline}
.tagline p{margin:0}

.pagepad{padding-bottom:var(--band)}

.foot{margin-top:calc(var(--band)*.9);position:relative;z-index:1;background:var(--paper)}

.foot .cols{display:grid;gap:26px var(--colgap);grid-template-columns:1fr}
@media(min-width:720px){.foot .cols{grid-template-columns:1fr 1fr}}
.foot p{margin-bottom:.4em}
.markw{font-weight:900}
.legal{margin-top:.7em;padding-top:0;padding-bottom:10px;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
sup.fn{font-size:.68em;line-height:0;vertical-align:super}
sup.fn a{text-decoration:none;padding:0 1px}
sup.fn a:hover{color:var(--blue)}
.ack{padding-top:.9em;padding-bottom:0}
.ack p{margin:0;font-size:.86rem;line-height:1.5}
@media(max-width:719px){.legal{white-space:normal}}

/* ---- Ghost-side rules ---------------------------------------------------- */
.pagebody{}
.entry{display:inline}
#tsgboard .row--tight{padding-top:calc(var(--band)*.28)}
@media(max-width:719px){#tsgboard{display:none}}

/* content coming out of the Ghost editor */
.pagebody h1,.pagebody h2,.pagebody h3,.pagebody h4{font-size:1rem;font-weight:500;margin:0 0 6px}
.pagebody p{margin:0 0 1em}
.pagebody a{color:inherit}
.filed-src{display:none}

/* photographs in page flow: kept for any page still holding older markup */
.stream{padding-top:calc(var(--band)*.7)}
.stream figure{margin:0 0 var(--band)}
.stream figcaption{font-size:.84rem;padding-top:6px}
.fw100{width:100%}
.fw70{width:70%;margin-left:auto;margin-right:auto}
.fw55{width:55%;margin-left:auto;margin-right:auto}
.stream figure.portrait{max-width:min(42vw,480px);margin-left:auto;margin-right:auto}
.ph{background:#F5F5F5;display:block;overflow:hidden}
.ph img{width:100%;height:auto;display:block}
.stream .ph:not([class*="ph--"]){background:none}
.stream .ph:not([class*="ph--"]) img{width:100%;height:auto;object-fit:contain}
.pair{display:flex;gap:var(--gutter)}
@media(max-width:899px){
  .fw70,.fw55,.stream figure.portrait{width:100%;max-width:none}
  .pair{display:block}
}

/* Ghost image cards inside post content */
.kg-card{margin:0 0 var(--band)}
.kg-image-card img{width:100%;height:auto;display:block}
.kg-image-card figcaption{font-size:.84rem;padding-top:6px}
.kg-width-wide img{width:100%}

.foot .row{padding-top:calc(var(--band)*.55);padding-bottom:0}
.foot .row.ack{padding-top:.9em}

.tagline{font-size:1.05rem;line-height:1.35;letter-spacing:-0.005em;padding-top:6px;padding-bottom:2px}

@media(max-width:719px){
  .site-head{grid-template-columns:1fr}
  .site-head nav{justify-content:flex-start}
  .tagline{font-size:1.05rem;line-height:1.35;letter-spacing:-0.005em;padding-top:6px;padding-bottom:2px}
}

.split-r.away{visibility:hidden}

/* a book cover is a cover, not a photograph */
.stream figure.cover{width:auto;max-width:210px;margin:0}
.stream figure.cover .ph{background:none}
.stream figure.cover img{width:100%;height:auto}

/* headings inside post and page content read as register keys */
.gh-content h1,.gh-content h2,.gh-content h3,.gh-content h4{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:400;
  margin:1.4em 0 .3em;color:var(--ink)}
.gh-content p{margin:0 0 .9em}
.gh-content h3 + p{margin-top:0}

/* the Library register carries each entry whole */
.reg--lib li{padding-bottom:35px}
.libbody{padding-top:.2em}
.libbody p{margin:.15em 0}
.libbody h1,.libbody h2,.libbody h3,.libbody h4{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:400;
  margin:.7em 0 .1em}
.libbody a{color:inherit}

/* Ghost card widths, required by the theme validator */
.kg-width-full img,.kg-width-wide img{width:100%;height:auto;display:block}
.kg-width-full{width:100%}

/* a book cover in the carousel position keeps cover proportions */
.caro--cover img{display:block;width:auto;height:auto;max-width:240px;max-height:62vh}

/* writing pages: the text takes more of the width than the picture */
.split--text{grid-template-columns:1.25fr .75fr}
.split--text .split-r{width:46%;padding:0 2.5vw 0 12px;flex-direction:column;gap:8px}

@media(max-width:899px){
  .split--text{grid-template-columns:1fr}
  .split--text .split-r{width:auto;padding:0}
}

/* the Library reads as text, so it runs wider */
.reg--lib{max-width:none}
.reg--lib .entry,.reg--lib .libbody{max-width:83ch}
.reg--lib .libbody p{max-width:none}

/* a book entry is read in the register, so its title is a label, not a link */
.booktitle{text-decoration:none;cursor:default}

.reg--lib li:target .entry{color:var(--blue)}

/* the shop reads as a grid of objects */
.shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--band) var(--colgap)}
.good .ph{display:block;background:#F5F5F5;aspect-ratio:4/5;overflow:hidden}
.good .ph img{width:100%;height:100%;object-fit:cover;display:block}
.goodline{padding-top:8px;font-size:.9rem}
.goodline a{text-decoration:none}
.goodline a:hover{color:var(--blue);text-decoration:underline}
@media(max-width:1100px){.shopgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:719px){.shopgrid{grid-template-columns:1fr}}

/* a buy link inside a shop post carries weight */
.gh-content a.buy,.buyrow a,.snipcart-add-item,.btn{font:inherit;
  display:inline-block;border:1px solid var(--ink);padding:6px 14px;text-decoration:none;
  font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.gh-content a.buy:hover,.buyrow a:hover,.snipcart-add-item:hover,.btn:hover{background:var(--ink);color:var(--paper)}

/* the byline is a black button to the tsg page */

a.tagline:hover{background:var(--blue);color:var(--paper)}

/* the ticker: one line of live experiments, endlessly */

.ticker-track{display:inline-block;white-space:nowrap;animation:mfticker 90s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.tick{font-size:.84rem}
.tick .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.tick a{text-decoration:none}
.tick a:hover{color:var(--blue);text-decoration:underline}
.tick-sep{padding:0 14px;color:var(--ink);opacity:.4}
@keyframes mfticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* a portrait preview is limited by height, so it fills without overflowing */
/* the footer settles at the foot of the window when a page is short */
.foot{margin-top:auto}
.foot .legal{padding-bottom:12px}

/* hover preview: one set of rules, sized by caps only so nothing is squeezed */

/* hover preview: sized by caps only, so nothing is squeezed or cropped */
@media(max-width:899px){
}

/* hover preview: one forced dimension so a modest file still fills the space,
   the other left automatic so nothing can be squeezed */
.peek{position:fixed;top:50%;left:calc(50% + 12px);right:6vw;transform:translateY(-50%);
  z-index:45;pointer-events:none;display:none;justify-content:center;align-items:center}
.peek.on{display:flex}
.peek img{display:block;width:100%;height:auto;margin:0 auto;background:none}
.peek.port img{width:auto;height:78vh;max-width:none}
.peek.land img{width:100%;height:auto}
.peek--book img{width:auto;height:auto;max-width:min(22vw,300px);max-height:60vh}

@media(max-width:899px){
  .peek{left:0;right:0;padding:0}
  .peek img{width:80vw;height:auto}
  .peek.port img{width:70vw;height:auto}
  .peek.land img{width:80vw;height:auto}
  .peek--book img{width:auto;max-width:52vw}
}

/* the library: entries at the left, the shelf at the right */
.split--lib{grid-template-columns:1.35fr .65fr}
.split--lib .split-r{position:sticky;top:150px;width:auto;height:auto;padding:0 4vw 0 12px;display:block;align-self:start}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;pointer-events:auto;padding:2px}
.spine{display:block;text-decoration:none}
.spine img{width:100%;height:auto;display:block;background:#F5F5F5}
.spine:hover img{outline:2px solid var(--blue);outline-offset:2px}
.spine.on img{outline:2px solid var(--ink);outline-offset:2px}
.reg--lib li{scroll-margin-top:150px}
.reg--lib li.lit .entry{color:var(--blue)}

@media(max-width:899px){
  .split--lib{grid-template-columns:1fr}
  .split--lib .split-r{position:static;width:auto;height:auto;display:block;padding:0;transform:none !important}
  .shelf{grid-template-columns:repeat(4,1fr);gap:12px;padding-top:var(--band)}
}

/* the ticker runs out of the button: one band, one set of rules, so the
   button's box and the ticker's rules share the same top and bottom edge */
.tsgband{display:flex;align-items:stretch;margin-top:6px;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper)}
a.tagline{display:flex;align-items:center;flex:0 0 auto;background:var(--ink);color:var(--paper);
  padding:5px 7px;margin:-1px 0;font-size:1.02rem;line-height:1.3;letter-spacing:-0.005em;
  text-decoration:none;white-space:nowrap}
a.tagline:hover{color:var(--blue);border-color:var(--blue)}
.ticker{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;display:flex;align-items:center;
  padding-left:14px}
@media(max-width:719px){
  .tsgband{display:block}
  a.tagline{display:block;white-space:normal;margin:0}
  .ticker{padding-left:0;border-top:1px solid var(--ink)}
}


/* a drawing needs room to be read, so it breaks out of the carousel column */
.caro img.draw{width:100%;max-width:none;height:auto;max-height:86vh;object-fit:contain}

@media(max-width:899px){
  .caro img.draw{width:92vw;max-height:80vh}
}

/* client dashboards: tabs over full-width panels */
.dash-split{display:grid;grid-template-columns:25% 75%;gap:0;align-items:start}
.dash-left{position:sticky;top:calc(var(--stack,100px) + 12px);padding:calc(var(--band)*.5) var(--gutter) var(--band);align-self:start}
.dash-right{padding:calc(var(--band)*.5) var(--gutter) var(--band) 0;min-width:0}
.dashnav{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.dashnav button{font:inherit;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  background:none;border:1px solid var(--ink);color:var(--ink);padding:6px 13px;cursor:pointer}
.dashnav button:hover{color:var(--blue);border-color:var(--blue)}
.dashnav button.on{background:var(--ink);color:var(--paper)}
.dash .panel{display:none}
.dash .panel.on{display:block}
.dash .panel iframe{width:100%;border:1px solid var(--ink);background:#fff;min-height:78vh}
.dash .panel iframe.pdf{height:calc(100vh - var(--stack,100px) - 24px);min-height:0}
.dash-left .dashtext{padding-top:calc(var(--band)*.7)}
.dash-left .dashtext p{max-width:none;font-size:.9rem;line-height:1.5}
.dash .panel figure{margin:0 0 var(--band)}
.dash .panel img{width:100%;height:auto;display:block;background:#F5F5F5}
.dash .panel figcaption{font-size:.84rem;padding-top:6px}
.dash .imggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--colgap)}
.dash .imggrid figure{margin:0}
.dash .imggrid figcaption{font-size:.82rem;padding-top:5px}
.dash .overview{display:grid;grid-template-columns:var(--key) 1fr;gap:6px var(--colgap);max-width:1100px}
.dash .overview .body p{margin:0 0 1em;max-width:70ch}
.dash .panel p{max-width:70ch}
.dash .panel .imggrid p{max-width:none}
@media(max-width:899px){.dash .imggrid{grid-template-columns:1fr}}

.btn{background:var(--paper);color:var(--ink)}
.subwhy{max-width:34ch;margin:14px 0 8px}
.subline{display:flex;gap:8px;align-items:stretch}
.subline input{font:inherit;font-size:.85rem;border:1px solid var(--ink);background:var(--paper);
  padding:5px 9px;min-width:0;flex:0 1 220px}
.subline input:focus{outline:1px solid var(--blue);border-color:var(--blue)}


.footnav a{display:block;text-decoration:underline}

/* the lead: pinned to the window until it settles above the footer */
.leadwrap{pointer-events:none}
.lead{pointer-events:auto;position:fixed;top:calc(var(--stack,96px) + 12px);left:50%;transform:translateX(-50%);z-index:38;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);
  padding:8px 16px;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;
  font-family:inherit;text-decoration:none;cursor:pointer}

.lead:hover{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.leadform{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.leadform.on{display:flex}
.leadcard{background:var(--paper);border:1px solid var(--ink);max-width:520px;width:calc(100% - 32px);
  max-height:88vh;overflow:auto;padding:26px 26px 22px;position:relative}
.leadcard h2{font-size:1rem;font-weight:700;margin:0 0 4px}
.leadcard .fine{margin:0 0 18px}
.leadcard label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin:14px 0 5px}
.leadcard input,.leadcard select,.leadcard textarea{font:inherit;font-size:.9rem;width:100%;
  border:1px solid var(--ink);background:var(--paper);padding:7px 9px;box-sizing:border-box}
.leadcard textarea{min-height:96px;resize:vertical}
.leadcard input:focus,.leadcard select:focus,.leadcard textarea:focus{outline:1px solid var(--blue);border-color:var(--blue)}
.leadcard .btn{margin-top:18px}
.leadclose{position:absolute;top:10px;right:12px;background:none;border:none;font:inherit;
  font-size:1.1rem;cursor:pointer;padding:4px}
.leadclose:hover{color:var(--blue)}

/* the pinned bar: one sticky unit, restored after the landing cleanup */
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.topbar .site-head,.topbar .tsgband{background:none}

/* the front page: three registers stacked closer than they'd sit alone */
.home-template .pagepad{padding-bottom:calc(var(--band)*.2)}


.reg .entry a{text-decoration:none}

/* register: heading in the key column, list in the body, both from the same top */
.reg-row{align-items:start}
.reg-row .key{display:block;align-self:start}
.reg-row .pagehead{padding-top:0}
.reg-row .key .pagehead h1{margin:0;padding-top:4.5px;line-height:1.5}

@media(max-width:899px){
  .dash-split{grid-template-columns:1fr}
  .dash-left{position:static;padding-bottom:calc(var(--band)*.4)}
  .dash-right{padding:0 var(--gutter) var(--band)}
}