:root{
    --paper:#f2ede1; --paper-2:#eae3d4; --paper-3:#e2dac9;
    --ink:#1b1917; --ink-2:#3c3833; --grey:#7d776e; --grey-2:#a29b90;
    --vermilion:#b42718;
    --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
    --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    --cjk:'Songti SC','Noto Serif CJK SC','Source Han Serif SC',serif;
    --measure:34rem;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--serif); font-size:18px; line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none; border-bottom:1px solid var(--grey-2)}
  a:hover{border-bottom-color:var(--vermilion)}

  .wrap{max-width:62rem; margin:0 auto; padding:0 2rem}
  .rule{height:1px; background:var(--grey-2); opacity:.5; margin:0}

  /* apparatus type: the survey-sheet voice */
  .apparatus{
    font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--grey);
  }

  /* ---------- masthead ---------- */
  header.mast{position:relative; overflow:hidden}
  #terrain{display:block; width:100%; height:56vh; min-height:340px; max-height:520px}
  .mast-type{
    position:absolute; left:0; right:0; top:0; padding:2.4rem 0 0;
    pointer-events:none;
  }
  .mast-type .wrap{pointer-events:auto}
  h1.title{
    font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,6vw,4.1rem);
    letter-spacing:.005em; margin:0; line-height:1;
  }
  .subtitle{margin:.7rem 0 0; font-style:italic; font-size:1.05rem; color:var(--ink-2)}
  .seal{
    position:absolute; right:2rem; bottom:1.8rem; width:58px; height:58px;
    background:var(--vermilion); color:#f6f1e6;
    display:grid; place-items:center; font-family:var(--cjk); font-size:38px;
    line-height:1; border-radius:3px; user-select:none;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  }

  /* ---------- sections ---------- */
  section{padding:4.6rem 0 0}
  .sec-head{display:flex; align-items:baseline; gap:1.2rem; margin-bottom:.35rem}
  .sec-head h2{
    font-weight:400; font-size:1.02rem; margin:0;
    font-family:var(--mono); letter-spacing:.16em; text-transform:uppercase;
  }
  .sec-note{max-width:var(--measure); color:var(--ink-2); margin:1.1rem 0 2.2rem; font-size:1rem}
  .sec-note p{margin:0 0 .8rem}
  .sec-note p:last-child{margin-bottom:0}

  /* the opening: the journey */
  .lede{max-width:38rem; font-size:1.16rem; line-height:1.58}
  .lede p{margin:0 0 1.15rem}
  .movement{margin-top:3.2rem}
  .movement > h3{
    font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--grey); font-weight:400;
    margin:0 0 1.2rem; padding-bottom:.6rem; border-bottom:1px solid var(--paper-3);
    max-width:38rem;
  }
  .pull{
    margin:2.2rem 0; max-width:34rem; font-size:1.28rem; line-height:1.42;
    padding-left:1.4rem; border-left:2px solid var(--vermilion);
  }
  .pull .who{display:block; margin-top:.6rem}
  .ruled{margin:1.8rem 0 0; max-width:38rem}
  .ruled h4{
    font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--grey); font-weight:400; margin:0 0 .7rem;
  }
  .ruled ul{list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:.4rem 2rem}
  .ruled li{display:flex; gap:.6rem; align-items:baseline; font-size:.95rem; color:var(--ink-2)}
  .ruled li > span{flex:1 1 auto}
  .ruled li::before{
    content:'×'; color:var(--vermilion); font-family:var(--mono); font-size:.85rem;
    flex:0 0 auto; line-height:1.6;
  }
  .standard{
    margin-top:2.6rem; max-width:38rem; padding:1.1rem 1.3rem;
    background:rgba(255,255,255,.42); border-top:1px solid var(--grey-2);
  }
  .standard .apparatus{display:block; margin-bottom:.35rem}
  .standard strong{font-weight:400; font-size:1.1rem}

  /* weather reports */
  .weather{display:grid; gap:0; border-top:1px solid var(--grey-2)}
  .wx{display:grid; grid-template-columns:7rem 1fr; gap:1.2rem;
    padding:1.15rem 0; border-bottom:1px solid var(--paper-3)}
  .wx p{margin:0; max-width:var(--measure)}
  .wx .when{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
    color:var(--grey); padding-top:.42rem; text-transform:uppercase}

  /* reading map */
  .strands{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
    gap:2rem 2.4rem; border-top:1px solid var(--grey-2); padding-top:1.6rem}
  .strand h3{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--grey); font-weight:400; margin:0 0 .7rem}
  .strand ul{list-style:none; margin:0; padding:0}
  .strand li{display:flex; gap:.6rem; align-items:baseline; padding:.2rem 0; font-size:.98rem}
  .mark{flex:0 0 auto; width:7px; height:7px; margin-top:.55rem; border:1px solid var(--ink-2)}
  .mark.read{background:var(--ink-2)}
  .mark.now{background:linear-gradient(135deg,var(--vermilion) 50%,transparent 50%);
    border-color:var(--vermilion)}
  .legend{margin-top:2.4rem; display:flex; gap:1.6rem; flex-wrap:wrap}
  .legend span{display:flex; align-items:center; gap:.45rem}

  /* passages */
  .passage{border-top:1px solid var(--grey-2); padding-top:1.8rem; margin-bottom:3.4rem}
  .takes{border-top:1px solid var(--paper-3)}
  .take{display:grid; grid-template-columns:7rem 1fr; gap:1.2rem;
    padding:1.15rem 0; border-bottom:1px solid var(--paper-3)}
  .take:last-child{border-bottom:none}
  .take p{margin:0 0 .8rem; max-width:var(--measure)}
  .take p:last-child{margin-bottom:0}
  .take .when{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
    color:var(--grey); padding-top:.42rem; text-transform:uppercase}
  .take-label{display:block; font-style:italic; color:var(--ink-2); margin-bottom:.4rem}
  blockquote.source{
    margin:0 0 2rem; padding-left:1.4rem; border-left:2px solid var(--vermilion);
    font-size:1.12rem; max-width:var(--measure);
  }
  blockquote.source .cite{display:block; margin-top:.7rem}

  /* footer */
  footer{margin-top:5.5rem; padding:2.6rem 0 4rem; border-top:1px solid var(--grey-2)}
  .foot{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap}
  .foot > div{max-width:26rem}
  .foot p{margin:0 0 .4rem; font-size:.95rem; color:var(--ink-2)}
  .foot p:last-child{margin-bottom:0}
  /* the colophon is prose, not a label: sentence case, no tracking */
  .foot-aside{font-size:.9rem; color:var(--grey)}
  .foot-aside p{margin:0 0 .4rem}
  .foot-aside p:last-child{margin-bottom:0}

  .todo{color:var(--vermilion); font-family:var(--mono); font-size:.58rem;
    letter-spacing:.1em; text-transform:uppercase; vertical-align:.35em}

  @media (max-width:720px){
    .wx,.take{grid-template-columns:1fr; gap:.3rem}
    #terrain{height:40vh}
  }

  /* ---------- essays ---------- */
  .cell-t{display:block; font-size:1.06rem; line-height:1.35}
  .cell-m{display:block; margin-top:.32rem; font-size:.9rem; color:var(--grey)}
  .entries{border-top:1px solid var(--grey-2)}
  .entry{display:grid; grid-template-columns:11rem 1fr; gap:1.2rem;
    padding:1.3rem 0; border-bottom:1px solid var(--paper-3)}
  .entry .when{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--grey); padding-top:.42rem}
  .entry .cell-t{font-size:1.14rem}
  .entry .cell-m{max-width:var(--measure)}
  .entry.empty .cell-t{color:var(--grey-2); font-style:italic}

  header.mast-essay #terrain{height:44vh; min-height:280px; max-height:400px}
  .kicker{margin:0 0 1rem}
  .kicker a{border-bottom:none}
  .kicker a:hover{border-bottom:1px solid var(--vermilion)}
  header.mast-essay h1.title{font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.05}
  header.mast-essay .subtitle{max-width:32rem}

  .essay{max-width:36rem; padding-top:3.4rem; font-size:1.12rem; line-height:1.62}
  .essay > p{margin:0 0 1.3rem}
  .essay h2{font-family:var(--serif); font-weight:400; font-size:1.5rem;
    line-height:1.2; margin:2.8rem 0 1rem}
  .essay h3,.essay h4{font-family:var(--mono); font-weight:400; font-size:.68rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
    margin:2.4rem 0 .8rem}
  .essay blockquote{margin:1.9rem 0; padding-left:1.4rem;
    border-left:2px solid var(--grey-2); color:var(--ink-2)}
  .essay blockquote p{margin:0 0 .7rem}
  .essay blockquote p:last-child{margin:0}
  .essay ul,.essay ol{margin:0 0 1.3rem; padding-left:1.3rem}
  .essay li{margin:.3rem 0}
  .essay hr{border:none; border-top:1px solid var(--grey-2); margin:2.8rem 0}
  .essay img{max-width:100%; height:auto; display:block}
  /* figures work anywhere a note's prose does */
  .figure{margin:2.4rem 0; max-width:52rem}
  .figure img{display:block; width:100%; height:auto; border:1px solid var(--paper-3)}
  .figure figcaption{margin-top:.6rem}
  .essay > .figure{width:calc(100vw - 4rem); max-width:52rem}
  .lede .figure,.sec-note .figure,.wx .figure,.take .figure,.foot .figure{
    margin:1.6rem 0; max-width:100%; width:auto}
  .lede .figure:first-child,.sec-note .figure:first-child{margin-top:0}
  .essay-foot{max-width:36rem; margin-top:3.2rem; padding-top:1.4rem;
    border-top:1px solid var(--grey-2)}
  .essay-foot p{margin:0 0 .5rem}

  @media (max-width:720px){
    .entry{grid-template-columns:1fr; gap:.3rem}
    .figure{width:auto}
  }

  .more{margin:1.5rem 0 0}
  .archive{padding-top:3rem}
  .archive .weather,.archive .entries{border-top:1px solid var(--grey-2)}