:root {
  color-scheme:light;
  --paper:#e7e4d9;
  --ink:#45463e;
  --muted:#62655b;
  --line:#55574d40;
  --accent:#536b48;
  --mono:'Courier New',monospace;
  --serif:'Songti SC','Noto Serif CJK SC','STSong',Georgia,serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper) url('assets/zine-paper-fine.webp') center top/970px auto repeat;
  font-family:var(--serif);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-underline-offset:5px;
  text-decoration-thickness:.6px
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,summary:focus-visible,video:focus-visible {
  outline:1px solid var(--accent);
  outline-offset:7px
}
.skip {
  position:absolute;
  top:-100px;
  left:20px;
  z-index:20;
  background:var(--paper);
  padding:12px
}
.skip:focus {
  top:10px
}
.masthead {
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  width:100%;
  padding:28px 5%;
  display:flex;
  justify-content:space-between;
  gap:24px;
  font:12px/1.6 var(--mono);
  letter-spacing:.7px
}
.masthead a {
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center
}
.wordmark {
  letter-spacing:2px
}
.masthead nav {
  display:flex;
  gap:30px
}
.cover {
  position:relative;
  min-height:720px;
  height:100svh;
  max-height:1060px;
  display:flex;
  justify-content:center;
  overflow:hidden
}
.cover-sheet {
  position:relative;
  width:clamp(432px,60svh,600px);
  height:clamp(720px,100svh,1000px);
  max-width:100%;
  align-self:center;
  flex:none
}
.cover-art {
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  mask-composite:intersect;
  pointer-events:none
}
.annotation {
  position:absolute;
  font:12px/1 var(--mono);
  letter-spacing:.8px;
  color:#67685e
}
.annotation:after {
  content:'';
  position:absolute;
  height:.5px;
  background:#6d6d6080;
  transform-origin:left center
}
.notes {
  left:25%;
  top:35.5%
}
.notes:after {
  top:15px;
  left:30px;
  width:65px;
  transform:rotate(43deg)
}
.roadbook {
  left:73%;
  top:47.5%
}
.roadbook:after {
  left:-55px;
  top:20px;
  width:52px;
  transform:rotate(-15deg)
}
.journey {
  left:26%;
  top:59%
}
.journey:after {
  left:44px;
  top:-2px;
  width:48px;
  transform:rotate(-38deg)
}
.cover h1 {
  position:absolute;
  top:63.5%;
  left:10%;
  width:80%;
  text-align:center;
  font-size:16px;
  line-height:1.8;
  font-weight:400;
  letter-spacing:3px;
  margin:0
}
.cover-note {
  position:absolute;
  top:73%;
  width:100%;
  text-align:center;
  font-size:11px;
  letter-spacing:1px
}
.cover-open,.cover-more {
  position:absolute;
  left:15%;
  width:70%;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:44px;
  font-size:13px;
  letter-spacing:1.3px
}
.cover-open {
  top:81%;
  text-decoration:none
}
.cover-more {
  top:88%;
  font-size:11px;
  color:var(--muted)
}
.margin-note {
  position:absolute;
  left:5%;
  bottom:60px;
  font:10px/1.9 var(--mono);
  color:#87877b;
  letter-spacing:1px
}
.issue {
  position:absolute;
  right:5%;
  bottom:60px;
  font:10px var(--mono);
  letter-spacing:1px;
  color:var(--muted)
}
.section {
  max-width:1060px;
  margin:0 auto;
  padding:110px 40px 130px
}
.section-label {
  display:flex;
  justify-content:space-between;
  gap:24px;
  font:10px/1.8 var(--mono);
  letter-spacing:1.3px;
  border-top:.5px solid var(--line);
  padding-top:22px;
  margin-bottom:62px;
  color:var(--muted)
}
h2 {
  font-size:29px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:2px;
  margin:0 0 32px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  gap:50px;
  align-items:end;
  margin-bottom:55px
}
.section-heading h2 {
  margin:0
}
.section-heading>p {
  font-size:14px;
  color:var(--muted);
  margin:0;
  line-height:2
}
.film {
  margin:0
}
.film video {
  display:block;
  width:100%;
  height:auto;
  background:#25372d;
  aspect-ratio:1920/1074
}
.film figcaption {
  display:flex;
  justify-content:space-between;
  gap:24px;
  font:11px/1.8 var(--mono);
  color:var(--muted);
  margin-top:17px
}
.features {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin-top:58px
}
.features p {
  font-size:13px;
  color:#64665b
}
.features b {
  display:block;
  font-weight:400;
  font-size:16px;
  color:var(--ink);
  margin-bottom:10px
}
.footnote {
  font-size:11px;
  color:var(--muted);
  line-height:1.9;
  margin-top:24px
}
.process {
  padding-top:55px
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:70px
}
.steps article>span {
  font:12px var(--mono);
  color:var(--accent)
}
h3 {
  font-weight:400;
  font-size:18px;
  letter-spacing:1px;
  margin:14px 0
}
.steps p {
  font-size:14px;
  color:var(--muted)
}
.intro {
  font-size:14px;
  color:var(--muted);
  max-width:580px;
  margin-bottom:65px
}
.examples-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:42px
}
.example {
  display:block;
  text-decoration:none
}
.example .media {
  aspect-ratio:4/5;
  overflow:hidden;
  background:#d4d3c9
}
.example img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.55);
  transition:filter .25s ease
}
.example:hover img {
  filter:saturate(.9)
}
.example .body {
  padding-top:23px
}
.example b {
  display:block;
  font-weight:400;
  font-size:20px;
  line-height:1.5;
  letter-spacing:1px
}
.example p {
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  margin:12px 0
}
.example small {
  font:10px var(--mono);
  color:var(--muted);
  letter-spacing:1px
}
.start {
  padding-bottom:150px
}
.start>p {
  font-size:14px;
  color:var(--muted)
}
blockquote {
  font-size:20px;
  font-weight:400;
  line-height:2.1;
  margin:48px 0 38px;
  padding-left:25px;
  border-left:1px solid #536b4870;
  letter-spacing:1px
}
details {
  max-width:620px
}
summary {
  cursor:pointer;
  font-size:13px;
  min-height:44px;
  padding:10px 0
}
pre {
  font:12px/2 var(--mono);
  overflow:auto;
  border-top:.5px solid var(--line);
  border-bottom:.5px solid var(--line);
  padding:22px 0;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
code {
  font-size:.9em
}
.start-links {
  display:flex;
  gap:36px;
  font-size:13px;
  margin-top:35px
}
.start-links a {
  padding:10px 0
}
.colophon {
  max-width:1060px;
  margin:auto;
  padding:30px 40px 65px;
  border-top:.5px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:40px;
  font-size:11px;
  color:var(--muted);
  line-height:2.1
}
.colophon a {
  text-decoration:none
}
@media(max-width:700px) {
  .masthead {
    padding:18px 22px;
    font-size:10px;
    gap:12px
  }
  .masthead nav {
    gap:15px
  }
  .masthead nav a:last-child {
    display:none
  }
  .cover {
    min-height:620px;
    max-height:880px
  }
  .cover-sheet {
    width:100%;
    height:auto;
    aspect-ratio:3/5;
    max-height:800px;
    align-self:center
  }
  .cover h1 {
    font-size:14px;
    letter-spacing:2px
  }
  .annotation {
    font-size:10px
  }
  .notes:after {
    width:42px;
    left:25px
  }
  .roadbook:after {
    width:35px;
    left:-37px
  }
  .journey:after {
    width:35px;
    left:38px
  }
  .cover-note {
    font-size:9px;
    letter-spacing:.3px
  }
  .cover-open {
    font-size:12px;
    top:81%
  }
  .cover-more {
    font-size:10px;
    top:89%
  }
  .margin-note {
    left:22px;
    bottom:20px;
    font-size:8px
  }
  .issue {
    right:22px;
    bottom:27px;
    font-size:8px
  }
  .section {
    padding:70px 25px 85px
  }
  .section-label {
    font-size:9px;
    letter-spacing:.3px;
    margin-bottom:40px
  }
  .section-label span:last-child {
    text-align:right
  }
  h2 {
    font-size:25px;
    letter-spacing:1px
  }
  .section-heading {
    display:block;
    margin-bottom:34px
  }
  .section-heading>p {
    margin-top:25px;
    font-size:13px
  }
  .film figcaption {
    font-size:9px;
    gap:12px
  }
  .features {
    grid-template-columns:1fr 1fr;
    gap:16px 30px;
    margin-top:35px
  }
  .features p {
    margin:0;
    font-size:12px
  }
  .features b {
    font-size:15px
  }
  .steps {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:38px
  }
  .steps article {
    display:grid;
    grid-template-columns:30px 1fr;
    gap:0 12px
  }
  .steps article>span {
    grid-row:1/3;
    padding-top:18px
  }
  .steps h3 {
    margin-bottom:0
  }
  .steps p {
    grid-column:2;
    margin-top:10px
  }
  .examples-grid {
    grid-template-columns:1fr;
    gap:54px
  }
  .example {
    display:grid;
    grid-template-columns:40% 1fr;
    gap:25px;
    align-items:center
  }
  .example .body {
    padding:0
  }
  .example b {
    font-size:19px
  }
  .example p {
    font-size:12px
  }
  .intro {
    font-size:13px;
    margin-bottom:38px
  }
  blockquote {
    font-size:17px;
    padding-left:18px;
    letter-spacing:.4px
  }
  .colophon {
    margin:0 25px;
    padding:25px 0 40px;
    display:block;
    font-size:10px
  }
  .colophon>span {
    display:block;
    margin-bottom:20px
  }
  .start-links {
    gap:24px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .example img {
    transition:none
  }
}

/* A thin rule, no filled pill: the selected language is underlined. */
.language-switch { display:flex; align-items:center; gap:2px; font:11px/1 var(--mono); }
.language-switch button { position:relative; min-width:34px; min-height:44px; padding:0 6px; border:0; background:transparent; color:var(--muted); font:inherit; cursor:pointer; }
.language-switch button::after { content:''; position:absolute; bottom:8px; left:6px; right:6px; border-bottom:.5px solid transparent; }
.language-switch button[aria-pressed="true"] { color:var(--ink); }
.language-switch button[aria-pressed="true"]::after { border-color:currentColor; }
.language-switch button:hover::after { border-color:var(--muted); }
.language-switch button:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
.language-switch>span { color:var(--muted); font-size:10px; }
.masthead nav { margin-left:auto; }
html[lang="en"] { --serif:Georgia,'Times New Roman',serif; }
html[lang="en"] .cover h1 { letter-spacing:1px; }
html[lang="en"] h2 { letter-spacing:.3px; }
html[lang="en"] .example b { letter-spacing:0; }
@media(max-width:700px) {
  .masthead { gap:8px; padding-inline:18px; flex-wrap:wrap; }
  .masthead nav { gap:12px; }
  .language-switch { gap:0; font-size:10px; }
  .language-switch button { min-width:30px; padding-inline:4px; }
  html[lang="en"] .cover h1 { font-size:14px; letter-spacing:.2px; }
  html[lang="en"] .cover-note { letter-spacing:0; font-size:9px; }
  html[lang="en"] .section-label { letter-spacing:0; }
}
@media(max-width:360px) {
  .masthead { padding-inline:14px; gap:6px; font-size:9px; letter-spacing:.3px; }
  .wordmark { letter-spacing:1px; }
  .masthead nav { gap:8px; }
}
.examples-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.example-type { display:grid; place-content:center; width:100%;height:100%;font:12px/2 var(--mono);letter-spacing:3px;color:#526679;background:#e6e8e3; }
@media(max-width:900px){.examples-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.examples-grid{grid-template-columns:1fr;}}
.downloads{margin:45px 0;padding:25px 0;border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);font-size:14px}.download-links{display:flex;gap:18px 30px;flex-wrap:wrap;margin:20px 0}.download-links a{font:12px/1.8 var(--mono);padding:12px 0;min-height:44px}