/*
Theme Name: Jill Sylvester 2026 (standalone)
Theme URI: https://jillsylvester.com
Author: Jia
Description: STANDALONE theme (no parent, does not use Blocksy) for jillsylvester.com. Warm sand palette, EB Garamond,
  cerulean accent. Replaces The7 + WPBakery. All editable copy is exposed through
  Advanced Custom Fields; repeating content lives in four custom post types
  (Books, Products, Appearances, Links).
Version: 2026.29
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jill-sylvester
*/

:root{
  --paper:#FAF6EC;
  --paper-deep:#F4EFE1;
  --ink:#241F1A;
  --ink-body:#3A342D;
  --ink-soft:#6B6156;
  --rule:#DFD6C2;
  --cerulean:#3FA1DB;
  --cerulean-deep:#2A7FB0;
  --measure:37rem;
  --page:80rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-body);
  font-family:'EB Garamond',Georgia,'Times New Roman',serif;
  font-size:19px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
/* height:auto matters: without it an image whose width is constrained — by a
   grid column, or by max-width — keeps its natural height and distorts. */
img{max-width:100%;height:auto;display:block}
a{color:var(--cerulean-deep);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--cerulean-deep);outline-offset:3px
}

/* ---------- shared primitives ---------- */
.wrap{max-width:var(--page);margin:0 auto;padding:0 2.25rem}
.measure{max-width:var(--measure)}
.eyebrow{
  font-size:.92rem;text-transform:uppercase;letter-spacing:.17em;
  color:var(--cerulean-deep);margin:0 0 1.6rem;font-weight:500
}
.eyebrow::before{
  content:"";display:block;width:2.75rem;height:2px;
  background:var(--cerulean);margin-bottom:1rem
}
h1,h2,h3,h4{font-weight:400;color:var(--ink);margin:0;line-height:1.2}
.h-lead{font-size:1.5rem;line-height:1.5;color:var(--ink)}
.h-sec{font-size:2rem;letter-spacing:.005em}
.h-item{font-size:1.5rem}
p{margin:0 0 1.15rem}
.credit{
  font-style:italic;color:var(--ink-soft);font-size:.98rem;
  margin:.35rem 0 0;line-height:1.5
}
.hr{border:0;border-top:1px solid var(--rule);margin:0}
.band{background:var(--paper-deep)}
/* padding-block only: these classes are sometimes applied to .wrap itself,
   and the shorthand was resetting its horizontal padding to zero */
.sec{padding-block:4.5rem}
.sec-tight{padding-block:3rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:inherit;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.15em;
  padding:.95rem 1.9rem;border:1px solid var(--cerulean-deep);
  background:var(--cerulean-deep);color:#fff;cursor:pointer;
  transition:background .18s ease,color .18s ease
}
.btn:hover{background:var(--cerulean);border-color:var(--cerulean)}
.btn-ghost{background:transparent;color:var(--cerulean-deep)}
.btn-ghost:hover{background:var(--cerulean-deep);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

/* inline retailer links */
.buys{
  display:flex;flex-wrap:wrap;gap:0 1.5rem;margin:1.4rem 0 0;
  padding:0;list-style:none;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.13em
}
.buys a{border-bottom:1px solid var(--rule);padding-bottom:2px}
.buys a:hover{border-bottom-color:var(--cerulean)}
.buys .todo{color:#A79C8B;border-bottom:1px dotted #CFC4AF}

/* ---------- masthead ---------- */
.masthead{padding:3.75rem 0 0;text-align:center}
.wordmark{
  font-size:clamp(3rem,7.8vw,4.9rem);color:var(--cerulean);
  letter-spacing:.005em;line-height:1
}
.masthead .rule-tick{
  width:4rem;height:2px;background:var(--cerulean);margin:1.7rem auto 0
}
.nav{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:.2rem 2.4rem;margin:1.4rem 0 0;padding:0 0 2.25rem;list-style:none
}
.nav a{
  position:relative;font-family:inherit;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.16em;background:none;border:0;
  padding:.4rem 0 1rem;color:var(--ink-soft);cursor:pointer;
  transition:color .18s ease
}
.nav a:hover{color:var(--ink)}
/* current page reads by weight, not by colour; the cerulean tick below
   is the same 2px mark used for section eyebrows and the book shelf */
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:.35rem;
  width:1.5rem;height:2px;background:var(--cerulean);
  transform:translateX(-50%)
}
.nav a:focus-visible{
  outline:none;color:var(--ink);text-decoration:underline;
  text-decoration-thickness:2px;text-decoration-color:var(--cerulean);
  text-underline-offset:5px
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0s!important}
}

/* ---------- home hero ---------- */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) 32rem;gap:5rem;
  align-items:start;padding:1.5rem 0 5rem
}
/* the page shell is wide, but reading measure stays short on purpose */
.bio{max-width:38rem}
.portrait{margin:0;width:100%}
.portrait img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  box-shadow:0 10px 34px rgba(36,31,26,.20)
}
.bio p:last-of-type{margin-bottom:0}

/* ---------- book entries ---------- */
.book{
  display:grid;grid-template-columns:12rem 1fr;gap:3rem;
  padding:3.25rem 0;border-top:1px solid var(--rule);align-items:start
}
.book:first-of-type{border-top:0}
/* a series entry carries two covers, so it gets a wider cover column */
.book.is-pair{grid-template-columns:17rem 1fr}
.book-covers{display:flex;gap:1rem;align-items:flex-end;min-width:0}
.book-covers img{
  flex:1 1 0;min-width:0;width:100%;height:auto;
  box-shadow:0 5px 16px rgba(36,31,26,.16)
}
.book > div:nth-child(2){max-width:41rem}

/* ---------- titles carry the blue (books + store) ---------- */
.book .h-item,.product .h-item{color:var(--cerulean-deep)}
/* the subtitle reads as part of the title, so it sits up in size */
.book-sub{
  font-size:1.22rem;line-height:1.35;color:var(--ink);
  margin:.4rem 0 0;font-style:normal
}
.book-award{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-soft);margin:.75rem 0 0
}

/* ---------- reviews under each book ---------- */
.reviews{margin:1.9rem 0 0;padding:1.4rem 0 0;list-style:none;border-top:1px solid var(--rule)}
.reviews-label{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--cerulean-deep);margin:0 0 1.25rem
}
/* a second label inside the same block — used where one entry covers two titles */
.reviews-label + ul + .reviews-label{margin-top:2.4rem}
.reviews ul{list-style:none;margin:0;padding:0}
.reviews li{
  margin:0 0 1.5rem;padding-left:1.5rem;
  border-left:2px solid var(--cerulean);font-style:italic;
  color:var(--ink-body);font-size:1.18rem;line-height:1.65
}
.reviews li:last-child{margin-bottom:0}
.reviews .who{
  display:block;font-style:normal;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.13em;
  color:var(--ink-soft);margin-top:.6rem
}

/* ---------- book three, its own section ---------- */
/* The eyebrow rule is a left-aligned marker. Centred above a centred heading
   it reads as a stray dash, so the band drops it. */
.next-up{text-align:center}
.next-up .eyebrow::before{display:none}
.next-up .eyebrow{margin-bottom:1rem;color:var(--ink-soft)}
.next-up .h-sec{color:var(--cerulean-deep);font-size:2.15rem}
/* the release line carries the announcement, so it sits at lead size rather
   than body size */
.next-up p{
  margin:1.35rem auto 0;max-width:34rem;
  font-size:1.5rem;line-height:1.5;color:var(--ink)
}
.next-up .btn-row{justify-content:center}

/* ---------- image placeholder slot (store / media) ---------- */
.form-status{
  margin-top:1rem;font-size:.92rem;line-height:1.6;min-height:1.4em
}
.form-status.is-ok{color:var(--cerulean-deep)}
.form-status.is-err{color:#A5432F}
.imgslot{
  border:1px dashed #CFC4AF;background:var(--paper-deep);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;
  color:#A79C8B;padding:.8rem;line-height:1.55
}
.product .imgslot{aspect-ratio:1/1}
.product .product-shot{
  width:100%;aspect-ratio:1/1;object-fit:contain;display:block;
  background:var(--paper-deep);border-radius:2px;
  box-shadow:0 8px 24px rgba(36,31,26,.16)
}
.media-list .imgslot{width:4.75rem;height:4.75rem;flex:0 0 auto;font-size:.55rem}

/* ---------- home cover viewer ---------- */
.viewer{
  display:grid;grid-template-columns:minmax(0,1fr) 11.75rem;
  gap:3.5rem;align-items:start;text-align:left
}
.viewer-stage{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:2.75rem;align-items:start}
.viewer-stage img{
  width:100%;height:auto;box-shadow:0 10px 30px rgba(36,31,26,.20)
}
.viewer-copy .h-item{color:var(--cerulean-deep)}
.viewer-copy .book-sub{font-size:1.1rem}
.viewer-copy p.blurb{margin:1.15rem 0 0;font-size:1.12rem;line-height:1.7}
/* the side rail — every cover on the shelf, always visible */
.rail{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;
  align-content:start;margin:0;padding:0;list-style:none;
  border-left:1px solid var(--rule);padding-left:1.35rem
}
.rail button{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  opacity:.5;transition:opacity .18s ease,transform .18s ease
}
.rail button img{width:100%;height:auto;box-shadow:0 4px 12px rgba(36,31,26,.16)}
.rail button:hover{opacity:.85;transform:translateY(-2px)}
.rail button[aria-current="true"]{opacity:1}
.rail button[aria-current="true"] img{outline:2px solid var(--cerulean);outline-offset:3px}

/* ---------- store ---------- */
.product{
  display:grid;grid-template-columns:11rem 1fr 1fr;gap:3rem;
  padding:3rem 0;border-top:1px solid var(--rule);align-items:start
}
.product:first-of-type{border-top:0}
.formats{display:flex;flex-direction:column;gap:1.5rem;margin-top:1.75rem}
.format{padding-top:1.25rem;border-top:1px solid var(--rule)}
.format-name{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink);margin:0 0 .4rem
}
.format p{font-size:.98rem;color:var(--ink-soft);margin:0 0 .9rem}
.price{font-size:1.15rem;color:var(--ink)}

/* ---------- media list ---------- */
/* ---------- interviews & appearances ---------- */
.vidlist{list-style:none;margin:0;padding:0;max-width:56rem}
.vidlist li{
  display:grid;grid-template-columns:18rem minmax(0,1fr);gap:2.25rem;
  align-items:center;padding:1.9rem 0;border-top:1px solid var(--rule)
}
.vidlist li:last-child{border-bottom:1px solid var(--rule)}
.vidlist img{width:100%;height:auto;box-shadow:0 4px 14px rgba(36,31,26,.16)}
.vidlist p{margin:0;font-size:1.06rem;line-height:1.6}
.vidlist a{border-bottom:1px solid var(--rule);padding-bottom:1px}
.vidlist a:hover{border-bottom-color:var(--cerulean)}
.vidlist a.todo{color:var(--cerulean-deep);border-bottom:1px dotted #CFC4AF}
/* event captions are headings, not links — blue but not clickable */
.vidlist .lead{color:var(--cerulean-deep)}

/* award feature block */
.award{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:2.5rem;align-items:start}
.award img{width:100%;height:auto;box-shadow:0 6px 20px rgba(36,31,26,.18)}
.award .h-sec{color:var(--cerulean-deep)}

/* text-only notes: events and links without a picture */
.notelist{list-style:none;margin:0;padding:0;max-width:52rem}
.notelist li{
  padding:1.15rem 0;border-top:1px solid var(--rule);
  font-size:1.02rem;line-height:1.6
}
.notelist li:last-child{border-bottom:1px solid var(--rule)}
.notelist a{border-bottom:1px solid var(--rule);padding-bottom:1px}
.notelist a:hover{border-bottom-color:var(--cerulean)}
.notelist a.todo{color:var(--cerulean-deep);border-bottom:1px dotted #CFC4AF}
.notelist .where{
  display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--ink-soft);margin-top:.4rem
}

.media-list{list-style:none;margin:0;padding:0;max-width:52rem}
.media-list li{
  display:flex;align-items:center;
  gap:1.5rem;padding:1.35rem 0;border-top:1px solid var(--rule)
}
.media-list li:last-child{border-bottom:1px solid var(--rule)}
.media-item{flex:1 1 auto;min-width:0}
.outlet{display:block;font-size:1.2rem;color:var(--cerulean-deep)}
.media-go{
  flex:0 0 auto;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.13em;border-bottom:1px solid var(--rule);padding-bottom:2px
}
.media-go:hover{border-bottom-color:var(--cerulean)}
.media-go.todo{color:#A79C8B;border-bottom:1px dotted #CFC4AF}
.media-list .kind{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--ink-soft);white-space:nowrap
}

/* ---------- forms ---------- */
.field{margin-bottom:1.5rem}
label{
  display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-soft);margin-bottom:.55rem
}
input[type=text],input[type=email],textarea{
  width:100%;font-family:inherit;font-size:1.05rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);
  padding:.85rem 1rem
}
textarea{min-height:9rem;resize:vertical}
.newsletter{display:grid;grid-template-columns:1fr auto;gap:.85rem;align-items:end}
.newsletter .field{margin:0}
.check{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1.75rem}
.check input{margin-top:.45rem}
.check label{
  text-transform:none;letter-spacing:0;font-size:1rem;
  color:var(--ink-body);margin:0
}

/* ---------- podcast ---------- */
.pod{display:grid;grid-template-columns:20rem 1fr;gap:4rem;align-items:start}
.pod > div:last-child{max-width:40rem}
.pod img{width:100%;height:auto;border-radius:2px;box-shadow:0 6px 20px rgba(36,31,26,.16)}

/* ---------- footer ---------- */
.footer{padding:3.5rem 0 4.5rem;border-top:1px solid var(--rule);margin-top:2rem}
.footer-in{
  display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--ink-soft)
}
.footer a{color:var(--ink-soft)}
.footer a:hover{color:var(--cerulean-deep)}
.footer-links{display:flex;gap:1.6rem;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hero{grid-template-columns:minmax(0,1fr) 25rem;gap:3.25rem}
  .book.is-pair{grid-template-columns:15rem 1fr}
}
@media (max-width:1180px){
  .viewer{grid-template-columns:minmax(0,1fr) 10rem;gap:2.25rem}
  .viewer-stage{grid-template-columns:12rem minmax(0,1fr);gap:2rem}
  .product{grid-template-columns:9rem 1fr 1fr;gap:2rem}
}
@media (max-width:860px){
  body{font-size:18px}
  .hero{grid-template-columns:1fr;gap:2.75rem}
  /* on a phone the rail moves under the cover and scrolls sideways */
  .viewer{grid-template-columns:1fr;gap:2rem}
  .viewer-stage{grid-template-columns:11rem minmax(0,1fr);gap:1.5rem}
  .rail{
    display:flex;flex-direction:row;border-left:0;padding-left:0;
    padding-top:1.35rem;border-top:1px solid var(--rule);
    overflow-x:auto;gap:.75rem
  }
  .rail li{flex:0 0 4.5rem}
  .product{grid-template-columns:1fr}
  .product .imgslot,.product .product-shot{max-width:11rem}
  .next-up .h-sec{font-size:1.7rem}
  .next-up p{font-size:1.25rem}
  .hero{grid-template-columns:1fr}
  .hero .portrait{order:-1;max-width:24rem}
  .book,.book.is-pair{grid-template-columns:1fr;gap:1.75rem}
  .book-covers{max-width:18rem}
  .product{grid-template-columns:1fr;gap:1.5rem}
  .pod{grid-template-columns:1fr;gap:2rem}
  .pod img{max-width:15rem}
  .newsletter{grid-template-columns:1fr}
  .nav{gap:.2rem 1.4rem}
  .vidlist li{grid-template-columns:1fr;gap:1.1rem}
  .award{grid-template-columns:1fr;gap:1.5rem}
  .award img{max-width:11rem}
  .media-list li{gap:1rem}
  .media-list .imgslot{width:3.5rem;height:3.5rem}
}
/* on a narrow phone the cover sits above its description, not beside it */
@media (max-width:640px){
  .viewer-stage{grid-template-columns:1fr;gap:1.5rem}
  .viewer-stage img{max-width:13rem}
  .product .formats{margin-top:0}
  .sec{padding-block:3.25rem}
}


/* ---------- WordPress core classes ---------- */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal
}
.screen-reader-text:focus{
  background:var(--paper-deep);clip-path:none;color:var(--ink);
  display:block;font-size:.85rem;height:auto;left:5px;line-height:normal;
  padding:1rem 1.5rem;text-decoration:none;top:5px;width:auto;z-index:100000
}
.alignleft{float:left;margin:.4rem 1.75rem 1.25rem 0}
.alignright{float:right;margin:.4rem 0 1.25rem 1.75rem}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{
  font-style:italic;color:var(--ink-soft);font-size:.95rem;margin-top:.5rem
}
.sticky,.bypostauthor{position:relative}
.admin-bar .masthead{padding-top:2.75rem}

/* ---------- editor content inside ACF wysiwyg fields ---------- */
.rt > p:last-child{margin-bottom:0}
.rt ul,.rt ol{margin:0 0 1.15rem;padding-left:1.4rem}
.rt li{margin-bottom:.4rem}

/* ---------- single post / generic page fallback ---------- */
.entry{max-width:var(--measure)}
.entry h2{font-size:2rem;margin:2.5rem 0 1rem}
.entry h3{font-size:1.5rem;margin:2rem 0 .85rem}
.entry img{margin:1.5rem 0}
.entry blockquote{
  margin:1.6rem 0;padding-left:1.4rem;border-left:2px solid var(--cerulean);
  font-style:italic
}

/* ---------- theme additions ---------- */
/* nav items are links rather than buttons now that pages are real pages */
.nav a{display:inline-block;text-decoration:none}
.wordmark a{color:inherit;text-decoration:none}
.wordmark a:hover{color:var(--cerulean-deep)}

/* optional announcement bar, switched on from the Home page fields */
.announce{
  background:var(--cerulean-deep);color:#fff;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.13em;
  padding:.85rem 0;text-align:center
}
.announce a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}

/* bold book title opening a paragraph inside a combined series entry */
.book-lead{font-weight:500;color:var(--ink)}

/* pagination on the fallback list template */
.nav-links{display:flex;gap:1rem;flex-wrap:wrap;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.13em}
.nav-links .current{color:var(--ink)}

/* ---------- Contact Form 7, styled to match the built-in form ---------- */
.cf7 .wpcf7-form-control-wrap{display:block}
.cf7 label{display:block;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--ink-soft);margin-bottom:.5rem}
.cf7 input[type=text],.cf7 input[type=email],.cf7 input[type=tel],
.cf7 input[type=url],.cf7 textarea,.cf7 select{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:2px;
  padding:.75rem .9rem;margin-bottom:1.4rem;transition:border-color .18s ease}
.cf7 input:focus,.cf7 textarea:focus,.cf7 select:focus{
  outline:none;border-color:var(--cerulean)}
.cf7 textarea{min-height:9rem;resize:vertical;line-height:1.6}
.cf7 input[type=checkbox],.cf7 input[type=radio]{margin-right:.5rem}
.cf7 .wpcf7-list-item{margin:0 0 .6rem}
.cf7 .wpcf7-list-item-label{font-size:.95rem;color:var(--ink-body);
  text-transform:none;letter-spacing:0}
.cf7 input[type=submit]{
  font-family:inherit;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.13em;padding:.85rem 1.9rem;border-radius:2px;cursor:pointer;
  background:var(--cerulean-deep);border:1px solid var(--cerulean-deep);color:#fff;
  transition:background .18s ease,border-color .18s ease}
.cf7 input[type=submit]:hover{background:var(--cerulean);border-color:var(--cerulean)}
.cf7 .wpcf7-spinner{margin-left:.75rem}
.cf7 .wpcf7-response-output{
  margin:1.4rem 0 0;padding:.9rem 1.1rem;border-radius:2px;font-size:.95rem;
  border:1px solid var(--rule);background:var(--paper-deep)}
.cf7 .wpcf7-not-valid-tip{color:#B3261E;font-size:.85rem;margin:-1rem 0 1.2rem}

/* ---------- plugin buy buttons (iSell etc.) inside a product format ---------- */
.format-embed{margin-top:.9rem}
.format-embed form{margin:0}
.format-embed input[type=submit],.format-embed button,.format-embed .button{
  font-family:inherit;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.13em;padding:.85rem 1.9rem;border-radius:2px;cursor:pointer;
  background:transparent;border:1px solid var(--cerulean-deep);
  color:var(--cerulean-deep);text-decoration:none;display:inline-block;
  transition:background .18s ease,color .18s ease}
.format-embed input[type=submit]:hover,.format-embed button:hover,
.format-embed .button:hover{background:var(--cerulean-deep);color:#fff}
.format-embed select,.format-embed input[type=number],.format-embed input[type=text]{
  font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  border:1px solid var(--rule);border-radius:2px;padding:.5rem .7rem;
  margin-bottom:.75rem;max-width:100%}
.format-embed img{display:inline-block;vertical-align:middle}

/* ---------- description type, raised per Jill's review ---------- */
/* the descriptions were sitting at body size while the subtitle above (1.22rem)
   and the reviews below (1.18rem) were both larger, so they read as the smallest
   thing in the block. */
.book .rt,.product .rt{font-size:1.12rem;line-height:1.72}

/* ---------- second headshot on the Contact page ---------- */
/* the photograph sits beside the message, the way the portrait sits beside the
   bio on the home page, rather than stacked above it. */
.contact-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 21rem;
  gap:4.5rem;align-items:start
}
.contact-layout.is-single{grid-template-columns:1fr}
.contact-portrait{margin:0}
.contact-portrait img{
  display:block;width:100%;height:auto;border-radius:2px;
  box-shadow:0 6px 20px rgba(36,31,26,.16)
}
@media (max-width:1180px){
  .contact-layout{grid-template-columns:minmax(0,1fr) 18rem;gap:3rem}
}
@media (max-width:900px){
  .contact-layout{grid-template-columns:1fr;gap:2.5rem}
  .contact-portrait{order:-1;max-width:18rem}
}

/* ---------- a series entry of three or more covers ---------- */
/* two covers share one row; beyond that they wrap, so the set can grow without
   each cover shrinking to a thumbnail. */
.book.is-set{grid-template-columns:19rem 1fr}
.book.is-set .book-covers{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;align-items:end
}
.book.is-set .book-covers img{width:100%;height:auto}
@media (max-width:1180px){
  .book.is-set{grid-template-columns:16rem 1fr}
}
@media (max-width:860px){
  .book.is-set{grid-template-columns:1fr}
  .book.is-set .book-covers{grid-template-columns:repeat(3,minmax(0,1fr));max-width:22rem}
}

/* ---------- blog archive ---------- */
.postlist{list-style:none;margin:0;padding:0;max-width:46rem}
.postlist li{padding:2.25rem 0;border-top:1px solid var(--rule)}
.postlist li:first-child{border-top:0;padding-top:.5rem}
.post-date{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-soft);margin:0 0 .5rem
}
.postlist .h-item{margin:0}
.postlist .h-item a{color:var(--cerulean-deep);text-decoration:none}
.postlist .h-item a:hover{color:var(--ink)}
.post-excerpt{margin:.75rem 0 0;color:var(--ink-body)}
.pagination{margin-top:3rem}

/* ---------- consistent frames for photographs of varying shape ---------- */
/* The interview stills run from 2.35:1 to 3.5:1 and the event photos mix
   landscape with one portrait. Left alone they render at wildly different
   heights down the page. A fixed frame with object-fit:cover holds the rhythm
   until the real assets arrive. */
.vidlist img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--paper-deep);border-radius:2px
}
.award img{
  width:100%;aspect-ratio:2/3;object-fit:contain;
  background:var(--paper-deep);border-radius:2px
}

/* honeypot: off-screen is enough, and aria-hidden on a control is invalid ARIA */
.jsy-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- newsletter signup, rendered from a plugin shortcode ---------- */
.signup{margin-top:1.75rem;max-width:31rem}
/* Let the band's own background show through rather than Constant Contact's
   pale blue panel. Their heading and description are left visible: if they
   duplicate the eyebrow and text above, delete them in Constant Contact rather
   than hiding them here, so nothing is invisibly suppressed. */
.signup .ctct-form-embed .ctct-form-defaults{
  background:transparent!important;padding:0!important;font-family:inherit!important
}
.signup .ctct-form-embed .ctct-form-header{
  font-family:inherit!important;color:var(--ink)!important;font-weight:400!important
}
.signup .ctct-form-embed .ctct-form-text{
  font-family:inherit!important;color:var(--ink-body)!important
}
.signup .ctct-form-embed .ctct-form-button{
  font-family:inherit!important;text-transform:uppercase!important;
  letter-spacing:.13em!important;font-size:.82rem!important;
  background:var(--cerulean-deep)!important;border-radius:2px!important
}
.signup form{margin:0}
.signup input[type=text],.signup input[type=email]{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid var(--rule);border-radius:2px;padding:.75rem .9rem;
  margin-bottom:.9rem;transition:border-color .18s ease}
.signup input:focus{outline:none;border-color:var(--cerulean)}
.signup input[type=submit],.signup button{
  font-family:inherit;font-size:.82rem;text-transform:uppercase;letter-spacing:.13em;
  padding:.85rem 1.9rem;border-radius:2px;cursor:pointer;
  background:var(--cerulean-deep);border:1px solid var(--cerulean-deep);color:#fff;
  transition:background .18s ease}
.signup input[type=submit]:hover,.signup button:hover{background:var(--cerulean)}

/* ---------- Media page: photograph beside the introduction ---------- */
.media-intro{
  display:grid;grid-template-columns:minmax(0,1fr) 20rem;
  gap:4.5rem;align-items:start
}
.media-intro.is-single{grid-template-columns:1fr}
.media-portrait{margin:0}
.media-portrait img{
  display:block;width:100%;height:auto;border-radius:2px;
  box-shadow:0 6px 20px rgba(36,31,26,.16)
}
@media (max-width:1180px){
  .media-intro{grid-template-columns:minmax(0,1fr) 17rem;gap:3rem}
}
@media (max-width:900px){
  .media-intro{grid-template-columns:1fr;gap:2.5rem}
  .media-portrait{max-width:18rem}
}