@font-face {
  font-family:Anton;
  src:url('../../assets/fonts/Anton-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Plex;
  src:url('../../assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

:root {
  --paper:#fff;
  --ink:#1a1714;
  --muted:#77736d;
  --rule:#d8d6d2;
  --accent:#9e392b;
  --display:Anton,'Arial Narrow',sans-serif;
  --body:Arial,'Microsoft YaHei',sans-serif;
  --mono:Plex,'Courier New',monospace;
  --serif:Georgia,'Times New Roman',serif;
  --hand:'Segoe Print','Comic Sans MS',cursive
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:auto;
  scroll-padding-top:30px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}
::selection {
  background:#e8d6bc;
  color:var(--ink)
}

.page {
  max-width:1600px;
  min-width:1080px;
  margin:auto;
  padding:0 64px
}

.mono {
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.035em;
  line-height:1.5
}

.hand {
  font-family:var(--hand);
  font-weight:400
}

.skip {
  position:absolute;
  left:24px;
  top:-100px;
  z-index:20;
  background:white;
  padding:15px
}

.skip:focus {
  top:15px
}

.masthead {
  height:89px;
  border-bottom:1px solid var(--ink);
  display:flex;
  align-items:center;
  gap:50px
}

.wordmark {
  font-size:29px;
  letter-spacing:-1.7px;
  font-weight:900;
  white-space:nowrap
}

.wordmark span {
  font-family:var(--mono);
  font-size:11px;
  vertical-align:top;
  display:inline-block;
  padding-top:5px;
  margin-left:4px;
  letter-spacing:0
}

.masthead-name {
  margin-right:auto
}

.masthead nav {
  display:flex;
  gap:30px;
  font-family:var(--mono);
  font-size:11px
}

.edition {
  margin-left:20px
}

.hero-meta {
  display:flex;
  justify-content:space-between;
  padding-top:23px
}

.hero-composition {
  display:grid;
  grid-template-columns:minmax(0,1fr) 294px;
  gap:55px;
  padding-top:27px;
  padding-bottom:24px
}
h1 {
  font-family:var(--display);
  font-weight:400;
  font-size:102px;
  line-height:1.02;
  letter-spacing:-2.5px;
  margin:0
}
h1>span {
  display:block;
  white-space:nowrap
}

.last-line {
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:107px;
  line-height:1.06;
  letter-spacing:-7.5px
}

.hero-intro {
  padding-top:42px
}

.section-index {
  font-size:10px;
  letter-spacing:.01em
}

.intro-en {
  font-size:22px;
  line-height:1.33;
  letter-spacing:-.6px;
  margin:20px 0 17px;
  max-width:285px
}

.intro-zh {
  font-size:13px;
  line-height:1.9;
  color:#5b5652;
  margin:0;
  max-width:275px
}

.editor-note {
  position:relative;
  color:var(--accent);
  font-family:var(--hand);
  font-size:17px;
  transform:rotate(-5deg);
  margin-top:33px;
  margin-left:3px
}

.editor-note svg {
  position:absolute;
  left:-85px;
  top:0;
  width:80px;
  height:42px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round
}

.stack-label {
  display:flex;
  justify-content:space-between;
  margin-top:14px;
  font-size:10px;
  color:#6f6a63
}

.stack-label>span:first-child {
  color:var(--ink)
}

.magazine-stage {
  height:565px;
  position:relative;
  margin-top:17px
}

.stack {
  position:absolute;
  inset:0 294px 0 0
}

.stack-item {
  position:absolute;
  width:310px;
  aspect-ratio:3/4
}

.stack-item--back {
  left:235px;
  top:7px;
  transform:rotate(8deg);
  width:293px;
  z-index:1
}

.stack-item--left {
  left:32px;
  top:44px;
  transform:rotate(-9deg);
  z-index:2
}

.stack-item--front {
  left:322px;
  top:61px;
  transform:rotate(-3deg);
  width:334px;
  z-index:4
}

.stack-item--slip {
  left:617px;
  top:141px;
  transform:rotate(10deg);
  width:245px;
  z-index:5
}

.cover {
  background:#fff;
  color:var(--ink);
  position:relative;
  width:100%;
  height:100%;
  padding:6.4% 6.7% 6%;
  display:flex;
  flex-direction:column;
  border:1px solid #d6d3ce;
  box-shadow:1px 2px 0 #e2dfda,2px 4px 0 #fafafa,3px 5px 0 #d5d2cd,4px 9px 15px #211c1410,14px 20px 28px #211c1412;
  overflow:hidden;
  container-type:inline-size
}

.cover:before {
  content:'';
  position:absolute;
  left:2%;
  top:0;
  bottom:0;
  width:1px;
  background:#00000007
}

.cover-meta {
  display:flex;
  justify-content:space-between;
  font-size:3.7cqw;
  border-bottom:1px solid currentColor;
  padding-bottom:4.2%;
  line-height:1.2;
  letter-spacing:.01em
}

.cover-meta>span:first-child {
  font-weight:bold;
  letter-spacing:-.04em
}

.cover-series {
  font-size:3.8cqw;
  margin-top:4.7%;
  letter-spacing:.05em
}

.cover-art {
  flex:1;
  position:relative;
  min-height:0
}

.cover-footer {
  border-top:1px solid currentColor;
  display:flex;
  justify-content:space-between;
  padding-top:3.5%;
  font-size:3.1cqw;
  letter-spacing:0
}

.thought-type {
  font-family:var(--serif);
  font-size:19.6cqw;
  line-height:.98;
  letter-spacing:-1cqw;
  padding-top:7%
}

.thought-type em {
  font-weight:400;
  position:relative
}

.thought-type em:after {
  content:'';
  position:absolute;
  inset:5% -18% -3%;
  border:1.5px solid var(--accent);
  border-radius:50%;
  transform:rotate(-12deg)
}

.thought-note {
  font-size:5.2cqw;
  color:var(--accent);
  transform:rotate(-5deg);
  margin-top:8%;
  margin-left:2%
}

.thought-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:absolute;
  bottom:4%;
  left:0;
  right:0
}

.huge-serif {
  font-family:var(--serif);
  font-style:italic;
  font-size:27cqw;
  line-height:1
}

.thought-bottom .mono {
  font-size:3.4cqw
}

.cover--field {
  background:#f0efeb
}

.field-title {
  font-family:var(--display);
  font-size:20cqw;
  line-height:1.04;
  letter-spacing:-.6cqw;
  padding-top:6%
}

.field-title>span {
  color:var(--accent)
}

.test-matrix {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:5%;
  font-size:3.2cqw;
  border-top:1px solid var(--ink);
  border-left:1px solid var(--ink)
}

.test-matrix>span {
  padding:6%;
  border-bottom:1px solid var(--ink);
  border-right:1px solid var(--ink)
}

.field-note {
  font-family:var(--serif);
  font-size:4.5cqw;
  line-height:1.25;
  margin:4% 0
}

.cover--lab {
  background:var(--ink);
  color:#f7f7f3;
  border-color:var(--ink)
}

.lab-title {
  font-family:var(--display);
  font-size:18.7cqw;
  line-height:1.07;
  letter-spacing:-.4cqw;
  padding-top:7%
}

.map-diagram {
  position:relative;
  margin-top:6%
}

.map-diagram svg {
  width:100%;
  fill:none;
  stroke:#f5f3ee;
  stroke-width:1.5
}

.map-diagram .map-grid {
  stroke:#6a655d;
  stroke-width:.55
}

.map-diagram .map-route {
  stroke-width:2
}

.map-diagram>span {
  position:absolute;
  left:0;
  top:2%;
  font-size:3.3cqw;
  background:var(--ink);
  padding:2%
}

.lab-note {
  font-size:3cqw;
  margin-top:2%
}

.errata-kicker {
  display:block;
  font-size:3.25cqw;
  margin-top:7%
}

.old-position {
  font-family:var(--serif);
  font-size:10cqw;
  line-height:1.1;
  margin-top:7%;
  position:relative;
  color:#6f6963
}

.proof-mark {
  position:absolute;
  inset:4% -4%;
  width:100%;
  height:100%;
  stroke:var(--accent);
  fill:none;
  stroke-width:2.2
}

.errata-title {
  font-family:var(--serif);
  font-size:23cqw;
  line-height:.92;
  letter-spacing:-1.2cqw;
  margin-top:8%
}

.errata-title em {
  font-weight:400
}

.errata-note {
  color:var(--accent);
  display:block;
  font-size:5.4cqw;
  margin-top:7%;
  transform:rotate(-6deg)
}

.errata-bottom {
  position:absolute;
  bottom:6%;
  font-size:2.9cqw
}

.roadmap-title {
  font-family:var(--serif);
  font-size:16.4cqw;
  line-height:.98;
  letter-spacing:-.65cqw;
  margin-top:8%
}

.route-list {
  font-size:4cqw;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:12%;
  padding-left:9%;
  border-left:1px solid #a5a09a;
  position:relative
}

.route-list>span:nth-child(2) {
  padding-left:18%
}

.route-list>span:nth-child(3) {
  padding-left:36%
}

.route-list>span:nth-child(4) {
  padding-left:61%
}

.fold-line {
  position:absolute;
  left:51%;
  top:-27%;
  bottom:-12%;
  width:1px;
  background:#00000008
}

.permanent {
  position:absolute;
  right:0;
  top:56px;
  width:238px
}

.anchor-label {
  font-size:10px;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  gap:12px
}

.registration {
  font-size:25px;
  line-height:10px;
  font-family:var(--mono)
}

.issue-zero {
  height:328px;
  background:#f6f5f1;
  position:relative;
  border:1px solid #bfbab2;
  box-shadow:2px 3px 0 #eeece7,3px 4px 0 #bdb8ae,7px 10px 15px #1915110c;
  display:flex
}

.zero-spine {
  width:23px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:8px;
  padding:16px 5px;
  border-left:1px solid #c9c4bc;
  letter-spacing:.06em
}

.zero-content {
  flex:1;
  min-width:0;
  padding:17px 17px 14px
}

.zero-content .cover-meta {
  font-size:9px;
  padding-bottom:10px
}

.zero-kicker {
  font-size:8px;
  line-height:1.4;
  margin:20px 0 16px
}

.zero-content h2 {
  font-family:var(--display);
  font-size:49px;
  line-height:1.03;
  font-weight:400;
  letter-spacing:-1px;
  margin:0
}

.zero-content h2 span {
  font-family:var(--serif);
  font-style:italic;
  letter-spacing:-2px;
  font-size:48px
}

.zero-cn {
  font-size:10px;
  line-height:1.65;
  margin:16px 0 0
}

.zero-footer {
  position:absolute;
  bottom:15px;
  left:40px;
  right:17px;
  display:flex;
  justify-content:space-between;
  font-size:7px;
  border-top:1px solid var(--ink);
  padding-top:9px
}

.zero-caption {
  margin-top:23px
}

.zero-caption>.hand {
  font-size:16px;
  display:block;
  transform:rotate(-5deg);
  color:var(--accent)
}

.zero-caption p {
  font-size:11px;
  line-height:1.9;
  margin-top:16px
}

.zero-caption p span {
  color:var(--muted)
}

.table-note {
  position:absolute;
  bottom:14px;
  left:0;
  font-size:10px;
  letter-spacing:.08em
}

.stack-caption {
  position:absolute;
  left:487px;
  bottom:8px;
  font-size:15px;
  transform:rotate(-4deg);
  color:#716b65
}

.selected {
  padding-top:38px
}

.section-rule {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--ink);
  padding-top:17px;
  font-size:10px
}

.section-heading {
  display:flex;
  align-items:end;
  padding:37px 0 47px
}

.section-heading h2 {
  font-family:var(--serif);
  font-weight:400;
  font-size:62px;
  line-height:.98;
  letter-spacing:-2.7px;
  margin:0
}

.section-heading h2 em {
  font-weight:400
}

.section-heading>p {
  margin:0 0 5px 111px;
  font-size:13px;
  line-height:1.9;
  color:#69635c
}

.selection-count {
  margin-left:auto;
  text-align:right;
  font-size:10px;
  padding-bottom:5px
}

.issue-shelf {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:39px;
  padding:7px 0 0
}

.shelf-issue {
  margin:0;
  min-width:0
}

.shelf-cover {
  aspect-ratio:3/4
}

.shelf-cover .cover {
  box-shadow:1px 2px 0 #dedbd5,2px 4px 0 #f1f0ed,3px 5px 0 #d6d2cc,6px 9px 15px #211c140a
}

.shelf-issue--field {
  padding-top:47px
}

.shelf-issue--lab {
  padding-top:9px
}

.shelf-issue--roadmap {
  padding-top:67px
}

.shelf-issue--errata {
  padding-top:31px
}

.shelf-issue--thought .shelf-cover {
  transform:rotate(-2deg)
}

.shelf-issue--field .shelf-cover {
  transform:rotate(1deg)
}

.shelf-issue--roadmap .shelf-cover {
  transform:rotate(-2deg)
}

.shelf-issue--errata .shelf-cover {
  transform:rotate(2deg)
}
figcaption {
  margin-top:23px
}
figcaption>.mono {
  display:flex;
  gap:15px;
  font-size:10px
}
figcaption h3 {
  font-size:13px;
  font-weight:400;
  line-height:1.6;
  margin:12px 0 8px
}
figcaption p {
  font-size:11px;
  line-height:1.8;
  margin:0;
  color:#777068
}

.sample-disclosure {
  color:#837c75;
  font-size:9px;
  letter-spacing:0;
  margin:37px 0 0
}

.desk {
  margin-top:81px
}

.desk-layout {
  display:grid;
  grid-template-columns:265px 1fr;
  gap:52px;
  padding:51px 0 71px
}

.desk-heading h2 {
  font-family:var(--serif);
  font-weight:400;
  font-size:68px;
  line-height:.95;
  letter-spacing:-3px;
  margin:0
}

.desk-heading p {
  font-size:12px;
  color:#6e685f;
  margin:22px 0
}

.desk-heading .hand {
  display:block;
  transform:rotate(-6deg);
  font-size:16px;
  color:#777068;
  margin-top:36px
}

.desk-papers {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:62px;
  row-gap:44px;
  padding-top:3px
}

.desk-paper {
  position:relative;
  padding:13px 0 14px;
  border-top:1px solid #c9c4bb
}

.desk-status {
  font-size:9px
}

.desk-paper h3 {
  font-family:var(--serif);
  font-size:28px;
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.7px;
  margin:18px 0 10px
}

.desk-paper>p {
  font-size:11px;
  color:#777068;
  line-height:1.7;
  margin:0
}

.desk-mark {
  font-size:12px;
  color:#777068;
  display:block;
  margin-top:20px;
  transform:rotate(-2deg)
}

.desk-paper--writing {
  transform:rotate(-2deg)
}

.desk-paper--building {
  margin-top:25px;
  transform:rotate(1deg)
}

.desk-paper--draft {
  margin-left:25px;
  transform:rotate(1deg);
  border-top-style:dashed
}

.desk-paper--draft h3 {
  text-decoration:line-through;
  text-decoration-color:#9e392b88;
  text-decoration-thickness:1px
}

.desk-paper--published {
  margin-left:4px;
  transform:rotate(-2deg)
}

.desk-paper--published .desk-status {
  color:var(--accent)
}

.desk-paper--published .desk-mark {
  font-size:9px;
  display:inline-block;
  border:1px solid #9e392b99;
  color:var(--accent);
  padding:4px 7px;
  transform:rotate(-4deg)
}
footer {
  border-top:1px solid var(--ink);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px 0 34px
}
footer .wordmark {
  font-size:22px
}
footer p {
  font-family:var(--serif);
  font-size:23px;
  letter-spacing:-.5px;
  margin:0
}

.proof-period {
  color:var(--accent)
}
footer>.mono {
  text-align:right;
  font-size:9px
}

/* Desktop reference only. Preserve a usable canvas on smaller windows;
   mobile
   art direction is intentionally reserved for the next phase. */
@media(min-width:1500px) {
  .hero-composition {
  grid-template-columns:minmax(0,1fr) 330px
}
h1 {
  font-size:125px
}

.last-line {
  font-size:129px
}

.stack-item--left {
  left:64px
}

.stack-item--back {
  left:295px
}

.stack-item--front {
  left:385px
}

.stack-item--slip {
  left:690px
}

}

@media(max-width:1250px) {
  .page {
  padding:0 40px
}

.masthead {
  gap:30px
}

.hero-composition {
  gap:34px;
  grid-template-columns:minmax(0,1fr) 258px
}
h1 {
  font-size:88px
}

.last-line {
  font-size:94px
}

.hero-intro {
  padding-top:30px
}

.intro-en {
  font-size:20px
}

.stack {
  transform:scale(.81);
  transform-origin:0 0
}

.permanent {
  width:215px
}

.magazine-stage {
  height:555px
}

.zero-content {
  padding-left:13px;
  padding-right:13px
}

.zero-content h2 {
  font-size:44px
}

.zero-content h2 span {
  font-size:44px
}

.stack-caption {
  left:285px
}

.issue-shelf {
  gap:27px
}

.section-heading>p {
  margin-left:65px
}

.desk-layout {
  grid-template-columns:220px 1fr;
  gap:40px
}

.desk-papers {
  column-gap:40px
}

}