/* passengerseat.org — photographic oral-history archive
   Warm paper ground, black ink, one brick accent. No radii, no shadows. */

:root{
  --paper:#f2ede4;
  --paper-2:#e9e2d6;
  --ink:#171310;
  --ink-2:#3b342c;
  --grey:#5b5348;
  --rule:#c9c0b1;
  --rule-2:#ded5c6;
  --brick:#8f3a22;
  --brick-d:#6f2c19;
  --measure:34rem;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.62 var(--serif);
  font-variant-numeric:oldstyle-num proportional-nums;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-weight:400;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0}
::selection{background:var(--brick);color:var(--paper)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;font:600 .75rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;z-index:99}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
label:focus-visible{outline:2px solid var(--brick);outline-offset:2px}

/* ------------------------------------------------ masthead */
.mast{padding:1.5rem 1.25rem .5rem;text-align:center}
.wordmark{font:400 clamp(1.9rem,6vw,3rem)/1 var(--serif);letter-spacing:.02em}
.wordmark a{text-decoration:none;display:inline-block}
.wordmark em{font-style:italic;color:var(--brick)}
.mast-sub{margin-top:.55rem;font:400 .6875rem/1.4 var(--sans);letter-spacing:.19em;
  text-transform:uppercase;color:var(--grey)}
.mast-rule{border:0;border-top:1px solid var(--ink);margin:1rem auto 0;max-width:74rem}
.mast-rule-2{border:0;border-top:1px solid var(--rule);margin:0 auto;max-width:74rem}

.navt{display:none}
.navbtn{display:none}
.mast-nav{max-width:74rem;margin:0 auto}
.mast-nav ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:0 2.1rem;padding:.7rem 1rem}
.mast-nav a{
  text-decoration:none;font:400 .75rem/2 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid transparent;
}
.mast-nav a:hover{color:var(--brick);border-bottom-color:var(--brick)}
.mast-nav a.cur{color:var(--brick)}
.mast-nav a.cur::before{content:"— ";color:var(--rule)}

/* ------------------------------------------------ layout grid */
main{
  display:grid;
  grid-template-columns:
    [full-start] minmax(1.25rem,1fr)
    [wide-start] minmax(0,74rem) [wide-end]
    minmax(1.25rem,1fr) [full-end];
}
main > *{grid-column:wide}
.full{grid-column:full}
.measure{max-width:var(--measure);margin-left:0}
.centred{margin-left:auto;margin-right:auto}

.path{grid-column:wide;font:400 .6875rem/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);padding:1.15rem 0 0}
.path a{color:var(--grey)}
.path span{color:var(--rule);padding:0 .45rem}

/* ------------------------------------------------ plates (full-bleed photographs) */
.plate{margin:2.6rem 0 0}
.plate img{width:100%}
.plate figcaption,.cap{
  font:400 .78rem/1.55 var(--sans);color:var(--grey);
  padding:.7rem 1.25rem 0;max-width:52rem;
}
.plate--first{margin-top:1.9rem}
.inset{margin:2.4rem 0 0}
.inset figcaption{font:400 .78rem/1.55 var(--sans);color:var(--grey);padding-top:.6rem;max-width:38rem}

/* ------------------------------------------------ blocks */
.band{padding:2.4rem 0 0}
.band--gap{padding-top:3.4rem}
.standfirst{max-width:40rem;font-size:1.28rem;line-height:1.55}
.standfirst + .standfirst{margin-top:1rem}
.text p + p{margin-top:1.05rem}
.text{max-width:var(--measure)}
.text--wide{max-width:42rem}
.text h2{font-size:1.45rem;margin:2.2rem 0 .8rem;font-style:italic}
.text h2:first-child{margin-top:0}

.label{font:600 .6875rem/1.4 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--brick)}
.slug{
  display:flex;align-items:baseline;gap:1rem;
  border-top:1px solid var(--ink);padding-top:.55rem;margin-top:3.2rem;
}
.slug h2{font:600 .75rem/1.5 var(--sans);letter-spacing:.19em;text-transform:uppercase}
.slug .more{margin-left:auto;font:400 .75rem/1.5 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--brick)}
.slug .tc{margin-left:auto;font:400 .75rem/1.5 var(--sans);letter-spacing:.1em;color:var(--grey);
  font-variant-numeric:tabular-nums}
.page-title{font-size:clamp(2rem,5.5vw,3.1rem);line-height:1.08;margin:.8rem 0 0;max-width:22ch}
.page-title em{font-style:italic;color:var(--brick)}

/* ledger of numbers */
.ledger{list-style:none;border-top:1px solid var(--ink);margin-top:2.6rem}
.ledger li{display:flex;align-items:baseline;gap:1.1rem;border-bottom:1px solid var(--rule-2);padding:.6rem 0}
.ledger .n{font-variant-numeric:tabular-nums lining-nums;font-size:1.5rem;min-width:3.6ch;text-align:right}
.ledger .l{font:400 .82rem/1.5 var(--sans);letter-spacing:.06em;color:var(--grey)}

/* ------------------------------------------------ catalogue table */
.cat-wrap{overflow-x:auto;margin-top:1.4rem}
table.cat{width:100%;border-collapse:collapse;font-size:.95rem;min-width:44rem}
table.cat caption{text-align:left;font:400 .78rem/1.5 var(--sans);color:var(--grey);padding-bottom:.7rem}
table.cat th{
  font:600 .6875rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  text-align:left;border-bottom:1px solid var(--ink);padding:.45rem .9rem .45rem 0;white-space:nowrap;
}
table.cat td{border-bottom:1px solid var(--rule-2);padding:.85rem .9rem .85rem 0;vertical-align:top}
table.cat tr:hover td{background:var(--paper-2)}
table.cat .num{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;color:var(--ink-2)}
table.cat .nm a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brick)}
table.cat .nm a:hover{color:var(--brick)}
table.cat .sub{display:block;font:400 .82rem/1.45 var(--sans);color:var(--grey);margin-top:.25rem;max-width:34rem}
table.cat .rl,table.cat .rg{font:400 .84rem/1.5 var(--sans);color:var(--ink-2)}

/* ------------------------------------------------ entry list (themes / related records) */
.entries{list-style:none;border-top:1px solid var(--ink);margin-top:1.4rem}
.entries > li{border-bottom:1px solid var(--rule-2);padding:1.4rem 0}
.entry{display:grid;grid-template-columns:9.5rem 1fr;gap:1.4rem;align-items:start;
  text-decoration:none;color:inherit}
.entry img{width:100%;filter:grayscale(.15)}
.entry .ref{font:400 .7rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  font-variant-numeric:tabular-nums}
.entry h3{font-size:1.3rem;margin:.25rem 0 .35rem;font-style:italic}
.entry:hover h3{color:var(--brick)}
.entry p{font-size:.98rem;color:var(--ink-2);max-width:40rem}

/* ------------------------------------------------ archival record block */
.record{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  margin-top:2.6rem;padding:.4rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.record div{padding:.75rem 1.2rem .75rem 0;border-bottom:1px solid var(--rule-2)}
.record dt{font:600 .65rem/1.4 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--grey)}
.record dd{margin:.3rem 0 0;font-size:.98rem;font-variant-numeric:tabular-nums}

/* ------------------------------------------------ transcript */
.excerpt{margin-top:2.8rem}
.excerpt-h{display:flex;align-items:baseline;gap:1rem;border-bottom:1px solid var(--rule);padding-bottom:.45rem}
.excerpt-h .tcode{font:400 .82rem/1.5 var(--sans);font-variant-numeric:tabular-nums;color:var(--brick);
  letter-spacing:.05em}
.excerpt-h h3{font-size:1.1rem;font-style:italic}
.turn{margin:1.5rem 0 0 0;padding-left:1.4rem;border-left:2px solid var(--rule);max-width:38rem}
.turn .sp{font:600 .65rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--grey);
  margin-bottom:.35rem}
.turn p + p{margin-top:0}
.turn--q{border-left-color:var(--brick-d);color:var(--ink-2);font-style:italic}
.turn--q .sp{color:var(--brick);font-style:normal}
.transcript-note{margin-top:2.4rem;font:400 .82rem/1.6 var(--sans);color:var(--grey);max-width:38rem}

.pull{margin:0;padding:1.4rem 0 0;border-top:1px solid var(--rule-2);max-width:40rem}
.pull:first-child{border-top:0;padding-top:0}
.pull p{font-size:1.18rem;line-height:1.5;font-style:italic}
.pull cite{display:block;margin-top:.6rem;font:400 .75rem/1.5 var(--sans);font-style:normal;
  letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.pull cite a{color:var(--brick)}
.quotes .pull{margin-top:1.9rem}
.quotes .pull:first-child{margin-top:1.2rem}

.closer{border-top:1px solid var(--ink);margin-top:3rem;padding-top:1rem;max-width:38rem}
.closer h4{font:600 .65rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--grey);
  margin-bottom:.7rem}

/* aside / notes */
.note-box{border-top:1px solid var(--ink);padding-top:.8rem;max-width:22rem;
  font:400 .88rem/1.6 var(--sans);color:var(--ink-2)}
.note-box h4{font:600 .65rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--brick);margin-bottom:.5rem}
.note-box h4 ~ h4{margin-top:1.1rem}
.note-box p + p{margin-top:.6rem}
.two{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:3rem;align-items:start;margin-top:1.6rem}

/* plain lists */
.plain{list-style:none;border-top:1px solid var(--rule);margin-top:1.4rem;max-width:44rem}
.plain li{border-bottom:1px solid var(--rule-2);padding:.75rem 0 .75rem 1.7rem;position:relative;
  font-size:.99rem}
.plain li::before{content:"—";position:absolute;left:0;color:var(--brick)}
.numbered{list-style:none;counter-reset:s;margin-top:1.4rem;max-width:44rem;border-top:1px solid var(--ink)}
.numbered li{counter-increment:s;border-bottom:1px solid var(--rule-2);padding:1.1rem 0 1.1rem 3.4rem;
  position:relative}
.numbered li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.1rem;
  font:400 .95rem/1.5 var(--sans);font-variant-numeric:tabular-nums;color:var(--brick);letter-spacing:.06em}
.numbered h3{font-size:1.08rem;font-style:italic;margin-bottom:.3rem}
.numbered p{font-size:.97rem;color:var(--ink-2);max-width:36rem}

.smallnote{font:400 .8rem/1.6 var(--sans);color:var(--grey);margin-top:1.2rem;max-width:40rem}

/* text links */
.tlinks{margin-top:1.4rem;font:400 .78rem/2 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.tlinks a{color:var(--brick);text-decoration:none;border-bottom:1px solid var(--rule)}
.tlinks a:hover{border-bottom-color:var(--brick)}
.tlinks span{color:var(--rule);padding:0 .7rem}

.envoi{border-top:1px solid var(--ink);margin-top:3.4rem;padding-top:1.2rem;max-width:42rem}
.envoi h2{font-size:1.45rem;font-style:italic;margin-bottom:.7rem}
.envoi p{color:var(--ink-2)}

/* ------------------------------------------------ forms */
.demo{border-left:2px solid var(--brick);padding:.6rem 0 .6rem .9rem;margin-bottom:1.6rem;
  font:400 .84rem/1.55 var(--sans);color:var(--ink-2);max-width:36rem}
form{max-width:34rem}
form label{display:block;margin-top:1.2rem;font:600 .68rem/1.5 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--grey)}
input,select,textarea{
  display:block;width:100%;margin-top:.4rem;background:#fbf8f2;color:var(--ink);
  border:1px solid var(--rule);border-radius:0;padding:.6rem .7rem;
  font:400 1rem/1.5 var(--serif);
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--brick);outline:none}
button{
  margin-top:1.5rem;background:var(--ink);color:var(--paper);border:0;border-radius:0;
  padding:.75rem 1.6rem;font:600 .72rem/1.4 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  cursor:pointer;
}
button:hover{background:var(--brick)}
form .smallnote{margin-top:.9rem}

/* ------------------------------------------------ colophon */
.colophon{
  grid-column:full;border-top:1px solid var(--ink);margin-top:4.5rem;padding:1.6rem 1.25rem 3rem;
}
.colophon-in{max-width:74rem;margin:0 auto}
.colophon p{font:400 .86rem/1.65 var(--sans);color:var(--ink-2);max-width:44rem}
.colophon .cl{margin-top:1.2rem;font:400 .72rem/2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.colophon .cl a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.colophon .cl a:hover{color:var(--brick)}
.colophon .cl span{color:var(--rule);padding:0 .55rem}
.colophon .legal{margin-top:1.1rem;font-size:.76rem;color:var(--grey)}

body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}

/* ------------------------------------------------ responsive */
@media (max-width:860px){
  .two{grid-template-columns:1fr;gap:1.8rem}
  .note-box{max-width:none}
  .entry{grid-template-columns:6.5rem 1fr;gap:1rem}
}
@media (max-width:640px){
  body{font-size:1.02rem}
  .navt{display:block;position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;margin:0}
  .navt:focus-visible ~ .navbtn{outline:2px solid var(--brick);outline-offset:2px}
  .navbtn{
    display:block;margin:.9rem auto 0;width:max-content;cursor:pointer;
    font:600 .7rem/1 var(--sans);letter-spacing:.19em;text-transform:uppercase;
    border:1px solid var(--ink);padding:.55rem 1.1rem;color:var(--ink);
  }
  .mast-nav{max-height:0;overflow:hidden}
  .navt:checked ~ .mast-nav{max-height:32rem}
  .mast-nav ul{flex-direction:column;gap:0;padding:.6rem 0 .2rem}
  .mast-nav li{border-bottom:1px solid var(--rule-2)}
  .mast-nav a{display:block;padding:.55rem 0;line-height:1.6}
  .mast-nav a.cur::before{content:none}
  .entry{grid-template-columns:1fr;gap:.8rem}
  .entry img{max-width:14rem}
  .turn{padding-left:1rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  .mast-nav,.navbtn{display:none}
  body{background:#fff}
}