/* Rowan Logbook — a register of Jacksonville place names.
   Archetype: the card catalogue. The index is a stack of filed cards, each with a ruled top
   edge and a half circle punched out of its bottom edge. Every article heading is two tiers:
   the name in use now, and beneath it the name it replaced, struck through in copper. The
   navigation is the five layer words with a filled square under the current one.

   No hero, no image above the fold, no rail, no marginalia, no floating control. One centred
   measure. Palette Foolscap. Gelasio for display, Radio Canada for reading, Rokkitt for the
   layer tags and the years and nothing else. */

@font-face{font-family:"Gelasio";src:url("/assets/font/gelasio-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Gelasio";src:url("/assets/font/gelasio-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Radio";src:url("/assets/font/radiocanada-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Radio";src:url("/assets/font/radiocanada-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Rokkitt";src:url("/assets/font/rokkitt-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

:root{
  --nm-paper:#eeeae3; --nm-dim:#e2ddd3; --nm-card:#faf8f4;
  --nm-ink:#20211c; --nm-deep:#0e0f0c; --nm-muted:#66655c;
  --nm-iron:#2a4a63; --nm-copper:#9a5a34; --nm-hair:#cfc9bd;
  --nm-good:#3a6b4c; --nm-bad:#8e3230;
  --nm-face:"Gelasio",Georgia,serif;
  --nm-text:"Radio","Helvetica Neue",Arial,sans-serif;
  --nm-slab:"Rokkitt",Rockwell,Georgia,serif;
  --nm-hold:41rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nm-paper);color:var(--nm-ink);
  font-family:var(--nm-text);font-weight:400;font-size:1.02rem;line-height:1.57;
  overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--nm-iron);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--nm-copper)}
:focus-visible{outline:2px solid var(--nm-copper);outline-offset:2px}

.nm-skip{position:absolute;left:-9999px}
.nm-skip:focus{position:static;display:inline-block;margin:.5rem;padding:.4rem .7rem;
  background:var(--nm-ink);color:var(--nm-card)}

.nm-hold{max-width:var(--nm-hold);margin:0 auto;padding:0 1.15rem}

/* --- masthead. Type only, no image, no rule above the wordmark. --- */

.nm-mast{border-bottom:1px solid var(--nm-hair);background:var(--nm-paper);padding:1.5rem 0 0}
.nm-word{display:block;text-decoration:none;color:inherit}
.nm-word-name{display:block;font-family:var(--nm-face);font-weight:700;font-size:1.72rem;
  line-height:1.12;letter-spacing:-.008em}
.nm-word-say{display:block;font-family:var(--nm-slab);font-size:.83rem;color:var(--nm-muted);
  letter-spacing:.1em;text-transform:lowercase;margin-top:.2rem}

/* the five layer words, with a filled square under the current one */
.nm-layers{margin:1.1rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:1.25rem}
.nm-layers a{font-family:var(--nm-slab);font-size:.84rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--nm-muted);
  display:block;padding-bottom:.62rem;position:relative}
.nm-layers a:hover{color:var(--nm-ink)}
.nm-layers a[aria-current]{color:var(--nm-ink)}
.nm-layers a[aria-current]::after{content:"";position:absolute;left:0;bottom:.18rem;
  width:.42rem;height:.42rem;background:var(--nm-iron)}

.nm-bar{display:none}
.nm-nav{margin:.4rem 0 0;padding:0 0 1rem;list-style:none;
  display:flex;flex-wrap:wrap;gap:.15rem 1rem}
.nm-nav a{font-size:.87rem;color:var(--nm-muted);text-decoration:none}
.nm-nav a:hover,.nm-nav a[aria-current]{color:var(--nm-ink);text-decoration:underline}

/* --- the page --- */

main{display:block;padding:2rem 0 0}
.nm-brow{font-family:var(--nm-slab);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--nm-copper);margin:0 0 .45rem}
h1{font-family:var(--nm-face);font-weight:700;font-size:2.02rem;line-height:1.15;margin:0;
  letter-spacing:-.012em}

/* the two tier heading: the name now, and the name it replaced struck through */
.nm-was{margin:.5rem 0 0;font-family:var(--nm-slab);font-size:.95rem;color:var(--nm-muted)}
.nm-was b{font-weight:500;color:var(--nm-ink);position:relative;
  text-decoration:line-through;text-decoration-color:var(--nm-copper);
  text-decoration-thickness:1px}
.nm-was i{font-style:normal}

.nm-stand{font-size:1.09rem;color:var(--nm-muted);margin:.85rem 0 0}
.nm-sec{margin-top:2rem}
h2{font-family:var(--nm-face);font-weight:600;font-size:1.34rem;line-height:1.25;
  margin:0 0 .55rem}
h3{font-family:var(--nm-text);font-weight:500;font-size:1.04rem;margin:1.3rem 0 .35rem}
p{margin:0 0 .9rem}
ul,ol{margin:0 0 .9rem;padding-left:1.15rem}
li{margin-bottom:.35rem}
blockquote{margin:1rem 0;padding:.1rem 0 .1rem 1rem;border-left:3px solid var(--nm-copper);
  color:var(--nm-muted)}
code{font-family:var(--nm-slab);font-size:.95em;background:var(--nm-dim);padding:.05em .25em}
strong{font-weight:500;color:var(--nm-deep)}

/* --- the four facts every name article carries --- */

.nm-four{margin:1.4rem 0 0;padding:0;list-style:none;border-top:1px solid var(--nm-ink)}
.nm-four>div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.9rem;
  padding:.55rem 0;border-bottom:1px solid var(--nm-hair)}
.nm-four dt{font-family:var(--nm-slab);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--nm-muted);margin:0}
.nm-four dd{margin:0;font-size:.97rem}

/* --- the card catalogue: the signature --- */

.nm-cards{margin:1.5rem 0 0;padding:0;list-style:none}
.nm-cards li{position:relative;margin-bottom:1.15rem}
.nm-cards li::before{display:none}
.nm-card{display:block;position:relative;background:var(--nm-card);
  border:1px solid var(--nm-hair);border-top:2px solid var(--nm-ink);
  padding:.95rem 1rem 1.25rem;text-decoration:none;color:inherit}
.nm-card:hover{background:#fff}
/* the punch: a half circle taken out of the bottom edge */
.nm-card::after{content:"";position:absolute;left:50%;bottom:0;
  width:1.05rem;height:1.05rem;transform:translate(-50%,50%);
  background:var(--nm-paper);border:1px solid var(--nm-hair);border-radius:50%}
.nm-card-name{display:block;font-family:var(--nm-face);font-weight:700;font-size:1.16rem;
  line-height:1.2}
.nm-card-was{display:block;font-family:var(--nm-slab);font-size:.86rem;color:var(--nm-muted);
  margin-top:.15rem}
.nm-card-say{display:block;font-size:.92rem;color:var(--nm-muted);margin-top:.45rem}
.nm-card-foot{display:flex;gap:.8rem;align-items:baseline;margin-top:.6rem}
.nm-tag{font-family:var(--nm-slab);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--nm-card);background:var(--nm-iron);padding:.1rem .42rem}
.nm-year{font-family:var(--nm-slab);font-size:.86rem;color:var(--nm-muted)}

/* the layer heading above each group of cards */
.nm-layer{margin:2.1rem 0 0;padding-bottom:.3rem;border-bottom:2px solid var(--nm-ink);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.nm-layer h2{margin:0}
.nm-layer p{margin:0;font-family:var(--nm-slab);font-size:.84rem;color:var(--nm-muted);
  letter-spacing:.06em}

/* --- doors: the read-next block --- */

.nm-doors{margin:2.2rem 0 0;padding:0;list-style:none;border-top:1px solid var(--nm-ink)}
.nm-doors li{border-bottom:1px solid var(--nm-hair);margin:0;padding:0}
.nm-doors li::before{display:none}
.nm-doors a{display:block;padding:.7rem 0;text-decoration:none;color:inherit}
.nm-doors a:hover{background:var(--nm-dim)}
.nm-doors b{display:block;font-family:var(--nm-face);font-weight:600;font-size:1.02rem}
.nm-doors span{display:block;font-size:.9rem;color:var(--nm-muted);margin-top:.1rem}

/* --- figures --- */

figure{margin:1.5rem 0 0}
figure img{border:1px solid var(--nm-hair)}
figcaption{font-size:.88rem;color:var(--nm-muted);margin-top:.45rem;
  padding-left:.7rem;border-left:2px solid var(--nm-copper)}

/* --- tables scroll inside themselves, never the page --- */

.nm-scroll{overflow-x:auto;margin:1.2rem 0 0;border:1px solid var(--nm-hair)}
table{border-collapse:collapse;width:100%;font-size:.93rem;background:var(--nm-card)}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--nm-hair);
  vertical-align:top}
th{font-family:var(--nm-slab);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  background:var(--nm-dim);color:var(--nm-ink);white-space:nowrap}
tr:last-child td{border-bottom:0}

/* --- questions --- */

.nm-ask{margin-top:1.6rem}
.nm-ask h2{font-size:1.09rem;font-family:var(--nm-text);font-weight:500;
  border-top:1px solid var(--nm-hair);padding-top:.9rem}

/* --- forms: the letter, and the fare search --- */

.nm-form,.nm-desk{margin:1.6rem 0 0;background:var(--nm-card);
  border:1px solid var(--nm-hair);border-top:2px solid var(--nm-ink);padding:1.1rem 1rem 1.2rem}
.nm-grid{display:grid;gap:.85rem}
.nm-field label{display:block;font-family:var(--nm-slab);font-size:.82rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--nm-muted);margin-bottom:.22rem}
.nm-field input,.nm-field select,.nm-field textarea{width:100%;font:inherit;font-size:.97rem;
  padding:.48rem .55rem;background:var(--nm-paper);color:var(--nm-ink);
  border:1px solid var(--nm-muted);border-radius:0}
.nm-field.is-void input,.nm-field.is-void select,.nm-field.is-void textarea{
  border-color:var(--nm-bad);background:#fdf6f5}
.nm-void{margin:.28rem 0 0;font-size:.85rem;color:var(--nm-bad)}
.nm-trap{position:absolute;left:-9999px}
.nm-go{margin:1.05rem 0 0}
.nm-go button{font-family:var(--nm-slab);font-size:.9rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.6rem 1.15rem;border:0;cursor:pointer;
  background:var(--nm-ink);color:var(--nm-card)}
.nm-go button:hover{background:var(--nm-iron)}
.nm-go button[disabled]{background:var(--nm-muted);cursor:default}
.nm-tiny{font-size:.85rem;color:var(--nm-muted);margin:.8rem 0 0}
.nm-else{margin:.7rem 0 0;font-size:.9rem;color:var(--nm-bad)}
.nm-said{font-family:var(--nm-slab);font-size:.87rem;color:var(--nm-bad);display:block;
  margin-top:.6rem}
.nm-said.is-filed{color:var(--nm-good)}

.nm-two{display:grid;gap:.85rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.nm-hits{position:absolute;z-index:5;left:0;right:0;margin:.15rem 0 0;padding:0;list-style:none;
  background:var(--nm-card);border:1px solid var(--nm-ink);max-height:15rem;overflow-y:auto}
.nm-hits li{margin:0;padding:0}
.nm-hits li::before{display:none}
.nm-hits button{display:block;width:100%;text-align:left;font:inherit;font-size:.92rem;
  padding:.42rem .55rem;background:none;border:0;cursor:pointer}
.nm-hits li.is-picked button,.nm-hits button:hover{background:var(--nm-dim)}
.nm-hits-code{font-family:var(--nm-slab);color:var(--nm-copper);white-space:pre}
.nm-where{position:relative}

/* --- the storage notice, in the flow above the footer, carrying the same punch --- */

.nm-note{position:relative;margin:2.6rem 0 0;background:var(--nm-card);
  border:1px solid var(--nm-hair);border-top:2px solid var(--nm-ink);padding:.95rem 1rem 1.3rem}
.nm-note::after{content:"";position:absolute;left:50%;bottom:0;width:1.05rem;height:1.05rem;
  transform:translate(-50%,50%);background:var(--nm-paper);border:1px solid var(--nm-hair);
  border-radius:50%}
.nm-note p{margin:0 0 .7rem;font-size:.92rem}
.nm-note-go{display:flex;gap:.6rem;flex-wrap:wrap}
.nm-note-go button{font-family:var(--nm-slab);font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.42rem .8rem;cursor:pointer;
  background:var(--nm-ink);color:var(--nm-card);border:0}
.nm-note-go button+button{background:none;color:var(--nm-ink);border:1px solid var(--nm-muted)}

/* --- footer --- */

footer{margin-top:2.8rem;border-top:2px solid var(--nm-ink);background:var(--nm-dim);
  padding:1.7rem 0 2rem}
.nm-foot{display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr)}
.nm-foot h2{font-family:var(--nm-slab);font-size:.82rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--nm-muted);margin:0 0 .45rem}
.nm-foot ul{list-style:none;margin:0;padding:0}
.nm-foot li{margin-bottom:.28rem}
.nm-foot a{font-size:.92rem;color:var(--nm-ink)}
.nm-imprint{font-size:.9rem;line-height:1.5}
.nm-imprint b{display:block;font-family:var(--nm-face);font-weight:600;font-size:1rem;
  margin-bottom:.3rem}
.nm-rule{margin:1.6rem 0 0;padding-top:1rem;border-top:1px solid var(--nm-hair);
  font-size:.86rem;color:var(--nm-muted)}
.nm-rule b{font-weight:500;color:var(--nm-ink)}

/* --- reveal. Everything reads with the script off. --- */

.nm-rise{opacity:1}
.nm-js .nm-rise{opacity:0;transform:translateY(7px);
  transition:opacity .42s ease,transform .42s ease}
.nm-js .nm-rise.is-filed{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .nm-js .nm-rise{opacity:1;transform:none;transition:none}
}

/* --- narrow --- */

@media (max-width:44rem){
  h1{font-size:1.72rem}
  .nm-two{grid-template-columns:minmax(0,1fr)}
  .nm-four>div{grid-template-columns:minmax(0,1fr);gap:.15rem}
  .nm-layers{gap:.9rem}
  .nm-layer{flex-direction:column;gap:.15rem}
}

@media (min-width:56rem){
  .nm-foot{grid-template-columns:1.5fr 1fr 1fr}
}