@media (max-width: 700px) {
  #chrome nav {
    height: 58px;
    padding: 0 15px;
    gap: 0;
    justify-content: space-between;
  }
  .brand a {
    font-size: 16px;
    gap: 5px;
  }
  .brand svg {
    width: 25px;
  }
  .navmiddle {
    flex: 0;
    font-size: 0;
    letter-spacing: 0;
  }
  .backlink {
    font-size: 11px;
    white-space: nowrap;
  }
  .navdivider {
    display: none;
  }
  .navtools {
    gap: 13px;
    font-size: 13px;
  }
  .navtools .to-review {
    display: none;
  }
  .find {
    gap: 3px;
  }
  .find svg {
    width: 14px;
  }
  .canvas {
    width: 390px;
    height: 735px;
  }
  .a-first .canvas {
    background: #e8eae2;
  }
  .ground {
    inset: 514px 0 0;
  }
  .mast {
    left: 15px;
    top: 6px;
    font-size: 54px;
    letter-spacing: 0.035em;
  }
  .mast-sub {
    left: 19px;
    top: 98px;
    font-size: 12px;
    letter-spacing: 0.11em;
  }
  .aside-year {
    right: 9px;
    top: 105px;
    font-size: 10px;
  }
  .window {
    left: 105px;
    top: 200px;
    width: 211px;
    height: 337px;
    border-radius: 115px 115px 0 0;
  }
  .a-lil {
    left: 66px;
    top: 233px;
    width: 297px;
    height: 324px;
  }
  .a-taylor {
    left: 15px;
    top: 167px;
    width: 98px;
  }
  .a-taylor img {
    height: 121px;
  }
  .a-tn {
    left: 12px;
    top: 313px;
    width: 105px;
  }
  .a-tn .person-name {
    font-size: 17px;
    max-width: 94px;
  }
  .a-tn .person-note,
  .a-fn .person-note {
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0;
  }
  .a-fay {
    left: 283px;
    top: 141px;
    width: 71px;
    height: 91px;
  }
  .a-fn {
    left: 280px;
    top: 243px;
    width: 95px;
  }
  .a-fn .person-name {
    font-size: 18px;
  }
  .a-ln {
    left: 110px;
    top: 470px;
  }
  .a-ln .person-name {
    font-size: 28px;
    letter-spacing: -0.07em;
  }
  .a-ln .person-note {
    font-size: 12px;
  }
  .a-factory {
    left: 0;
    top: 595px;
    width: 211px;
    height: 105px;
  }
  .a-factory span {
    left: 4px;
    bottom: 6px;
    font-size: 9px;
  }
  .a-sheet {
    left: 244px;
    top: 549px;
    width: 111px;
  }
  .folio-caption {
    left: 207px;
    top: 549px;
    writing-mode: horizontal-tb;
    font-size: 11px;
    width: 120px;
    transform: translateX(-62px);
    color: #ecd3af;
  }
  .folio-caption br {
    display: none;
  }
  .folio-caption b {
    margin-left: 2px;
  }
  .deck-foot {
    min-height: 51px;
    padding: 8px 14px;
    font-size: 11px;
  }
  .deck-foot > div {
    gap: 12px;
  }
  .drag-hint {
    display: none;
  }
  .panprev {
    font-size: 17px;
  }
  .second-field {
    width: 163px;
  }
  .continuation {
    left: 13px;
    top: 19px;
    font-size: 10px;
  }
  .a-next h2 {
    left: 12px;
    top: 83px;
    font-size: 45px;
  }
  .more-title {
    width: 113px;
    left: 18px;
    top: 266px;
  }
  .more-frank {
    left: 190px;
    top: 145px;
    width: 152px;
  }
  .more-frank img {
    max-height: 244px;
  }
  .more-frank strong {
    font-size: 18px;
  }
  .more-frank small {
    font-size: 11px;
  }
  .more-trail {
    left: 172px;
    top: 493px;
    width: 202px;
  }
  .more-trail b {
    font-size: 26px;
    margin: 8px 0;
  }
  .more-trail span,
  .more-trail small {
    font-size: 12px;
  }
  .note2 {
    left: 13px;
    top: 577px;
    width: 134px;
    font-size: 12px;
    color: #ecedda;
  }
  .spine {
    width: 79px;
  }
  .spine-title {
    left: 19px;
    top: 28px;
    font-size: 42px;
    letter-spacing: 0.17em;
  }
  .spine-caption {
    left: 31px;
    top: 369px;
    font-size: 12px;
  }
  .b-direction {
    left: 6px;
    bottom: 18px;
    font-size: 10px;
  }
  .b-mark {
    left: 105px;
    top: 24px;
    font-size: 14px;
  }
  .b-taylor {
    left: 101px;
    top: 87px;
    width: 95px;
  }
  .b-tn {
    left: 203px;
    top: 102px;
    width: 170px;
  }
  .b-tn .person-name {
    font-size: 20px;
  }
  .b-first .person-note {
    font-size: 10px;
  }
  .b-title {
    left: 86px;
    top: 265px;
    width: 120px;
  }
  .b-fdoc {
    left: 202px;
    top: 244px;
    width: 130px;
  }
  .b-fay {
    left: 282px;
    top: 201px;
    width: 65px;
  }
  .b-fn {
    left: 213px;
    top: 477px;
  }
  .b-fn .person-name {
    font-size: 20px;
  }
  .b-lil {
    left: 231px;
    top: 513px;
    width: 175px;
    height: 222px;
  }
  .b-ln {
    left: 101px;
    top: 641px;
  }
  .b-ln .person-name {
    font-size: 22px;
  }
  .b-ednote {
    left: 106px;
    top: 509px;
    font-size: 14px;
  }
  .b-bottom {
    padding: 36px 7vw 65px;
    font-size: 14px;
  }
  .entrance-image {
    left: 9px;
    top: 124px;
    width: 462px;
    height: 533px;
  }
  .life {
    left: 20px;
    top: 40px;
    font-size: 25px;
  }
  .life span {
    font-size: 11px;
  }
  .entrance-name {
    left: 19px;
    top: 85px;
    font-size: 77px;
  }
  .entrance-name span {
    font-size: 34px;
    margin-top: 1px;
  }
  .entrance-word {
    left: 21px;
    top: 604px;
    width: 330px;
  }
  .entrance-word p {
    font-size: 19px;
    margin-bottom: 12px;
  }
  .entrance-credit {
    right: 8px;
    bottom: 8px;
    font-size: 9px;
  }
  .actionlink {
    font-size: 14px;
  }
  .fayo .entrance-image {
    left: 43px;
    top: 174px;
    width: 236px;
    height: 305px;
  }
  .fayo .entrance-name,
  .fayo .life,
  .fayo .entrance-word {
    left: 21px;
  }
  .fayo .entrance-name {
    font-size: 59px;
    top: 67px;
  }
  .fayo .entrance-word {
    top: 515px;
  }
  .tayl .entrance-image {
    left: 133px;
    top: 178px;
    width: 211px;
    height: 291px;
  }
  .tayl .life,
  .tayl .entrance-name,
  .tayl .entrance-word {
    left: 21px;
  }
  .tayl .entrance-name {
    font-size: 40px;
    top: 89px;
  }
  .tayl .entrance-word {
    top: 510px;
  }
  .fran .entrance-image {
    left: 140px;
    top: 181px;
    width: 180px;
    height: 335px;
  }
  .fran .entrance-word {
    top: 530px;
  }
  .postscript {
    font-size: 12px;
    gap: 13px;
    padding: 14px 17px;
    flex-wrap: wrap;
  }
  .reader {
    display: block;
    padding: 28px 6vw 64px;
  }
  .contents,
  .marginal {
    position: static;
  }
  .contents {
    margin-bottom: 25px;
  }
  .contents > p,
  .contents > b,
  .contents > a {
    display: none;
  }
  .contents ol {
    margin: 0;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .contents li {
    margin: 0;
    gap: 3px;
  }
  .contents li:before {
    display: none;
  }
  .reading h1 {
    font-size: 39px;
  }
  .reading h2 {
    font-size: 27px;
  }
  .reading section > p {
    font-size: 18px;
  }
  .reading section {
    margin-bottom: 35px;
  }
  .marginal {
    margin-top: 40px;
    max-width: 230px;
  }
  .marginal img {
    width: 112px;
  }
  .sourcepage,
  .archive-page {
    padding: 34px 7vw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .large-year {
    writing-mode: horizontal-tb;
    font-size: 43px;
  }
  .archive-fig button {
    width: 43%;
  }
  .era-number {
    left: 14px;
    top: -5px;
    font-size: 77px;
  }
  .era-place {
    left: 194px;
    top: 42px;
    font-size: 12px;
  }
  .era-board h1 {
    left: 18px;
    top: 104px;
    font-size: 38px;
  }
  .era-factory {
    left: 0;
    top: 184px;
    width: 390px;
    height: 185px;
  }
  .era-note {
    left: 18px;
    top: 393px;
    width: 355px;
  }
  .era-note b {
    font-size: 25px;
  }
  .era-note p {
    font-size: 16px;
    line-height: 1.6;
    margin: 8px 0;
  }
  .era-note small {
    font-size: 10px;
  }
  .era-note small br {
    display: none;
  }
  .era-years {
    left: 18px;
    right: 12px;
    top: 559px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 9px;
  }
  .era-years strong {
    grid-column: 1/-1;
    font-size: 12px;
  }
  .era-years a {
    font-size: 14px;
  }
  .era-years i {
    font-size: 16px;
  }
  .era-to {
    left: 18px;
    top: 681px;
    gap: 13px;
    font-size: 11px;
  }
  .trail-intro {
    left: 17px;
    top: 32px;
  }
  .trail-intro .kicker {
    font-size: 11px;
  }
  .trail-intro h1 {
    font-size: 38px;
    margin: 12px 0;
  }
  .trail-intro p {
    font-size: 13px;
  }
  .trail-svg {
    display: none;
  }
  .trail-c:after,
  .trail-f:after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  .trail-c:after {
    width: 82px;
    height: 80px;
    border-left: 2px dashed #bd745f;
    border-bottom: 2px dashed #bd745f;
    transform: skew(-24deg);
    left: -67px;
    top: 35px;
  }
  .trail-f:after {
    width: 63px;
    height: 95px;
    border-right: 3px solid #dbca91;
    transform: skew(-16deg);
    right: -29px;
    top: -87px;
  }
  .trail-l {
    left: 19px;
    top: 289px;
  }
  .trail-c {
    left: 157px;
    top: 199px;
  }
  .trail-f {
    left: 40px;
    top: 496px;
  }
  .trail-t {
    left: 269px;
    top: 386px;
  }
  .trail-edge {
    left: 228px;
    top: 466px;
    font-size: 10px;
  }
  .trail-board a b,
  .trail-c b {
    font-size: 25px;
  }
  .trail-board small,
  .trail-board a span {
    font-size: 12px;
  }
  .trail-footer {
    left: 18px;
    right: 15px;
    bottom: 28px;
    display: block;
  }
  .trail-footer a {
    display: block;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .graphpage {
    padding: 28px 5vw 45px;
  }
  .graph-layout {
    display: block;
  }
  .net {
    height: 245px;
  }
  .node {
    padding: 3px 4px;
  }
  .node b {
    font-size: 15px;
  }
  .node small {
    font-size: 10px;
  }
  .edge {
    font-size: 10px;
  }
  .graph-foot {
    gap: 15px;
  }
  .graph-head p {
    font-size: 14px;
  }
  #edgeinfo {
    padding: 20px 0 0;
  }
  #edgeinfo h2 {
    font-size: 24px;
  }
  .review,
  .craft {
    padding: 30px 5vw 55px;
  }
  .review-grid,
  .craft-pair {
    grid-template-columns: 1fr 1fr;
    gap: 22px 10px;
  }
  .review-grid b {
    font-size: 16px;
  }
  .review-grid small {
    font-size: 11px;
  }
  .craft-pair figure > img,
  .craft-pair .cut-lil {
    height: 175px;
  }
  .craft-pair figcaption {
    font-size: 11px;
  }
  dialog {
    padding: 28px 20px;
  }
  .graph-head h1 {
    font-size: 35px;
  }
}
@media (max-width: 700px) {
  .a-first .window {
    left: 106px;
    width: 175px;
  }
  .a-fn {
    left: 293px;
    width: 89px;
  }
  .a-tn {
    left: 13px;
    width: 110px;
  }
  .a-fn .given,
  .a-tn .given {
    display: block;
  }
  .a-fn .middot,
  .a-tn .middot,
  .a-fn .book-note,
  .a-tn .book-note {
    display: none;
  }
  .a-fn .person-note,
  .a-tn .person-note {
    font-size: 11px;
  }
  .folio-caption {
    left: 18px;
    top: 550px;
    transform: none;
    white-space: nowrap;
    width: auto;
    letter-spacing: 0.06em;
    color: #f0ddbd;
    font-size: 12px;
  }
  .folio-caption b {
    margin-left: 7px;
  }
  .mobile-trail {
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .trail-c:after,
  .trail-f:after {
    display: none;
  }
}
@media (max-width: 700px) {
  .more-simon {
    left: 187px;
    top: 110px;
    width: 196px;
  }
  .more-simon i {
    font-size: 74px;
  }
  .more-simon span {
    font-size: 11px;
    margin: 12px 0 21px;
  }
  .more-simon strong {
    font-size: 45px;
  }
  .more-simon small {
    font-size: 12px;
    margin-top: 16px;
  }
  .simon-study {
    display: block;
    padding: 38px 7vw 72px;
  }
  .simon-meta {
    margin-bottom: 36px;
  }
  .simon-body p:not(.kicker) {
    font-size: 18px;
  }
}