/* Odd and Offbeat Press — shared styles */

:root{
  --navy:#2f4050;
  --navy-deep:#1c2733;
  --navy-lift:#3a4d61;
  --cream:#f4efe2;
  --tan:#ddcfa9;
  --tan-dim:#a99f88;
  --green:#8bc644;
  --green-deep:#4e8a1f;
  --rule:rgba(244,239,226,.20);

  --display:'Ultra', Georgia, serif;
  --body:'Spectral', Georgia, serif;
  --label:'Oswald', 'Arial Narrow', sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--navy-deep);
  color:var(--cream);
  font-family:var(--body);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.7;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}

a:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:1px;
}

.wrap{
  width:100%;
  max-width:64rem;
  margin:0 auto;
  padding:0 1.5rem;
}

.skip{
  position:absolute;
  left:-9999px;
}
.skip:focus{
  left:1rem;top:1rem;
  position:fixed;z-index:200;
  background:var(--green);color:var(--navy-deep);
  padding:.6rem 1rem;font-family:var(--label);
}

/* ---------- nav ---------- */

.topbar{
  background:var(--navy);
  border-bottom:3px solid var(--green);
}

.topbar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  flex-wrap:wrap;
  padding-top:.75rem;
  padding-bottom:.75rem;
}

.topbar .brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
}

.topbar .brand img{width:3rem;height:3rem;object-fit:contain}

.topbar .brand span{
  font-family:var(--label);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.15;
  max-width:9rem;
}

.topbar nav{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
}

.topbar nav a{
  font-family:var(--label);
  font-weight:400;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--tan);
  padding:.25rem 0;
  border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}

.topbar nav a:hover,
.topbar nav a:focus-visible,
.topbar nav a[aria-current="page"]{
  color:var(--cream);
  border-color:var(--green);
}

/* ---------- masthead ---------- */

.masthead{
  padding:4rem 0 3.25rem;
  text-align:center;
  border-bottom:1px solid var(--rule);
  background:radial-gradient(120% 90% at 50% 0%, rgba(139,198,68,.16) 0%, rgba(28,39,51,0) 65%);
}

.masthead .logo{
  width:min(15rem,50vw);
  margin:0 auto 1.75rem;
  animation:bloom 1.1s ease-out both;
}

@keyframes bloom{
  from{opacity:0;transform:scale(.95)}
  to{opacity:1;transform:scale(1)}
}

.masthead h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem,6.4vw,3.4rem);
  line-height:1;
  letter-spacing:-.01em;
  margin:0 0 1.25rem;
  text-transform:uppercase;
}

.thesis{
  max-width:36rem;
  margin:0 auto;
  font-size:clamp(1.05rem,2.6vw,1.28rem);
  line-height:1.55;
}

.thesis em{color:var(--green);font-style:italic}

.pagehead{
  padding:3.25rem 0 2.5rem;
  border-bottom:1px solid var(--rule);
  background:var(--navy);
}

.pagehead h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.8rem,5.6vw,3rem);
  line-height:1;
  text-transform:uppercase;
  margin:0 0 .75rem;
}

.pagehead p{
  margin:0;
  max-width:38rem;
  color:var(--tan);
  font-size:1.05rem;
}

/* ---------- bands ---------- */

.band{
  padding:3.75rem 0;
  border-bottom:1px solid var(--rule);
}

.band.alt{background:var(--navy)}

.band-head{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-bottom:2.25rem;
}

.band-head::after{
  content:"";
  flex:1;
  height:2px;
  background:var(--green);
  opacity:.5;
}

.band h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.2rem,3.2vw,1.55rem);
  text-transform:uppercase;
  margin:0;
}

.prose{max-width:42rem;margin:0}
.prose p{margin:0 0 1.15rem}
.prose p:last-child{margin-bottom:0}

/* ---------- catalog ---------- */

.entry{
  display:grid;
  grid-template-columns:14rem 1fr;
  gap:2.5rem;
  padding:2.75rem 0;
  border-top:1px solid var(--rule);
}

.entry:first-of-type{border-top:none;padding-top:0}

.cover img{
  width:100%;
  border:1px solid var(--rule);
  box-shadow:0 1.25rem 2.5rem rgba(0,0,0,.5);
}

.entry-no{
  font-family:var(--label);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tan-dim);
  margin:0 0 .5rem;
}

.entry-no b{font-weight:600;color:var(--green)}

.entry h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.3rem,3.8vw,1.9rem);
  line-height:1.05;
  margin:0 0 .35rem;
}

.subtitle{
  font-style:italic;
  font-size:1rem;
  color:var(--tan);
  margin:0 0 .6rem;
  max-width:32rem;
}

.byline{
  font-family:var(--label);
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 1rem;
}

.blurb{margin:0 0 1.15rem;max-width:36rem}

.specs{
  margin:0 0 1.35rem;
  font-size:.9rem;
  line-height:1.65;
  color:var(--tan);
  border-left:3px solid var(--green);
  padding-left:1rem;
}

.specs div{margin-bottom:.2rem}
.specs div:last-child{margin-bottom:0}

.specs .k{
  font-family:var(--label);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tan-dim);
  margin-right:.5rem;
}

.specs .isbn{font-variant-numeric:tabular-nums;letter-spacing:.02em}

.buy{
  display:inline-block;
  font-family:var(--label);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--navy-deep);
  background:var(--green);
  padding:.55rem 1.2rem;
  transition:background .18s ease;
}

.buy:hover,.buy:focus-visible{background:var(--cream)}

/* ---------- people ---------- */

.person{
  display:grid;
  grid-template-columns:12rem 1fr;
  gap:2.5rem;
  padding:2.5rem 0;
  border-top:1px solid var(--rule);
  align-items:start;
}

.person:first-of-type{border-top:none;padding-top:0}

.person .portrait{
  background:radial-gradient(60% 60% at 50% 60%, rgba(139,198,68,.20) 0%, rgba(28,39,51,0) 72%);
}

.person h3{
  font-family:var(--display);
  font-weight:400;
  font-size:1.4rem;
  text-transform:uppercase;
  margin:0 0 .15rem;
}

.person .role{
  font-family:var(--label);
  font-size:.76rem;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 1rem;
}

.person p{margin:0 0 .9rem;max-width:38rem;font-size:1rem}
.person p:last-child{margin-bottom:0}

.inline-link{
  color:var(--cream);
  text-decoration:none;
  border-bottom:1px solid var(--green);
  transition:color .18s ease;
}

.inline-link:hover,.inline-link:focus-visible{color:var(--green)}

/* ---------- columns / callout ---------- */

.cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:2.5rem;
}

.cols h3{
  font-family:var(--label);
  font-weight:500;
  font-size:.88rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 .7rem;
}

.cols p{margin:0 0 .8rem;font-size:.975rem}
.cols p:last-child{margin-bottom:0}

.callout{
  margin-top:2.5rem;
  border:2px solid var(--green);
  padding:1.5rem 1.75rem;
  max-width:44rem;
}

.callout p{margin:0;font-size:1.05rem}
.callout strong{color:var(--green);font-weight:600}

/* ---------- spec table (sell sheet) ---------- */

.sheet{
  border-top:1px solid var(--rule);
  padding:2.5rem 0;
  display:grid;
  grid-template-columns:11rem 1fr;
  gap:2.5rem;
}

.sheet:first-of-type{border-top:none;padding-top:0}

.sheet h3{
  font-family:var(--display);
  font-weight:400;
  font-size:1.35rem;
  line-height:1.1;
  text-transform:uppercase;
  margin:0 0 .3rem;
}

.sheet .subtitle{margin-bottom:1rem}

table.spec{
  width:100%;
  border-collapse:collapse;
  font-size:.925rem;
  margin-bottom:1.25rem;
}

table.spec th,
table.spec td{
  text-align:left;
  vertical-align:top;
  padding:.45rem .75rem .45rem 0;
  border-bottom:1px solid var(--rule);
}

table.spec th{
  font-family:var(--label);
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tan-dim);
  white-space:nowrap;
  width:9rem;
}

table.spec td{color:var(--cream);font-variant-numeric:tabular-nums}

/* ---------- contact ---------- */

.contact-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:2rem;
}

.contact-list li{line-height:1.5}

.contact-list .k{
  display:block;
  font-family:var(--label);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tan-dim);
  margin-bottom:.3rem;
}

.contact-list a{
  color:var(--cream);
  text-decoration:none;
  border-bottom:1px solid var(--green);
  padding-bottom:1px;
  transition:color .18s ease;
  word-break:break-word;
}

.contact-list a:hover,.contact-list a:focus-visible{color:var(--green)}

.bigmail{
  font-family:var(--display);
  font-size:clamp(1.05rem,3.6vw,1.9rem);
  line-height:1.2;
  text-decoration:none;
  color:var(--cream);
  border-bottom:3px solid var(--green);
  word-break:break-word;
  transition:color .18s ease;
}

.bigmail:hover,.bigmail:focus-visible{color:var(--green)}

/* ---------- footer ---------- */

.colophon{
  padding:2.5rem 0 3.25rem;
  text-align:center;
  font-family:var(--label);
  font-size:.76rem;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tan-dim);
  line-height:2;
}

.colophon img{
  width:4rem;
  margin:0 auto 1rem;
  opacity:.9;
}

.colophon a{color:var(--tan);text-decoration:none}
.colophon a:hover,.colophon a:focus-visible{color:var(--green)}

@media (max-width:44rem){
  .entry{grid-template-columns:1fr;gap:1.75rem}
  .cover{max-width:12rem}
  .person{grid-template-columns:1fr;gap:1.25rem}
  .person .portrait{max-width:9rem}
  .sheet{grid-template-columns:1fr;gap:1.5rem}
  .sheet .cover{max-width:9rem}
  table.spec th{width:7.5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}