:root{
  --bg:#080808;
  --fg:#f3f3f3;
  --muted:#aaa;
  --line:#303030;
  --soft:#161616;
  --gutter:clamp(20px,3.35vw,56px);
  --body:17px;
  --reading-width:680px;
  --reading-ink:#c8c8c8;
  --reading-leading:1.85;
  --type-title:clamp(28px,3.1vw,44px);
  --type-section:24px;
  --type-subsection:19px;
  --type-meta:13px;
  --display:Arial,'Microsoft YaHei','PingFang SC',sans-serif;
  color-scheme:dark;
  scroll-behavior:smooth}

*{
  box-sizing:border-box}
html{
  background:var(--bg);
  color:var(--fg);
  scroll-padding-top:24px}
body{
  margin:0;
  font:var(--body)/1.75 Arial,'Microsoft YaHei','PingFang SC',sans-serif;
  -webkit-font-smoothing:antialiased}
body,button,input,textarea{
  font-feature-settings:'ss01' on}
a{
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:5px}
button,input,textarea{
  font:inherit}
button,a,input,textarea,summary{
  -webkit-tap-highlight-color:transparent}
button{
  cursor:pointer}
button:disabled{
  cursor:not-allowed;
  opacity:1;
  color:#909090;
  border-color:#454545}
a,button{
  touch-action:manipulation}
a:hover{
  text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #fff;
  outline-offset:6px}
a:active{
  opacity:.75}
::selection{
  background:#eee;
  color:#080808}
img,video,svg{
  max-width:100%}
img,video{
  display:block}
img{
  height:auto}
svg{
  flex-shrink:0}
h1,h2,h3,p,figure,dl{
  margin:0}
h1,h2,h3{
  font-weight:700;
  line-height:1.2;
  text-wrap:balance;
  overflow-wrap:anywhere}
h2{
  font-size:clamp(22px,2.3vw,30px)}
h3{
  font-size:clamp(20px,1.7vw,24px)}
p{
  overflow-wrap:anywhere}
ul,ol{
  padding-left:1.4em}
hr{
  border:0;
  border-top:1px solid var(--line);
  margin:36px 0}
a,code,dd{
  overflow-wrap:anywhere}
main:focus{
  outline:none}
[hidden]{
  display:none!important}
.shell{
  max-width:1800px;
  margin:auto;
  padding:0 var(--gutter)}
.icon{
  width:24px;
  height:24px}
.wordmark{
  font-size:20px;
  font-weight:600;
  letter-spacing:.015em;
  text-decoration:none;
  white-space:nowrap}
.skip-link{
  position:fixed;
  z-index:30;
  left:20px;
  top:12px;
  background:#fff;
  color:#000;
  padding:12px 20px;
  transform:translateY(-200%)}
.skip-link:focus{
  transform:none}

.site-header{
  display:flex;
  align-items:center;
  gap:32px;
  min-height:84px;
  border-bottom:1px solid var(--line)}
.site-header>.wordmark{
  margin-right:auto}
.primary-nav{
  display:flex;
  gap:26px;
  align-items:center}
.primary-nav a{
  font-size:14px;
  color:#aaa;
  text-decoration:none;
  padding:12px 0;
  white-space:nowrap}
.primary-nav a[aria-current]{
  color:var(--fg);
  text-decoration:underline;
  text-underline-offset:8px}
.header-end{
  display:flex;
  align-items:center;
  gap:18px}
.header-end a{
  min-width:44px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:14px}
.menu-toggle{
  display:none;
  color:inherit;
  background:none;
  border:0;
  align-items:center;
  gap:9px;
  padding:10px;
  min-height:44px}
.preview-note{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:12px 0;
  color:#aaa;
  font-size:12px;
  line-height:1.6}
.preview-note a{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap}
.preview-note .icon{
  width:17px;
  height:17px}
.meta,.article-row-meta,.detail-meta{
  font-size:var(--type-meta);
  color:var(--muted);
  letter-spacing:.025em}
.muted{
  color:var(--muted)}
.lead{
  font-size:clamp(20px,2.1vw,28px);
  line-height:1.65}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  text-decoration:none;
  font-size:15px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:13px 20px;
  border:1px solid #909090;
  background:transparent;
  color:var(--fg);
  text-decoration:none;
  min-height:50px;
  font-size:15px;
  line-height:1.5;
  border-radius:0}
.button .icon,.text-link .icon,.row-arrow .icon{
  transition:transform .2s ease-out}
.button:hover .icon,.text-link:hover .icon,.row-arrow:hover .icon{
  transform:translateX(3px)}
.primary-nav a:hover{
  color:var(--fg)}
.button:hover:not(:disabled){
  background:#202020;
  text-decoration:none}
.button-primary{
  color:#080808;
  background:#f3f3f3;
  border-color:#f3f3f3}
.button-primary:hover:not(:disabled){
  background:#d4d4d4;
  color:#000}
.button-examples{
  display:flex;
  gap:14px;
  flex-wrap:wrap}

.home-intro{
  padding-top:8px}
.hero-name{
  font-family:var(--display);
  font-size:clamp(48px,17vw,306px);
  font-weight:900;
  line-height:.81;
  letter-spacing:-.068em;
  white-space:nowrap;
  margin-left:-.013em}
.intro-line{
  display:flex;
  justify-content:space-between;
  gap:40px;
  margin:24px 0 32px;
  font-size:15px}
.intro-line p:last-child{
  color:#aaa}
.hero-film{
  margin-bottom:12px}
.hero-film>a{
  display:block;
  position:relative;
  text-decoration:none;
  overflow:hidden;
  background:var(--soft)}
.hero-film img{
  width:100%;
  height:clamp(260px,39vw,610px);
  object-fit:cover;
  object-position:50% 52%;
  transition:transform .5s ease}
.hero-film a:hover img{
  transform:scale(1.015)}
.hero-film-title{
  position:absolute;
  left:22px;
  right:22px;
  bottom:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:rgba(0,0,0,.68);
  padding:13px 18px;
  font-size:19px}
.hero-film-action{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:14px;
  white-space:nowrap}
.hero-film figcaption{
  font-size:12px;
  color:#aaa;
  padding-top:10px}
.empty-hero{
  padding:70px 0;
  border-bottom:1px solid var(--line)}
.empty-hero p{
  font-size:30px;
  max-width:600px;
  margin-bottom:24px}
.section{
  padding:72px 0}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  margin-bottom:26px;
  border-top:1px solid var(--line);
  padding-top:20px}
.section-heading h2{
  font-size:var(--type-section)}
.work-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:36px}
.work-item{
  min-width:0}
.work-image{
  display:block;
  position:relative;
  overflow:hidden;
  background:#171717}
.work-image img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .4s ease}
.work-image:hover img{
  transform:scale(1.025)}
.circle-link{
  position:absolute;
  bottom:18px;
  right:18px;
  border:1px solid #eee;
  background:#090909;
  display:grid;
  place-items:center;
  border-radius:50%;
  width:44px;
  height:44px}
.missing-image{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid #343434;
  color:#aaa;
  font-size:14px;
  background:#111}
.item-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin:18px 0 8px}
.item-heading h3 a{
  text-decoration:none}
.work-item>.muted{
  font-size:15px;
  max-width:50ch;
  margin-bottom:10px}
.method-section{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  padding:54px 0}
.method-section h2{
  max-width:7em;
  font-size:clamp(30px,3.7vw,50px);
  line-height:1.2}
.method-section .muted{
  margin:24px 0 30px;
  max-width:50ch}
.home-journal-tools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px}
.home-journal-tools .section-heading{
  border:0;
  padding-top:0}
.home-journal-tools .tool-row{
  display:block}
.home-journal-tools .tool-row-end{
  flex-direction:row;
  justify-content:space-between;
  margin-top:24px}

.page-heading{
  padding:64px 0 56px;
  max-width:1100px}
.page-heading h1{
  font-size:clamp(32px,3.4vw,48px);
  line-height:1.12;
  letter-spacing:-.025em}
.page-heading>p{
  margin-top:24px;
  max-width:46em;
  color:#aaa;
  font-size:18px;
  line-height:1.7}
.list-toolbar{
  display:flex;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:14px 0;
  margin-bottom:32px;
  font-size:13px;
  color:var(--muted)}
.list-toolbar>span{
  margin-left:auto}
.content-list{
  min-height:280px}
.case-row{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:10%;
  border-bottom:1px solid var(--line);
  padding:24px 0 54px}
.case-row h2{
  margin:14px 0 22px}
.case-row h2 a{
  text-decoration:none}
.case-row>div>p:not(.meta){
  max-width:56ch;
  color:#aaa;
  margin-bottom:18px}
.case-aside{
  border-left:1px solid var(--line);
  padding-left:32px;
  font-size:14px}
.case-aside p:nth-child(odd){
  color:#eee}
.case-aside hr{
  margin:18px 0}
.article-row{
  position:relative;
  padding:25px 64px 30px 0;
  border-bottom:1px solid var(--line)}
.article-row-meta{
  display:flex;
  gap:22px;
  margin-bottom:14px}
.article-row h2,.article-row h3{
  max-width:780px;
  line-height:1.4}
.article-row h2 a,.article-row h3 a{
  text-decoration:none}
.article-row>p{
  color:#aaa;
  font-size:16px;
  margin-top:16px;
  max-width:62ch}
.row-arrow{
  position:absolute;
  right:0;
  top:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px}
.tool-row{
  display:flex;
  justify-content:space-between;
  gap:36px;
  padding:27px 0 32px;
  border-bottom:1px solid var(--line)}
.tool-row h2,.tool-row h3{
  margin:12px 0 15px}
.tool-row h2 a,.tool-row h3 a{
  text-decoration:none}
.tool-row .muted{
  font-size:16px;
  max-width:63ch}
.tool-row-end{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-shrink:0}
.status-label{
  border:1px solid var(--line);
  font-size:12px;
  padding:3px 12px;
  white-space:nowrap}
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:42px 0}
.pagination a,.pagination span{
  display:inline-flex;
  min-width:44px;
  min-height:44px;
  align-items:center;
  justify-content:center;
  text-decoration:none}
.pagination [aria-current]{
  border:1px solid #aaa}
.empty-state{
  padding:48px 0;
  max-width:620px;
  grid-column:1/-1}
.empty-state h2{
  font-size:25px;
  margin-bottom:14px}
.empty-state p{
  color:#aaa;
  margin-bottom:20px}
.back-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:32px;
  font-size:14px;
  color:#bbb}
.detail-heading{
  padding:32px 0 56px;
  max-width:960px}
.detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:24px}
.detail-heading h1{
  font-size:var(--type-title);
  letter-spacing:-.02em;
  line-height:1.3}
.detail-heading>.lead{
  max-width:48ch;
  margin-top:24px;
  color:#aaa;
  font-size:18px;
  line-height:1.75}
.media-player{
  background:#131313;
  width:100%}
.media-player video,.media-player>img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  max-height:78vh}
.media-player .missing-image{
  aspect-ratio:16/9}
.player-caption{
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:12px;
  color:#aaa;
  margin:12px 0 28px}
.project-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:24px 0;
  margin:30px 0 54px}
.project-meta dt{
  font-size:13px;
  color:#aaa;
  margin-bottom:10px}
.project-meta dd{
  margin:0;
  font-size:16px}

.reading-layout{
  display:grid;
  grid-template-columns:minmax(0,180px) minmax(0,var(--reading-width)) minmax(0,180px);
  gap:40px;
  max-width:1120px;
  margin:24px auto 72px}
body[data-page='article'] .back-link{
  display:flex;
  max-width:var(--reading-width);
  margin-inline:auto}
body[data-page='article'] .detail-heading{
  max-width:var(--reading-width);
  margin-inline:auto}
body[data-page='case'] .detail-heading{
  max-width:var(--reading-width)}
body[data-page='case'] .reading-layout{
  grid-template-columns:minmax(0,var(--reading-width)) minmax(0,220px);
  justify-content:space-between;
  max-width:none;
  margin-inline:0}
body[data-page='case'] .richtext{
  grid-column:1;
  grid-row:1}
body[data-page='case'] .toc{
  grid-column:2;
  grid-row:1}
.toc{
  font-size:var(--type-meta);
  color:#aaa;
  align-self:start;
  position:sticky;
  top:32px;
  max-width:220px}
.toc summary{
  color:#eee;
  cursor:pointer;
  min-height:44px;
  border-bottom:1px solid var(--line);
  margin-bottom:12px;
  font-weight:700}
.toc ol{
  list-style:none;
  padding:0}
.toc li{
  margin:0}
.toc a{
  display:block;
  padding:8px 0;
  line-height:1.6;
  text-decoration:none}
.toc li[data-depth='3']{
  padding-left:15px}
.toc a:hover{
  color:#fff;
  text-decoration:underline}
.toc a[aria-current='location']{
  color:var(--fg);
  text-decoration:underline;
  text-underline-offset:5px}
.richtext{
  min-width:0;
  max-width:var(--reading-width);
  font-size:18px;
  line-height:var(--reading-leading);
  letter-spacing:.005em;
  color:var(--reading-ink);
  overflow-wrap:anywhere}
.richtext h2{
  font-size:var(--type-section);
  color:#f3f3f3;
  margin:56px 0 20px;
  line-height:1.4;
  scroll-margin-top:28px}
.richtext h2:first-child{
  margin-top:0}
.richtext h3{
  font-size:var(--type-subsection);
  color:#eee;
  margin:36px 0 16px;
  line-height:1.45;
  scroll-margin-top:28px}
.richtext p,.richtext ul,.richtext ol,.richtext figure,.richtext blockquote,.richtext pre,.richtext table{
  margin-top:0;
  margin-bottom:24px}
.richtext li{
  margin:7px 0}
.richtext blockquote{
  border-left:1px solid #888;
  margin-left:0;
  padding:5px 0 5px 25px;
  color:#bbb;
  font-size:18px}
.richtext blockquote p:last-child{
  margin-bottom:0}
.richtext figure img{
  width:100%}
.richtext figcaption{
  font-size:13px;
  line-height:1.65;
  color:#aaa;
  margin-top:12px}
.richtext pre{
  position:relative;
  max-width:100%;
  overflow:auto;
  background:#141414;
  border:1px solid var(--line);
  padding:48px 22px 22px;
  font:14px/1.8 Consolas,monospace;
  tab-size:2}
.richtext code{
  font-family:Consolas,monospace;
  font-size:.85em}
.richtext pre code{
  font-size:inherit;
  white-space:pre;
  overflow-wrap:normal}
.richtext :not(pre)>code{
  background:#202020;
  padding:2px 6px}
.copy-code{
  position:absolute;
  right:10px;
  top:7px;
  min-height:36px;
  border:1px solid #555;
  background:#111;
  color:#ddd;
  padding:3px 10px;
  font-size:12px}
.richtext table{
  display:block;
  max-width:100%;
  overflow:auto;
  border-collapse:collapse;
  font-size:14px;
  line-height:1.65}
.richtext th,.richtext td{
  border:1px solid #444;
  padding:14px 18px;
  text-align:left;
  min-width:120px}
.richtext th{
  font-weight:700;
  color:#fff;
  background:#171717}
.richtext a{
  color:#fff}
.related-section{
  padding:35px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:35px}
.related-section h2{
  font-size:var(--type-section)}
.related-section a{
  display:flex;
  align-items:center;
  gap:20px;
  max-width:70%;
  font-size:17px}
.tool-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:64px}
.tool-detail-layout .reading-layout{
  display:block;
  margin-inline:0;
  max-width:var(--reading-width)}
.tool-detail-layout .toc{
  position:static;
  max-width:none;
  margin-bottom:35px}
.tool-detail-layout .toc ol{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px}
.download-panel{
  border:1px solid var(--line);
  padding:25px;
  align-self:start;
  position:sticky;
  top:28px;
  min-width:0}
.download-panel h2{
  font-size:var(--type-section);
  margin-bottom:24px}
.download-panel dl>div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:14px;
  border-top:1px solid #333;
  padding:11px 0}
.download-panel dt{
  color:#aaa}
.download-panel dd{
  margin:0;
  text-align:right}
.download-panel .button{
  width:100%;
  margin:22px 0 12px}
.download-panel>.meta{
  margin-top:12px}
.checksum{
  font-size:12px;
  margin:16px 0}
.checksum code{
  display:block;
  word-break:break-all;
  margin-top:12px}
.status-box{
  padding:18px;
  border:1px solid #484848;
  background:#101010;
  color:#bbb;
  font-size:14px;
  margin:20px 0}
.known-issues{
  border-top:1px solid var(--line);
  padding:28px 0;
  max-width:var(--reading-width)}
.known-issues h2{
  font-size:var(--type-section);
  margin-bottom:18px}
.known-issues p{
  color:#bbb}

.about-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  padding:10px 0 65px}
.about-name{
  font-family:var(--display);
  font-size:clamp(75px,14vw,230px);
  font-weight:900;
  line-height:.82;
  letter-spacing:-.068em}
.about-layout>div:last-child>p{
  margin-bottom:28px}
.focus-list{
  list-style:none;
  padding:0;
  margin:25px 0 32px}
.focus-list li{
  border-bottom:1px solid #444;
  padding:14px 0;
  color:#bbb}
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:9%;
  padding-bottom:60px}
.contact-layout h2{
  font-size:25px;
  margin-bottom:20px}
.contact-layout p{
  color:#bbb;
  max-width:48ch}
.contact-layout .button{
  margin-top:28px}
.contact-layout .contact-paths{
  margin-top:35px}
.enquiry-form{
  border-top:1px solid #777;
  padding-top:20px;
  max-width:850px}
.form-note{
  font-size:14px;
  color:#aaa;
  margin-bottom:26px}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.field{
  min-width:0;
  margin:0 0 22px}
.field label{
  display:block;
  font-size:15px;
  margin-bottom:10px}
.field label>span{
  font-size:11px;
  color:#999;
  margin-left:10px}
.field input,.field textarea,.search-form input{
  border:1px solid #737373;
  background:#101010;
  color:#f3f3f3;
  padding:13px 15px;
  border-radius:0;
  width:100%;
  min-width:0;
  min-height:50px}
.field textarea{
  resize:vertical}
.field [aria-invalid=true]{
  border:2px solid #fff}
.field-error{
  font-size:13px;
  color:#ddd;
  margin-top:5px;
  min-height:0}
.consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:13px;
  margin:8px 0 23px}
.consent input{
  width:20px;
  height:20px;
  min-width:20px;
  margin:3px 0;
  accent-color:#fff}
.form-status{
  font-size:14px;
  margin-top:20px}
.privacy-copy{
  max-width:730px;
  margin:auto;
  font-size:18px;
  line-height:1.9;
  padding-bottom:45px}
.privacy-copy h2{
  font-size:28px;
  margin:40px 0 18px}
.search-form{
  max-width:850px;
  border-top:1px solid var(--line);
  padding-top:30px}
.search-form>label{
  display:block;
  font-size:14px;
  margin-bottom:10px}
.search-form>div{
  display:flex;
  gap:14px}
.search-form>.muted{
  font-size:13px;
  margin:15px 0 36px}
.search-result{
  border-bottom:1px solid var(--line);
  padding:27px 0;
  max-width:1050px}
.search-result h2{
  font-size:27px;
  margin:14px 0}
.search-result h2 a{
  text-decoration:none}
.search-result p{
  color:#aaa;
  font-size:15px;
  max-width:65ch}
.error-page{
  padding:70px 0 85px}
.error-number{
  font:900 clamp(140px,30vw,400px)/.9 var(--display)}
.error-page h1{
  font-size:38px;
  margin:25px 0}
.error-page p{
  color:#aaa;
  max-width:52ch;
  margin-bottom:30px}
.component-nav{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  font-size:15px}
.component-section{
  padding:50px 0;
  border-bottom:1px solid var(--line)}
.component-section>h2{
  margin-bottom:30px}
.component-display{
  font:900 clamp(48px,14vw,210px)/1 var(--display);
  letter-spacing:-.068em;
  margin-bottom:25px}
.component-section>.lead{
  max-width:980px;
  margin-bottom:22px}
.state-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  margin-bottom:35px}
.state-grid .download-panel{
  position:static}
.contact-band{
  border-top:1px solid var(--line);
  margin-top:70px;
  padding:44px 0}
.contact-band>a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  text-decoration:none;
  font-size:clamp(34px,4.7vw,66px);
  letter-spacing:-.03em}
.contact-band .icon{
  width:clamp(35px,5vw,68px);
  height:clamp(35px,5vw,68px)}
.contact-band>p{
  color:#aaa;
  font-size:14px;
  margin-top:15px}
.site-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
  border-top:1px solid var(--line);
  padding:30px 0;
  font-size:12px}
.site-footer>p{
  color:#aaa}
.site-footer>div{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
  margin-left:auto}
.site-footer a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:44px;
  text-decoration:none}
.site-footer .icon{
  width:15px;
  height:15px}
.asset-credit{
  color:#8c8c8c;
  font-size:11px;
  line-height:1.7;
  padding:0 0 22px}

@media(min-width:1500px){
  .hero-name{
  font-size:min(17vw,306px)}
}

@media(max-width:1100px){
  .site-header{
  gap:20px}
.primary-nav{
  gap:17px}
.primary-nav a{
  font-size:14px}
.reading-layout{
  display:block;
  max-width:var(--reading-width)}
.toc{
  position:static;
  max-width:none;
  margin-bottom:36px}
.tool-detail-layout{
  gap:35px;
  grid-template-columns:minmax(0,1fr) 270px}
.home-journal-tools{
  gap:36px}
.site-footer>div{
  margin-left:0}
.hero-name{
  font-size:17vw}
}

@media(max-width:900px){
  .site-header{
  flex-wrap:wrap;
  gap:0 18px;
  min-height:78px;
  padding:12px 0}
.site-header>.wordmark{
  font-size:19px}
.primary-nav{
  width:100%;
  order:4;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:12px;
  gap:10px}
.primary-nav a{
  padding:14px 0}
.js .menu-toggle{
  display:flex}
.js .primary-nav{
  display:none}
.js .site-header.menu-open .primary-nav{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0}
.js .site-header.menu-open .primary-nav a{
  padding:13px 6px;
  font-size:19px;
  border-bottom:1px solid #333}
.header-end{
  gap:5px}
.intro-line{
  gap:22px;
  font-size:13px}
.intro-line p{
  max-width:50%}
.home-journal-tools{
  grid-template-columns:1fr;
  gap:0}
.home-journal-tools .section{
  padding:36px 0}
.method-section{
  gap:35px}
.method-section h2{
  font-size:34px}
.case-row{
  gap:35px}
.tool-detail-layout{
  grid-template-columns:1fr}
.download-panel{
  position:static;
  max-width:650px}
.tool-detail-layout>.download-panel{
  grid-row:1}
.contact-layout{
  gap:45px;
  grid-template-columns:1fr}
.contact-layout>div{
  max-width:700px}
.about-layout{
  gap:40px}
.page-heading{
  padding-top:45px}
.site-footer{
  gap:16px 30px}
.site-footer>div{
  width:100%}
}

@media(max-width:600px){
  :root{
  --gutter:20px;
  --body:16px;
  --type-title:28px;
  --type-section:22px;
  --type-subsection:18px;
  --type-meta:12px}
.site-header{
  gap:0 6px}
.site-header>.wordmark{
  font-size:17px}
.header-end a{
  min-width:38px;
  font-size:12px}
.menu-toggle{
  font-size:12px;
  padding:10px 4px;
  gap:4px}
.preview-note{
  font-size:11px;
  gap:12px}
.preview-note>span{
  max-width:66%}
.preview-note .icon{
  display:none}
.hero-name{
  font-size:16.7vw;
  line-height:.88;
  margin-top:14px}
.intro-line{
  display:block;
  margin:18px 0 24px;
  font-size:12px}
.intro-line p{
  max-width:none}
.intro-line p+p{
  margin-top:7px}
.hero-film img{
  height:340px;
  object-position:57% 50%}
.hero-film-title{
  left:12px;
  right:12px;
  bottom:12px;
  display:block;
  padding:13px;
  font-size:17px}
.hero-film-action{
  margin-top:12px;
  font-size:12px;
  justify-content:space-between}
.hero-film figcaption{
  font-size:10px}
.section{
  padding:38px 0}
.section-heading{
  margin-bottom:22px;
  gap:15px}
.section-heading h2{
  font-size:var(--type-section)}
.section-heading .text-link{
  font-size:12px;
  gap:7px}
.work-grid{
  grid-template-columns:1fr;
  gap:32px}
.work-item>.muted{
  font-size:14px}
.item-heading h3{
  font-size:21px}
.method-section{
  grid-template-columns:1fr;
  padding:35px 0;
  gap:26px}
.method-section h2{
  max-width:none;
  font-size:30px}
.lead{
  font-size:20px}
.method-section .muted{
  font-size:15px}
.home-journal-tools .section{
  padding:29px 0}
.home-journal-tools .section-heading{
  margin-bottom:0}
.page-heading{
  padding:33px 0 35px}
.page-heading h1{
  font-size:32px}
.page-heading>p{
  font-size:17px;
  margin-top:19px}
.list-toolbar{
  flex-wrap:wrap;
  gap:7px 20px;
  font-size:12px}
.list-toolbar>span{
  display:none}
.list-toolbar .text-link{
  font-size:13px}
.case-row{
  grid-template-columns:1fr;
  padding:5px 0 35px;
  gap:24px}
.case-row h2{
  font-size:25px}
.case-aside{
  border-left:0;
  border-top:1px solid var(--line);
  padding:20px 0 0}
.article-row{
  padding:22px 42px 25px 0}
.article-row h2,.article-row h3{
  font-size:21px}
.article-row p{
  font-size:14px}
.row-arrow{
  right:-5px}
.article-row-meta{
  font-size:var(--type-meta)}
.tool-row{
  display:block;
  padding:24px 0}
.tool-row-end{
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  margin-top:22px}
.tool-row h2,.tool-row h3{
  font-size:21px}
.tool-row .muted{
  font-size:14px}
.detail-heading{
  padding:17px 0 30px}
.detail-heading h1{
  font-size:var(--type-title);
  line-height:1.35}
.detail-heading>.lead{
  font-size:18px}
.detail-meta{
  font-size:var(--type-meta);
  gap:15px;
  margin-bottom:19px}
.project-meta{
  grid-template-columns:1fr;
  padding:18px 0;
  gap:15px;
  margin:25px 0 32px}
.project-meta>div{
  display:grid;
  grid-template-columns:85px 1fr;
  gap:18px}
.project-meta dt{
  margin:0;
  font-size:12px}
.project-meta dd{
  font-size:14px}
.player-caption{
  display:block;
  font-size:11px}
.player-caption p+p{
  margin-top:7px}
.reading-layout{
  display:block;
  margin:24px auto 48px}
.toc{
  position:static;
  max-width:none;
  margin-bottom:33px}
.toc ol{
  margin-bottom:0}
.toc a{
  padding:7px 0}
.richtext{
  font-size:16px;
  line-height:var(--reading-leading)}
.richtext h2{
  font-size:var(--type-section);
  margin:40px 0 18px}
.richtext h3{
  font-size:var(--type-subsection)}
.richtext blockquote{
  font-size:18px;
  padding-left:20px}
.richtext pre{
  font-size:12px;
  padding-left:16px;
  padding-right:16px}
.richtext th,.richtext td{
  min-width:108px;
  padding:11px}
.related-section{
  display:block}
.related-section h2{
  margin-bottom:20px}
.related-section a{
  max-width:none;
  font-size:16px}
.about-layout{
  display:block}
.about-name{
  font-size:31vw;
  margin:10px 0 40px;
  line-height:.8}
.about-layout .lead{
  font-size:22px}
.about-layout h2{
  font-size:26px}
.form-grid{
  grid-template-columns:1fr;
  gap:0}
.enquiry-form .button{
  width:100%}
.search-form>div{
  gap:8px}
.search-form .button{
  padding:12px;
  gap:6px;
  font-size:13px;
  white-space:nowrap;
  flex-shrink:0}
.search-form .icon{
  width:18px}
.search-result h2{
  font-size:24px}
.privacy-copy{
  font-size:16px}
.privacy-copy h2{
  font-size:25px}
.state-grid{
  grid-template-columns:1fr;
  gap:15px}
.component-section{
  padding:35px 0}
.component-nav{
  gap:15px;
  font-size:13px}
.component-display{
  font-size:15.8vw;
  letter-spacing:-.068em}
.contact-band{
  margin-top:45px;
  padding:30px 0}
.contact-band>a{
  font-size:34px;
  line-height:1.2}
.contact-band>p{
  font-size:12px}
.site-footer{
  padding:22px 0;
  gap:9px}
.site-footer>.wordmark{
  width:100%}
.site-footer>div{
  gap:15px;
  font-size:11px}
.asset-credit{
  font-size:10px}
.error-page h1{
  font-size:29px}
}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
*,*::before,*::after{
  scroll-behavior:auto!important;
  animation:none!important;
  transition:none!important}
.hero-film a:hover img,.work-image:hover img{
  transform:none}
}


/* Single-record lists retain intentional structure while the archive is small. */
@media(min-width:601px){
  .work-grid>.work-item:only-child{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:40px;
  align-content:start}
.work-grid>.work-item:only-child>.work-image{
  grid-row:1/5}
.work-grid>.work-item:only-child>.item-heading{
  margin-top:0;
  align-self:start}
.work-grid>.work-item:only-child>.muted{
  margin-top:16px}
.work-grid>.work-item:only-child>.meta{
  margin-top:12px}
}

.primary-nav{
  flex-wrap:wrap}
.standalone-reading{
  max-width:var(--reading-width);
  margin:10px auto 65px}


/* Titles lead; contextual metadata follows the content heading. */
.detail-meta{margin-top:18px;margin-bottom:0}
.article-row-meta{margin-top:12px;margin-bottom:0}
.tool-row h2,.tool-row h3{margin-top:0;margin-bottom:12px}
.tool-row .meta{margin-bottom:14px}

/* The shared family stays fixed; English needs less leading than Chinese. */
html:lang(en){--reading-leading:1.72}
html:lang(en) .richtext{letter-spacing:0}
html:lang(zh) .page-heading h1,
html:lang(zh) .detail-heading h1{letter-spacing:0}
.richtext pre,.richtext table{scrollbar-color:#666 #161616;scrollbar-width:thin}
@media(prefers-reduced-motion:reduce){
  .button:hover .icon,.text-link:hover .icon,.row-arrow:hover .icon{transform:none}
}