/* Stacy Dean Campbell — site styles
   Ground: the concrete of the jacket. Panels: paper laid on it.
   Display: Anton (stamped). Prose: Fraunces. Furniture: Inter. */

:root{
  --concrete:#BFBDB7; --concrete-2:#CDCBC5; --concrete-3:#CAC8C2;
  --paper:#F2F0EB; --paper-2:#E8E5DE;
  --ink:#14130F; --ink-2:#3A382F; --ink-soft:#4A4740;
  --rule:#9B988E; --rule-soft:#D2CFC7;
  --oxide:#8A3B2A; --oxide-hi:#A04835;
  --ochre:#5E4313;
  --on-oxide:#F7F4EE; --oxide-txt:#73301F; --ochre-slab:#C9A055;
  --slab:#14130F;
  --on-dark:#F2F0EB; --on-dark-2:#C3BFB4; --on-dark-3:#8C8779;
  --dark-field:#211F1B; --dark-edge:#454239;
  --shadow:rgba(20,19,15,.20); --shadow-deep:rgba(20,19,15,.36);

  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --prose:"Fraunces",Georgia,"Times New Roman",serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fs-3xs:.6875rem; --fs-2xs:.75rem; --fs-xs:.8125rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.0625rem; --fs-lg:1.15rem; --fs-xl:1.3rem;
  --wrap:1160px; --gut:clamp(1.25rem,4vw,3rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --concrete:#191816; --concrete-2:#121110; --concrete-3:#221F1D;
    --paper:#232120; --paper-2:#2B2825;
    --ink:#EDEAE2; --ink-2:#CBC7BC; --ink-soft:#979285;
    --rule:#474339; --rule-soft:#37342E;
    --oxide:#CE7157; --oxide-hi:#E08C71; --ochre:#C9A055;
    --on-oxide:#1B0E09; --oxide-txt:#DC8467;
    --slab:#0C0B0A;
    --shadow:rgba(0,0,0,.55); --shadow-deep:rgba(0,0,0,.75);
    --dark-field:#131211; --dark-edge:#3B3830;
  }
}
:root[data-theme="dark"]{
  --concrete:#191816; --concrete-2:#121110; --concrete-3:#221F1D;
  --paper:#232120; --paper-2:#2B2825;
  --ink:#EDEAE2; --ink-2:#CBC7BC; --ink-soft:#979285;
  --rule:#474339; --rule-soft:#37342E;
  --oxide:#CE7157; --oxide-hi:#E08C71; --ochre:#C9A055;
  --on-oxide:#1B0E09; --oxide-txt:#DC8467;
  --slab:#0C0B0A;
  --shadow:rgba(0,0,0,.55); --shadow-deep:rgba(0,0,0,.75);
  --dark-field:#131211; --dark-edge:#3B3830;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--concrete);color:var(--ink);
  font-family:var(--ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:repeating-linear-gradient(101deg,rgba(0,0,0,.012) 0 1px,transparent 1px 4px),
                   repeating-linear-gradient(11deg,rgba(255,255,255,.014) 0 1px,transparent 1px 6px);
}
img{max-width:100%;height:auto;display:block}
/* the two places an image is deliberately sized by its box rather than its own
   proportions; both use object-fit so nothing distorts */
.plate picture.bgplate img,.banner img{height:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--oxide);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
hr.rule{height:1px;background:var(--rule);border:0;margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:var(--concrete);padding:.7rem 1rem}

.stamp{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.86;text-wrap:balance}
.eyebrow{font-family:var(--ui);font-size:var(--fs-3xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);margin:0}
.prose{font-family:var(--prose);font-size:var(--fs-md);line-height:1.72;color:var(--ink-2);max-width:64ch}
.prose p{margin:0 0 1.05em}.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}

/* masthead */
.epigraph{background:var(--slab);color:var(--on-dark-3);border-bottom:1px solid var(--dark-edge)}
.epigraph p{margin:0;padding-block:.6rem;font-family:var(--prose);font-style:italic;font-size:var(--fs-sm);text-align:center;line-height:1.4}
.epigraph b{color:var(--on-dark-2);font-style:normal;font-weight:500;font-family:var(--ui);font-size:var(--fs-3xs);letter-spacing:.12em;text-transform:uppercase}
header.site{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--concrete) 90%,transparent);backdrop-filter:saturate(1.15) blur(12px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:1.5rem;padding-block:.85rem;justify-content:space-between;flex-wrap:wrap}
.mark{font-family:var(--display);text-transform:uppercase;font-size:var(--fs-lg);letter-spacing:.015em;text-decoration:none;white-space:nowrap;line-height:1;display:inline-flex;align-items:center;min-height:30px}
.mark i{color:var(--oxide-txt);font-style:normal}
nav.main{display:flex;gap:1.35rem;flex-wrap:wrap}
nav.main a{font-family:var(--ui);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;color:var(--ink-soft)}
nav.main a:hover{color:var(--ink);border-bottom-color:var(--oxide-txt)}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
@media (max-width:760px){.bar{gap:.7rem}nav.main{gap:1rem}}

.sec{padding-block:clamp(2.75rem,6vw,4.75rem)}
.sec-tight{padding-block:0 clamp(2.75rem,6vw,4.75rem)}
.sec-head{display:flex;align-items:baseline;gap:1.15rem;margin-bottom:1.9rem;flex-wrap:wrap}
.sec-head h2{font-family:var(--prose);font-weight:600;font-size:clamp(1.55rem,3.4vw,2.2rem);margin:0;line-height:1.12;letter-spacing:-.015em}
.sec-head hr{flex:1;align-self:center;min-width:2rem}
.panel{background:var(--paper);border:1px solid var(--rule-soft);box-shadow:0 10px 26px -16px var(--shadow);padding:clamp(1.4rem,3.4vw,2.4rem)}

.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--ui);font-size:var(--fs-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:.82rem 1.35rem;text-decoration:none;border:1px solid var(--ink);cursor:pointer;background:none;color:var(--ink);transition:transform .12s ease,background .12s ease,color .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--oxide);border-color:var(--oxide);color:var(--on-oxide)}
.btn-solid:hover{background:var(--oxide-hi);border-color:var(--oxide-hi)}
.btn-ghost:hover{background:var(--ink);color:var(--concrete)}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}

/* hero on an archive plate */
.plate{position:relative;background:#0C0B0A;border-bottom:1px solid var(--dark-edge);overflow:hidden;isolation:isolate}
/* Only the right 1336px of the source survived the old composite, so the photograph is given the
   right of the band at close to native resolution rather than stretched across the full width and
   hidden under the copy panel. Magnification drops from 2.16x to about 1.3x. */
.plate picture.bgplate{position:absolute;top:0;right:0;height:100%;width:68%;z-index:0;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 10%,#000 30%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 10%,#000 30%)}
.plate picture.bgplate img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;filter:contrast(1.03) saturate(1.04)}
@media (max-width:880px){.plate picture.bgplate{width:100%;-webkit-mask-image:none;mask-image:none}}}
.plate::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(95deg,rgba(9,8,7,.97) 0%,rgba(9,8,7,.93) 26%,rgba(9,8,7,.72) 42%,rgba(9,8,7,.34) 58%,rgba(9,8,7,.12) 76%,rgba(9,8,7,.06) 100%),
  linear-gradient(to top,rgba(9,8,7,.72) 0%,rgba(9,8,7,.28) 16%,rgba(9,8,7,0) 40%)}
/* on a phone the copy stacks at the TOP of the band, so the shading has to run the
   other way - dark where the type is, easing off over the jacket below. */
@media (max-width:880px){.plate::after{background:
  linear-gradient(to bottom,rgba(9,8,7,.97) 0%,rgba(9,8,7,.95) 30%,rgba(9,8,7,.82) 50%,rgba(9,8,7,.46) 74%,rgba(9,8,7,.32) 100%)}}
.plate .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.75rem,5vw,4.25rem);align-items:center}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr;gap:2.25rem}}
.plate .hero-grid{padding-block:clamp(2.75rem,6.5vw,5.25rem) clamp(3.25rem,7vw,5.5rem)}
.plate .hero-grid>div:first-child{position:relative;padding-block:.25rem}
.plate h1,.plate .hook,.plate .pubmeta,.plate .eyebrow{text-shadow:0 1px 14px rgba(9,8,7,.55)}
.plate h1{color:var(--on-dark);margin:.9rem 0 0;font-size:clamp(3.1rem,10vw,6.3rem)}
.plate .hook{color:var(--on-dark);border-left-color:var(--ochre-slab)}
.plate .pubmeta{color:var(--on-dark-2);border-top-color:rgba(242,240,235,.26)}
.plate .pubmeta b{color:var(--on-dark)}
.plate .pubmeta s{color:var(--on-dark-3)}
.plate .eyebrow{color:var(--ochre-slab)}
.plate .btn-ghost{color:var(--on-dark);border-color:var(--on-dark)}
.plate .btn-ghost:hover{background:var(--on-dark);color:#0C0B0A}
.credit{position:relative;z-index:2;margin:0;padding-bottom:1.1rem;font-size:var(--fs-3xs);line-height:1.5;letter-spacing:.04em;color:#B7B1A5;max-width:64ch;text-shadow:0 1px 3px rgba(9,8,7,.9)}
.credit em{font-style:italic}
.hook{font-family:var(--prose);font-size:clamp(1.05rem,2.1vw,1.3rem);line-height:1.5;color:var(--ink);margin:1.5rem 0 0;max-width:40ch;border-left:3px solid var(--oxide);padding-left:1.1rem}
.pubmeta{display:flex;flex-wrap:wrap;gap:.4rem .85rem;align-items:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--rule);font-size:var(--fs-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.pubmeta b{color:var(--ink);font-weight:600}
.pubmeta s{color:var(--rule);text-decoration:none}
.cover-stage{display:flex;justify-content:center}
.cover-stage img{width:min(100%,360px);filter:drop-shadow(0 24px 36px var(--shadow-deep)) drop-shadow(0 4px 10px var(--shadow))}

/* page banner for interior pages */
.banner{position:relative;background:#0C0B0A;overflow:hidden;border-bottom:1px solid var(--dark-edge)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:contrast(1.04) brightness(1);z-index:0}
.banner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(97deg,rgba(10,9,8,.90) 0%,rgba(10,9,8,.70) 46%,rgba(10,9,8,.28) 100%)}
.banner .wrap{position:relative;z-index:2;padding-block:clamp(2.25rem,5.5vw,3.75rem)}
.banner h1{color:var(--on-dark);margin:.7rem 0 0;font-size:clamp(2.4rem,7vw,4.4rem)}
.banner .eyebrow{color:var(--ochre-slab)}
.banner .lede{font-family:var(--prose);color:var(--on-dark-2);font-size:var(--fs-md);max-width:56ch;margin:1rem 0 0;line-height:1.6}

/* quotes */
.band{background:var(--concrete-2);border-block:1px solid var(--rule)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);padding-block:clamp(1.9rem,4vw,2.9rem);gap:0}
@media (max-width:880px){.quotes{grid-template-columns:1fr}}
.q{padding:0 clamp(1rem,2.4vw,2rem);border-left:1px solid var(--rule);display:flex;flex-direction:column}
.q:first-child{border-left:0;padding-left:0}
@media (max-width:880px){.q{border-left:0;padding-left:0;padding-block:1.3rem;border-top:1px solid var(--rule)}.q:first-child{border-top:0;padding-top:0}}
.q blockquote{margin:0;font-family:var(--prose);font-size:var(--fs-base);line-height:1.52;color:var(--ink);text-wrap:pretty}
.q cite{display:block;margin-top:auto;padding-top:.8rem;font-family:var(--ui);font-style:normal;font-size:var(--fs-3xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* thesis */
.thesis{background:var(--slab);color:var(--on-dark)}
.thesis-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:clamp(2.5rem,5.5vw,4rem)}
@media (max-width:880px){.thesis-in{grid-template-columns:1fr}}
.thesis .eyebrow{color:var(--ochre-slab)}
.thesis h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,5vw,3.2rem);line-height:.92;margin:.7rem 0 0;color:var(--on-dark)}
.thesis p{font-family:var(--prose);font-size:var(--fs-md);line-height:1.68;color:var(--on-dark-2);margin:1.1rem 0 0;max-width:46ch}
.mediums{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--dark-edge);border:1px solid var(--dark-edge)}
.med{background:var(--slab);padding:1.15rem 1.1rem}
.med .n{font-family:var(--display);text-transform:uppercase;font-size:var(--fs-lg);color:var(--on-dark);line-height:1}
.med .d{font-size:var(--fs-2xs);color:var(--on-dark-3);margin-top:.4rem;line-height:1.45}
.med .d b{color:var(--ochre-slab);font-weight:600}

/* work index */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem}
.filters button{font-family:var(--ui);font-size:var(--fs-3xs);font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:.5rem .85rem;border:1px solid var(--rule);background:none;color:var(--ink-soft);cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--concrete)}
.work{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:5.5rem 1fr 9rem 10rem;gap:1rem 1.25rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--rule-soft)}
@media (max-width:820px){.row{grid-template-columns:4.5rem 1fr;gap:.3rem .9rem}.row .med-col,.row .note{grid-column:2}}
.row .yr{font-family:var(--ui);font-size:var(--fs-xs);font-weight:600;color:var(--ink-soft);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.row .ttl{font-family:var(--prose);font-size:var(--fs-lg);font-weight:600;color:var(--ink);line-height:1.25}
.row .ttl small{display:block;font-family:var(--ui);font-weight:400;font-size:var(--fs-2xs);color:var(--ink-soft);margin-top:.2rem}
.row .med-col{font-size:var(--fs-3xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ochre)}
.row .note{font-size:var(--fs-xs);color:var(--ink-2);line-height:1.45}
.row.is-hidden{display:none}

/* capture, with the signature */
.capture{background:var(--slab);border:0;color:var(--on-dark-2)}
.capture .eyebrow{color:var(--ochre-slab)}
.capture-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3.25rem);align-items:center}
@media (max-width:880px){.capture-grid{grid-template-columns:1fr}}
.capture h2{font-family:var(--prose);font-weight:600;font-size:clamp(1.45rem,3.2vw,2rem);margin:.6rem 0 0;line-height:1.15;color:var(--on-dark)}
.capture p{font-family:var(--prose);font-size:var(--fs-base);line-height:1.65;color:var(--on-dark-2);margin:.9rem 0 0;max-width:42ch}
.sig{width:min(100%,300px);height:64px;margin-top:1.6rem;background-color:var(--ochre-slab);
  -webkit-mask:url(/assets/img/signature.png) left center/contain no-repeat;
          mask:url(/assets/img/signature.png) left center/contain no-repeat}
.sig-ink{background-color:var(--ink)}
.sig-lg{height:96px;width:min(100%,400px);opacity:.95}
form.signup{display:flex;flex-direction:column;gap:.65rem}
.field-row{display:flex;gap:.55rem;flex-wrap:wrap}
form.signup input[type=email]{flex:1 1 14rem;min-width:0;font-family:var(--ui);font-size:.95rem;padding:.85rem 1rem;background:var(--dark-field);border:1px solid var(--dark-edge);color:var(--on-dark)}
form.signup input[type=email]::placeholder{color:var(--on-dark-3)}
form.signup input[type=email]:focus-visible{border-color:var(--ochre-slab);outline:2px solid var(--ochre-slab);outline-offset:2px}
form.signup input[type=email]:focus{border-color:var(--ochre-slab)}
form.signup button{font-family:var(--ui);font-size:var(--fs-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:.85rem 1.4rem;background:var(--oxide);color:var(--on-oxide);border:1px solid var(--oxide);cursor:pointer}
form.signup button:hover{background:var(--oxide-hi)}
.consent{font-size:var(--fs-2xs);color:var(--on-dark-3);line-height:1.55;margin:.1rem 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.said{font-family:var(--prose);font-size:var(--fs-base);color:var(--ochre-slab);margin:.7rem 0 0;min-height:1.4em}

/* buy */
.buy{display:flex;flex-direction:column;gap:.45rem}
.buy a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.78rem 1rem;text-decoration:none;background:var(--paper-2);border:1px solid var(--rule-soft);font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;transition:background .12s ease,border-color .12s ease}
.buy a:hover{background:var(--paper);border-color:var(--ink)}
.buy a span{color:var(--oxide-txt);font-weight:400}
.note-sm{font-size:var(--fs-2xs);color:var(--ink-soft);margin:.85rem 0 0;line-height:1.55}

/* media */
.bw{filter:grayscale(1) contrast(1.05);border:1px solid var(--rule);box-shadow:0 14px 32px -20px var(--shadow-deep)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.25rem);align-items:center}
/* display:grid lives on .split, so .split-narrow used alone silently stacks.
   Give it the display too rather than relying on remembering both classes. */
.split-narrow{display:grid;gap:clamp(1.5rem,4vw,3.25rem);grid-template-columns:minmax(0,360px) 1fr;align-items:start}
/* The biography runs far longer than the portrait beside it, so the left column
   was ending in mid-air and the two stopped reading as one block. Holding it in
   view keeps the face with the words it belongs to. */
@media (min-width:821px){
  .split-narrow>div:first-child{position:sticky;top:5.5rem}
}
@media (max-width:820px){.split,.split-narrow{grid-template-columns:1fr}}
.creds{list-style:none;margin:1.15rem 0 0;padding:0;border-top:1px solid var(--rule-soft)}
.creds li{display:flex;gap:1rem;align-items:baseline;padding:.65rem 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-sm);color:var(--ink-2)}
.creds .k{font-family:var(--display);text-transform:uppercase;font-size:var(--fs-sm);color:var(--ink);flex:0 0 5.75rem;line-height:1.2}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.15rem}
.card{background:var(--paper);border:1px solid var(--rule-soft);padding:1.4rem;display:flex;flex-direction:column;gap:.5rem}
.card h3{font-family:var(--prose);font-weight:600;font-size:var(--fs-lg);margin:0;line-height:1.22}
.card .kind{font-size:var(--fs-3xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre)}
.card p{margin:0;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.58}
.card .foot{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--rule-soft);font-size:var(--fs-2xs);color:var(--ink-2);font-weight:500}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.duo .panel{display:flex;flex-direction:column;gap:.7rem}
.duo h3{font-family:var(--prose);font-weight:600;font-size:var(--fs-xl);margin:.3rem 0 0;line-height:1.2}
.duo p{margin:0;font-family:var(--prose);font-size:var(--fs-base);color:var(--ink-2);line-height:1.62}
.link-arrow{margin-top:auto;padding-top:.9rem;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--oxide-txt);text-decoration:none;display:inline-flex;gap:.45rem;align-items:center;font-family:var(--ui)}
.link-arrow:hover{text-decoration:underline;text-underline-offset:4px}

.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(1.1rem,2.5vw,2rem);align-items:end}
.shelf figure{margin:0;display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
/* NOT display:contents. A <picture> holds a <source> as well as the <img>, and
   display:contents promotes both to grid items — the invisible <source> then
   silently occupies a grid cell and shunts the picture into the next column. */
.shelf picture,.cover-stage picture,.split picture,.split-narrow picture{display:block;min-width:0}
.split>picture,.split-narrow>picture{align-self:center}
.cover-stage>picture{display:flex;justify-content:center;width:100%}
/* one height for every jacket so they stand on a common baseline; widths follow each book's real
   proportions and nothing is cropped. */
.shelf img{height:clamp(178px,20vw,272px);width:auto;max-width:100%;object-fit:contain;
  border:1px solid var(--rule);box-shadow:0 14px 28px -14px var(--shadow-deep)}
.nocover{aspect-ratio:2/3;border:1px dashed var(--rule);background:repeating-linear-gradient(45deg,transparent 0 7px,color-mix(in srgb,var(--rule) 22%,transparent) 7px 8px);display:grid;place-items:center;text-align:center}
.nocover span{font-family:var(--ui);font-size:var(--fs-3xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);line-height:1.5}
.shelf figcaption{font-size:var(--fs-2xs);line-height:1.4;color:var(--ink-soft)}
.shelf figure{padding-top:.2rem}
.shelf figcaption b{display:block;font-family:var(--prose);font-size:var(--fs-base);font-weight:600;color:var(--ink);margin-bottom:.15rem}

.pull-big{font-family:var(--prose);font-size:clamp(1.3rem,3.4vw,2.05rem);line-height:1.34;color:var(--ink);margin:0;max-width:24ch;text-wrap:balance}
.pull-big cite{display:block;margin-top:1rem;font-family:var(--ui);font-style:normal;font-size:var(--fs-3xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* embeds */
.embed{border:1px solid var(--rule-soft);background:var(--paper-2);padding:.4rem;box-shadow:0 10px 26px -18px var(--shadow)}
.embed iframe{display:block;width:100%;border:0;border-radius:10px}
.embed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1.1rem}
.rec{display:flex;flex-direction:column;gap:.6rem}
.rec h3{margin:0;font-family:var(--prose);font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.rec h3 span{display:block;font-family:var(--ui);font-size:var(--fs-3xs);font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin-top:.2rem}

/* contact */
.cform{display:grid;gap:.7rem;max-width:34rem}
.cform label{font-size:var(--fs-3xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.cform input,.cform textarea{font-family:var(--ui);font-size:.95rem;padding:.75rem .9rem;background:var(--paper);border:1px solid var(--rule);color:var(--ink);width:100%}
.cform textarea{min-height:8rem;resize:vertical}
.cform input:focus-visible,.cform textarea:focus-visible{border-color:var(--oxide);outline:2px solid var(--oxide);outline-offset:2px}
.cform input:focus,.cform textarea:focus{border-color:var(--oxide)}

/* footer */
footer.site{background:var(--concrete-2);border-top:1px solid var(--rule);padding-block:clamp(2.25rem,5vw,3.25rem);margin-top:clamp(2rem,5vw,3rem)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:1.75rem}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:1.5rem}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h3{font-size:var(--fs-3xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .8rem}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.foot-links a{font-size:var(--fs-sm);text-decoration:none;color:var(--ink-2)}
.foot-links a:hover{color:var(--oxide-txt);text-decoration:underline;text-underline-offset:3px}
.colophon{font-size:var(--fs-2xs);color:var(--ink-soft);line-height:1.6;margin:2.25rem 0 0;padding-top:1.15rem;border-top:1px solid var(--rule)}

/* direct-answer block and FAQ */
.answer{background:var(--concrete-3);border-bottom:1px solid var(--rule)}
.answer p{margin:0;padding-block:clamp(1.5rem,3vw,2.1rem);font-family:var(--prose);font-size:var(--fs-md);line-height:1.68;color:var(--ink-2);max-width:78ch}
.answer b{color:var(--ink);font-weight:600}
.faq{display:grid;gap:0;border-top:1px solid var(--rule)}
.fq{padding:1.1rem 0;border-bottom:1px solid var(--rule-soft)}
.fq h3{margin:0 0 .35rem;font-family:var(--prose);font-size:var(--fs-md);font-weight:600;color:var(--ink);line-height:1.3}
.fq p{margin:0;font-family:var(--prose);font-size:var(--fs-base);line-height:1.62;color:var(--ink-2);max-width:72ch}

/* WCAG 2.2 target size: give every tap target at least 24px of height, and more on
   touch screens. This readership is 50-70 and largely on phones. */
nav.main a{padding:.45rem 0 .5rem;display:inline-flex;align-items:center;min-height:26px}
.foot-links a{display:inline-flex;align-items:center;min-height:26px;padding-block:.15rem}
.buy a{min-height:44px}
.filters button{min-height:34px}
.link-arrow{min-height:26px}
@media (hover:none) and (pointer:coarse){
  nav.main{gap:1.1rem .95rem}
  nav.main a{min-height:34px;padding:.6rem 0}
  .foot-links{gap:.15rem}
  .foot-links a{min-height:38px}
  .link-arrow{min-height:38px}
}

/* ---- phones ---- */
@media (max-width:880px){
  /* the jacket was filling the screen and running off the bottom */
  .cover-stage{padding-top:.5rem}
  .cover-stage img{width:auto;max-width:min(100%,240px);max-height:42vh}
  .plate .hero-grid{padding-block:1.75rem 2.25rem}
  .plate h1{font-size:clamp(2.6rem,12vw,4rem)}
}
@media (max-width:640px){
  /* the epigraph was taking two lines and a whole band before anything else */
  .epigraph p{font-size:var(--fs-2xs);padding-block:.45rem;line-height:1.35}
  .bar{padding-block:.65rem}
  .mark{font-size:var(--fs-base)}
  nav.main{gap:.85rem}
  nav.main a{font-size:var(--fs-3xs);letter-spacing:.08em}
  .hook{font-size:var(--fs-base);padding-left:.9rem}
  .pubmeta{font-size:var(--fs-3xs);margin-top:1.15rem;padding-top:.85rem}
  .cta-row{gap:.5rem;margin-top:1.35rem}
  .btn{padding:.78rem 1.05rem;font-size:var(--fs-2xs)}
  .quotes{padding-block:1.5rem}
  .sec,.sec-tight{padding-block:2.25rem}
  .sec-tight{padding-top:0}
}
@media (max-width:420px){
  .cover-stage img{max-width:200px;max-height:36vh}
  .plate h1{font-size:clamp(2.3rem,13vw,3.2rem)}
}

/* Interior banners crop his own frame differently so the pages do not repeat
   the same picture, and no image on this site belongs to anyone else. */
.banner img.bnr-work{object-position:78% 62%}
.banner img.bnr-about{object-position:26% 48%}
.banner img.bnr-contact{object-position:52% 70%}

/* The publisher's own mark, as drawn. Big enough that the words read, which is
   the whole point of putting a logo on a page. */
.enp-logo{width:88px;height:auto;margin:.5rem 0 .2rem}

/* ============ EAST NASHVILLE PRESS ============ */
/* The press's own letterpress masthead, full width, on its own black. */
.press-band{background:#000;border-bottom:1px solid var(--dark-edge)}
.press-band img{width:100%;height:auto;display:block;max-height:340px;object-fit:cover;object-position:50% 50%}

/* Interior pages open on type rather than a photograph: an imprint's front
   matter is words, and the press has no photography of its own to spend. */
.banner-plain{background:var(--slab)}
.banner-plain::after{display:none}
.banner-plain .wrap{padding-block:clamp(2.5rem,6vw,4rem)}
.banner-plain h1{color:var(--on-dark);margin:.6rem 0 0;font-size:clamp(2.2rem,6.5vw,4rem)}
.banner-plain .eyebrow{color:var(--ochre-slab)}
.banner-plain .lede{font-family:var(--prose);color:var(--on-dark-2);font-size:var(--fs-md);max-width:56ch;margin:1.1rem 0 0;line-height:1.6}

/* The mark */
.enp-logo{width:82px;height:auto;display:block}
.enp-logo-lg{width:min(100%,210px)}

/* Catalogue */
.shelf-cover{display:block;text-decoration:none}
.shelf-cover img{height:clamp(178px,20vw,262px);width:auto;max-width:100%;object-fit:contain;
  border:1px solid var(--rule);box-shadow:0 14px 28px -14px var(--shadow-deep);
  transition:transform .14s ease}
a.shelf-cover:hover img{transform:translateY(-3px)}
.bookcover{width:min(100%,260px);border:1px solid var(--rule);box-shadow:0 16px 32px -16px var(--shadow-deep)}
.meta{margin:1.5rem 0 0;border-top:1px solid var(--rule-soft)}
.meta-row{display:flex;gap:1rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-sm)}
.meta-row span{flex:0 0 6rem;font-size:var(--fs-3xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.meta-row b{font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.meta-row b a{color:var(--oxide-txt);text-decoration:none}
.meta-row b a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){.bookcover{width:min(60%,200px)}}

/* The masthead is a graphic, so the page needs a real heading of its own. It says
   what the logo cannot: the reason the press exists. */
.press-h1{font-family:var(--prose);font-weight:600;font-style:italic;
  font-size:clamp(1.35rem,3.2vw,2rem);line-height:1.25;color:var(--ink);
  margin:0 0 .9rem;max-width:24ch;letter-spacing:-.01em}