/* ============================================================
   TE Aravind Reader
   One column. Reading first. No webfonts.
   ============================================================ */

:root{
  --paper:#f7f2e9;
  --raised:#fffdf8;
  --ink:#2b2925;
  --muted:#6b645c;
  --clay:#a96748;
  --line:#ded5c7;

  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --measure:680px;
  --wide:1040px;
  --gutter:24px;

  --step-0:20px;
  --step-s:15px;
  --step-1:26px;
  --step-2:34px;
  --step-3:46px;
  --step-4:60px;
}

*,
*::before,
*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--step-0);
  line-height:1.75;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{max-width:100%;height:auto;display:block}

a{color:var(--clay)}
a:hover{color:var(--ink)}

:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* --- Layout ---------------------------------------------- */

.wrap{
  width:100%;
  max-width:var(--measure);
  margin:0 auto;
  padding:0 var(--gutter);
}

.site-main{
  display:block;
  min-height:60vh;
  padding:0 0 110px;
}


/* --- Accessibility --------------------------------------- */

.screen-reader-text{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:999;
  background:var(--ink);
  color:var(--raised);
  padding:12px 18px;
  font-family:var(--sans);
  font-size:var(--step-s);
}
.skip-link:focus{left:12px;top:12px}


/* --- Header ---------------------------------------------- */

.site-header{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:76px;
  max-width:var(--wide);
}

.site-name,
.footer-name{
  font-family:var(--serif);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
  text-decoration:none;
}

.custom-logo{max-height:44px;width:auto}

.nav-menu,
.footer-menu{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:26px;
  margin:0;
  padding:0;
  list-style:none;
}

.nav-menu a,
.footer-menu a{
  font-family:var(--sans);
  font-size:var(--step-s);
  line-height:1.4;
  color:var(--muted);
  text-decoration:none;
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a,
.footer-menu a:hover{
  color:var(--ink);
}

/* Toggle is hidden until the viewport is narrow. */
.nav-toggle{
  display:none;
  width:40px;height:40px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  display:block;
  width:22px;height:1px;
  margin:0 auto;
  background:currentColor;
}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before,
.nav-toggle-bars::after{content:'';position:absolute;left:0}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:0;transform:rotate(-45deg)}


/* --- Page heads ------------------------------------------ */

.page-head{
  padding:76px 0 0;
  margin-bottom:52px;
}

.page-head-title{
  margin:0;
  font-size:var(--step-3);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.02em;
}

.page-head-intro{
  margin-top:18px;
  color:var(--muted);
}
.page-head-intro p{margin:0 0 .8em}


/* --- The writing index ----------------------------------
   This is the one place the theme raises its voice: large
   serif titles, hairline separated, like a book's contents.
   -------------------------------------------------------- */

.entry-list{
  border-top:1px solid var(--line);
}

.entry-row{
  padding:34px 0;
  border-bottom:1px solid var(--line);
}

.entry-row-title{
  margin:0;
  font-size:var(--step-1);
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.01em;
}

.entry-row-title a{
  color:var(--ink);
  text-decoration:none;
}
.entry-row-title a:hover{
  color:var(--clay);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}

.entry-row-meta{
  margin:8px 0 0;
  font-family:var(--sans);
  font-size:var(--step-s);
  color:var(--muted);
}

.entry-row-excerpt{
  margin:12px 0 0;
  color:var(--muted);
}

.sep{
  display:inline-block;
  width:14px;height:1px;
  margin:0 10px;
  vertical-align:middle;
  background:var(--line);
}

.empty{
  padding:40px 0;
  color:var(--muted);
}


/* --- Filters --------------------------------------------- */

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:40px;
}

.filter{
  padding:6px 13px;
  border:1px solid var(--line);
  border-radius:2px;
  font-family:var(--sans);
  font-size:var(--step-s);
  color:var(--muted);
  text-decoration:none;
}
.filter:hover{border-color:var(--muted);color:var(--ink)}
.filter.is-on{background:var(--ink);border-color:var(--ink);color:var(--raised)}


/* --- Single entry ---------------------------------------- */

.entry-head{padding:76px 0 0}

.entry-title{
  margin:0;
  font-size:var(--step-3);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.025em;
}

.entry-meta{
  margin:16px 0 0;
  font-family:var(--sans);
  font-size:var(--step-s);
  color:var(--muted);
}

.entry-media{
  margin:44px 0 0;
}
.entry-media img{width:100%}


/* --- Content --------------------------------------------- */

.entry-content{
  margin-top:44px;
}

.entry-content > *{margin-top:0;margin-bottom:1.35em}
.entry-content > *:last-child{margin-bottom:0}

.entry-content h2{
  margin-top:1.9em;
  margin-bottom:.5em;
  font-size:var(--step-2);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.015em;
}

.entry-content h3{
  margin-top:1.7em;
  margin-bottom:.45em;
  font-size:var(--step-1);
  line-height:1.3;
  font-weight:700;
}

.entry-content h4{
  margin-top:1.6em;
  margin-bottom:.4em;
  font-size:var(--step-0);
  font-weight:700;
}

.entry-content a{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

.entry-content ul,
.entry-content ol{padding-left:1.3em}
.entry-content li{margin-bottom:.5em}

.entry-content blockquote{
  margin-left:0;
  margin-right:0;
  padding-left:26px;
  border-left:2px solid var(--clay);
  color:var(--muted);
  font-style:italic;
}
.entry-content blockquote p:last-child{margin-bottom:0}

.entry-content hr,
.wp-block-separator{
  height:1px;
  margin:3em auto;
  border:0;
  background:var(--line);
}
.wp-block-separator:not(.is-style-wide):not(.alignwide):not(.alignfull){
  max-width:120px;
}

.entry-content code,
.entry-content kbd{
  padding:2px 5px;
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:2px;
  font-size:.85em;
}

.entry-content pre{
  padding:18px;
  overflow-x:auto;
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:2px;
  font-size:.8em;
  line-height:1.6;
}

.entry-content table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--sans);
  font-size:var(--step-s);
}
.entry-content th,
.entry-content td{
  padding:11px 12px;
  border:1px solid var(--line);
  text-align:left;
}
.entry-content th{background:var(--raised);font-weight:700}

.entry-content figure{margin-left:0;margin-right:0}
.entry-content figcaption,
.wp-element-caption{
  margin-top:10px;
  font-family:var(--sans);
  font-size:13px;
  color:var(--muted);
}


/* --- Blocks ---------------------------------------------- */
/* Wide and full alignment work on the Landing template.      */

.entry-content > .alignwide{
  max-width:var(--wide);
  margin-left:calc(50% - min(50vw - var(--gutter), var(--wide) / 2));
  margin-right:auto;
  width:min(100% + 2 * (var(--wide) - var(--measure)) / 2, calc(100vw - 2 * var(--gutter)));
}

.landing-content{
  margin-top:0;
  padding:0;
}

.landing-content > *{
  max-width:var(--measure);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.landing-content > .alignwide{
  max-width:calc(var(--wide) + 2 * var(--gutter));
}

.landing-content > .alignfull{
  max-width:none;
  padding-left:0;
  padding-right:0;
}

.landing-content > *:first-child{padding-top:80px}

.wp-block-button__link{
  font-family:var(--sans);
  font-size:var(--step-s);
  font-weight:600;
  text-decoration:none;
  border-radius:2px;
}

.wp-block-button.is-style-outline .wp-block-button__link{
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
}

.wp-block-image img{border-radius:2px}

/* Book covers: 2:3, never cropped square, with weight under them. */
.wp-block-image.is-cover img,
.book-cover img{
  width:100%;
  max-width:320px;
  aspect-ratio:2 / 3;
  object-fit:cover;
  box-shadow:0 22px 60px rgba(64,48,35,.18);
}

.wp-block-latest-posts,
.wp-block-latest-posts.is-grid{
  padding-left:0;
  list-style:none;
}
.wp-block-latest-posts li{
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.wp-block-latest-posts li:first-child{border-top:1px solid var(--line)}
.wp-block-latest-posts__post-title{
  font-family:var(--serif);
  font-size:var(--step-1);
  font-weight:700;
  line-height:1.25;
  color:var(--ink);
  text-decoration:none;
}
.wp-block-latest-posts__post-title:hover{color:var(--clay)}
.wp-block-latest-posts__post-date{
  display:block;
  margin-top:6px;
  font-family:var(--sans);
  font-size:var(--step-s);
  color:var(--muted);
}

.wp-block-group.has-background{
  padding:44px var(--gutter);
  border-radius:2px;
}


/* --- Post navigation ------------------------------------- */

.entry-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:72px;
  padding-top:32px;
  border-top:1px solid var(--line);
}

.entry-nav-link{text-decoration:none}
.entry-nav-link.is-next{text-align:right}

.entry-nav-label{
  display:block;
  font-family:var(--sans);
  font-size:13px;
  color:var(--muted);
}

.entry-nav-title{
  display:block;
  margin-top:5px;
  font-size:var(--step-0);
  line-height:1.3;
  color:var(--ink);
}
.entry-nav-link:hover .entry-nav-title{color:var(--clay)}

.page-links{
  margin-top:32px;
  font-family:var(--sans);
  font-size:var(--step-s);
}


/* --- Aside / widgets ------------------------------------- */

.entry-aside{
  margin-top:64px;
  padding:32px;
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:2px;
}
.entry-aside .widget-title{
  margin:0 0 12px;
  font-size:var(--step-1);
  line-height:1.25;
}
.entry-aside > .widget + .widget{margin-top:28px}


/* --- Pagination ------------------------------------------ */

.pagination{margin-top:52px}
.pagination ul{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.pagination a,
.pagination span{
  display:block;
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:2px;
  font-family:var(--sans);
  font-size:var(--step-s);
  color:var(--muted);
  text-decoration:none;
}
.pagination a:hover{border-color:var(--muted);color:var(--ink)}
.pagination .current{background:var(--ink);border-color:var(--ink);color:var(--raised)}


/* --- Forms ----------------------------------------------- */

.search-form{
  display:flex;
  gap:8px;
  margin:0 0 40px;
}

.search-field,
.comment-form input:not([type="submit"]),
.comment-form textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--raised);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
}

.search-submit,
.comment-form input[type="submit"],
.comment-form .submit{
  padding:11px 20px;
  border:1px solid var(--ink);
  border-radius:2px;
  background:var(--ink);
  color:var(--raised);
  font-family:var(--sans);
  font-size:var(--step-s);
  font-weight:600;
  cursor:pointer;
}


/* --- Comments -------------------------------------------- */

.comments{
  margin-top:72px;
  padding-top:34px;
  border-top:1px solid var(--line);
}
.comments-title{
  margin:0 0 26px;
  font-size:var(--step-2);
  line-height:1.2;
}
.comment-list{
  margin:0 0 44px;
  padding-left:0;
  list-style:none;
}
.comment-list ol{list-style:none;padding-left:24px}
.comment-list li{margin-bottom:26px}
.comment-meta{
  font-family:var(--sans);
  font-size:13px;
  color:var(--muted);
}
.comment-form label{
  display:block;
  margin-bottom:5px;
  font-family:var(--sans);
  font-size:var(--step-s);
  color:var(--muted);
}
.comment-form p{margin-bottom:18px}


/* --- Footer ---------------------------------------------- */

.site-footer{
  border-top:1px solid var(--line);
  padding:52px 0 76px;
}

.footer-inner{
  max-width:var(--wide);
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:start;
}

.footer-note{
  margin:8px 0 0;
  font-family:var(--sans);
  font-size:var(--step-s);
  color:var(--muted);
  max-width:44ch;
}

.footer-links{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}

.elsewhere{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}
.elsewhere a{
  font-family:var(--sans);
  font-size:var(--step-s);
  color:var(--muted);
  text-decoration:none;
}
.elsewhere a:hover{color:var(--ink)}

.copyright{
  grid-column:1 / -1;
  margin:20px 0 0;
  font-family:var(--sans);
  font-size:13px;
  color:var(--muted);
}


/* --- Narrow screens -------------------------------------- */

@media (max-width:780px){
  :root{--step-3:36px;--step-2:28px;--step-1:23px;--step-4:44px}

  .nav-enhanced .nav-toggle{display:block}

  .nav-enhanced .site-nav{
    display:none;
    position:absolute;
    left:0;right:0;
    top:100%;
    z-index:60;
    padding:20px var(--gutter) 26px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .nav-enhanced .site-nav.is-open{display:block}

  .header-inner{position:relative}

  .nav-menu{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  .nav-menu a{
    display:block;
    padding:9px 0;
    font-size:17px;
  }

  .page-head,
  .entry-head{padding-top:52px}

  .entry-nav{grid-template-columns:1fr;gap:22px}
  .entry-nav-link.is-next{text-align:left}

  .footer-inner{grid-template-columns:1fr}
  .footer-links{align-items:flex-start}
}

@media (max-width:520px){
  :root{--step-0:19px;--gutter:20px}
  .search-form{flex-direction:column}
  .search-submit{width:100%}
}


/* --- Print ----------------------------------------------- */

@media print{
  .site-header,.site-footer,.entry-nav,.comments,.pagination,.skip-link{display:none}
  body{background:#fff;color:#000;font-size:12pt}
  .wrap{max-width:none}
}


/* ============================================================
   PATTERN LAYOUTS
   Styles for the block patterns under "TE Aravind" in the
   inserter. These target core block markup, so the layouts
   stay editable as normal blocks.
   ============================================================ */

/* --- Homepage ------------------------------------------- */

.home-open{padding-top:20px}
.home-open .has-display-font-size{
  line-height:1.08;font-weight:700;letter-spacing:-.03em;margin-bottom:26px
}
.home-open p{color:var(--muted)}
.home-open p.lead{color:var(--ink)}
.buttons{margin-top:34px}

.block{margin-top:88px}
.block-title{margin-bottom:8px}
.block-note{margin-bottom:30px;color:var(--muted)}
.rule{margin:88px auto;max-width:none}

.page-open{padding-top:20px}
.standfirst{color:var(--muted)}

.pullquote{
  margin:44px 0;padding-left:26px;border-left:2px solid var(--clay);
  border-right:0;font-style:italic;color:var(--muted)
}
.pullquote p{margin-bottom:0}

/* --- Books ---------------------------------------------- */

.wp-block-columns.book{
  gap:38px;margin-bottom:0;padding:44px 0;border-bottom:1px solid var(--line)
}
.wp-block-columns.book:first-of-type{border-top:1px solid var(--line)}

.book-cover img{
  width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:2px;
  box-shadow:0 22px 60px rgba(64,48,35,.18)
}

.book-meta{margin-bottom:10px;font-family:var(--sans);font-size:var(--step-s);color:var(--muted)}
.book-title{margin-bottom:14px;font-size:var(--step-2);line-height:1.15;font-weight:700;letter-spacing:-.02em}
.wp-block-columns.book p{color:var(--muted)}

.book-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.book-links a{
  padding:9px 15px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--sans);font-size:14px;color:var(--muted);text-decoration:none
}
.book-links a:hover{border-color:var(--ink);color:var(--ink)}

/* --- Media ---------------------------------------------- */

.feature{
  padding:40px 0 44px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.feature-source{margin-bottom:12px;font-family:var(--sans);font-size:13px;color:var(--muted)}
.feature-title{margin-bottom:16px;font-size:var(--step-2);line-height:1.15;letter-spacing:-.02em}
.feature p{color:var(--muted)}
.feature .go a{font-family:var(--sans);font-size:var(--step-s)}

.media-group{margin-top:72px}
.media-group-title{margin-bottom:6px;font-size:var(--step-2);line-height:1.2;letter-spacing:-.015em}
.media-group-note{margin-bottom:30px;color:var(--muted)}

.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 44px;
  border-top:1px solid var(--line)
}
.media-grid > .item{
  margin:0;padding:26px 0;border-bottom:1px solid var(--line)
}

.item-kind{
  display:flex;align-items:center;gap:7px;margin-bottom:9px;
  font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--muted)
}
.item-kind::before{
  content:'';width:16px;height:16px;flex:0 0 16px;border-radius:50%;
  border:1px solid var(--line);background:var(--raised)
}
.item-kind.k-watch::before{
  background:var(--clay);border-color:var(--clay);border-radius:0;
  clip-path:polygon(32% 24%,32% 76%,78% 50%)
}
.item-kind.k-listen::before{
  border-color:transparent;border-radius:0;
  background:linear-gradient(to right,
    var(--clay) 0 2px,transparent 2px 5px,
    var(--clay) 5px 7px,transparent 7px 10px,
    var(--clay) 10px 12px,transparent 12px 15px)
}

.media-grid .item h3{margin-bottom:8px;font-size:21px;line-height:1.3}
.media-grid .item p{margin-bottom:12px;color:var(--muted);font-size:18px}

.item-links{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:0}
.item-links a{font-family:var(--sans);font-size:14px;text-decoration:underline;text-underline-offset:3px}

.wp-block-columns.press-row{
  gap:26px;margin-bottom:0;padding:22px 0;border-bottom:1px solid var(--line)
}
.press-where p{
  margin-bottom:0;font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.5
}
.press-row h3{margin-bottom:6px;font-size:20px;line-height:1.35}
.press-row p{color:var(--muted);font-size:17px}

/* --- About stages --------------------------------------- */

.wp-block-columns.stage{
  gap:26px;margin-bottom:0;padding:34px 0;border-bottom:1px solid var(--line)
}
.wp-block-columns.stage:first-of-type{border-top:1px solid var(--line)}
.stage-num p{
  margin-bottom:0;padding-top:8px;
  font-family:var(--sans);font-size:13px;color:var(--muted)
}
.stage h3{margin-bottom:10px;font-size:var(--step-1);line-height:1.25}
.stage p{color:var(--muted)}

/* --- Listed item ---------------------------------------- */

.wp-block-group.entry-row{
  padding:34px 0;border-bottom:1px solid var(--line)
}
.wp-block-group.entry-row .entry-row-title{margin-bottom:0}
.wp-block-group.entry-row .entry-row-meta{margin:8px 0 0}
.wp-block-group.entry-row .entry-row-excerpt{margin:12px 0 0}

/* --- Latest Posts inside a pattern ---------------------- */

.block .wp-block-latest-posts__list{border-top:1px solid var(--line)}

/* --- Narrow --------------------------------------------- */

@media (max-width:780px){
  .media-grid{grid-template-columns:1fr;gap:0}
  .wp-block-columns.book,
  .wp-block-columns.stage,
  .wp-block-columns.press-row{gap:20px}
  .book-cover{max-width:200px}
  .stage-num p{padding-top:0}
  .block{margin-top:64px}
  .rule{margin:64px auto}
}

/* Empty cover column shows a visible drop zone in the editor. */
.book-cover:empty{
  aspect-ratio:2/3;
  border:1px dashed var(--line);
  border-radius:2px;
}


/* ============================================================
   SUBMENUS
   Second-level items in the header menu. Desktop: a small panel
   on hover or keyboard focus. Narrow: indented under the parent,
   always open once the menu is expanded.
   ============================================================ */

.nav-menu .sub-menu{
  list-style:none;
  margin:0;
  padding:0;
}

@media (min-width:781px){

  .nav-menu > li{position:relative}

  /* Extends the hover area down to meet the panel, so moving the
     pointer from the parent to a child doesn't close it. */
  .nav-menu > li.menu-item-has-children{
    padding-bottom:12px;
    margin-bottom:-12px;
  }

  .nav-menu > li.menu-item-has-children > a::after{
    content:'';
    display:inline-block;
    width:0;height:0;
    margin-left:7px;
    vertical-align:middle;
    border-left:3.5px solid transparent;
    border-right:3.5px solid transparent;
    border-top:4px solid currentColor;
    opacity:.55;
  }

  .nav-menu .sub-menu{
    position:absolute;
    top:100%;
    left:-18px;
    min-width:200px;
    padding:9px 0;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:2px;
    box-shadow:0 18px 44px rgba(64,48,35,.11);
    opacity:0;
    visibility:hidden;
    transform:translateY(-4px);
    transition:opacity .16s,transform .16s,visibility .16s;
    z-index:60;
  }

  .nav-menu > li:hover > .sub-menu,
  .nav-menu > li:focus-within > .sub-menu{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .nav-menu .sub-menu a{
    display:block;
    padding:8px 18px;
    white-space:nowrap;
  }

  .nav-menu .sub-menu a:hover,
  .nav-menu .sub-menu .current-menu-item > a{
    color:var(--ink);
    background:var(--raised);
  }
}

@media (max-width:780px){
  .nav-menu .sub-menu{
    margin:2px 0 8px;
    padding-left:16px;
    border-left:1px solid var(--line);
  }
  .nav-menu .sub-menu a{
    padding:7px 0;
    font-size:15px;
  }
}

/* Buttons are not body links — no underline. */
.entry-content .wp-block-button__link,
.landing-content .wp-block-button__link,
.wp-block-button__link{
  text-decoration:none;
}
.wp-block-button__link:hover{
  text-decoration:none;
}


/* --- Writings hub --------------------------------------- */

.section-list{
  border-top:1px solid var(--line);
  margin-top:44px;
}
.section-row{
  padding:30px 0;
  border-bottom:1px solid var(--line);
}
.section-row-title{
  margin:0 0 8px;
  font-size:var(--step-1);
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.01em;
}
.section-row-title a{
  color:var(--ink);
  text-decoration:none;
}
.section-row-title a:hover{
  color:var(--clay);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.section-row p{
  margin:0;
  color:var(--muted);
}

/* Second row of chips sits closer, and reads as subordinate. */
.filters-sub{
  margin-top:-28px;
  padding-left:14px;
  border-left:1px solid var(--line);
}
.filters-sub .filter{font-size:14px}


/* --- Optional images on media items ---------------------- */

/* Small mark or thumbnail above the publication line. */
.press-where figure{
  margin:0 0 12px;
}
.press-where img{
  width:100%;
  max-width:150px;
  height:auto;
  border-radius:2px;
}

/* Wider thumbnail on a watch or listen item. */
.media-grid .item figure{
  margin:0 0 14px;
}
.media-grid .item img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:2px;
  background:var(--raised);
}

/* Image at the top of the featured band. */
.feature figure{
  margin:0 0 22px;
}
.feature img{
  width:100%;
  height:auto;
  border-radius:2px;
}

@media (max-width:780px){
  .press-where img{max-width:120px}
}


/* --- Video thumbnails ------------------------------------
   Add the class "thumb" to an Image block and link it to the
   video. The play mark is drawn in CSS, so no overlay image
   is needed and nothing extra loads.
   --------------------------------------------------------- */

.item .thumb,
.feature .thumb{
  position:relative;
  margin:0 0 14px;
}

.item .thumb a,
.feature .thumb a{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:2px;
  background:var(--raised);
}

.item .thumb img,
.feature .thumb img{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  transition:transform .35s ease;
}

.item .thumb a:hover img,
.feature .thumb a:hover img{
  transform:scale(1.03);
}

/* Disc */
.item .thumb a::after,
.feature .thumb a::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(43,41,37,.74);
  z-index:1;
  transition:background .25s ease;
}

/* Triangle */
.item .thumb a::before,
.feature .thumb a::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-38%,-50%);
  border-left:15px solid #fffdf8;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  z-index:2;
}

.item .thumb a:hover::after,
.feature .thumb a:hover::after{
  background:var(--clay);
}

/* An unlinked thumbnail gets no play mark. */
.item .thumb:not(:has(a))::after,
.feature .thumb:not(:has(a))::after{
  content:none;
}

@media (prefers-reduced-motion:reduce){
  .item .thumb a:hover img,
  .feature .thumb a:hover img{transform:none}
}


/* --- Compact tiles ---------------------------------------
   Add the class "tiles" to a media-grid group and the items
   become a three-across scan: thumbnail, source, title, two
   lines of description, link.
   --------------------------------------------------------- */

.media-grid.tiles{
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:4px 26px;
}

.media-grid.tiles > .item{
  padding:22px 0;
}

.media-grid.tiles .item .thumb{
  margin-bottom:12px;
}

.media-grid.tiles .item .item-kind{
  font-size:11px;
  margin-bottom:6px;
  gap:6px;
}
.media-grid.tiles .item .item-kind::before{
  width:13px;height:13px;flex-basis:13px;
}

.media-grid.tiles .item h3{
  font-size:18px;
  line-height:1.28;
  margin-bottom:6px;
}

/* Description clamped to two lines. */
.media-grid.tiles .item > p:not(.item-kind):not(.item-links){
  margin-bottom:10px;
  font-size:15px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.media-grid.tiles .item .item-links{
  gap:12px;
}
.media-grid.tiles .item .item-links a{
  font-size:13px;
}

/* Smaller play mark to match the smaller thumbnail. */
.media-grid.tiles .item .thumb a::after{
  width:38px;height:38px;
}
.media-grid.tiles .item .thumb a::before{
  border-left-width:11px;
  border-top-width:7px;
  border-bottom-width:7px;
}

@media (max-width:520px){
  .media-grid.tiles{grid-template-columns:1fr 1fr;gap:0 18px}
  .media-grid.tiles .item h3{font-size:17px}
}


/* --- About page ------------------------------------------ */

/* Larger opening paragraph, in the reading serif. */
.about-lead{
  margin-bottom:1.1em;
  font-size:26px;
  line-height:1.45;
  color:var(--ink);
}

/* Portrait sits left, not full width. */
.portrait img{
  width:100%;
  max-width:340px;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  border-radius:2px;
}
.portrait{
  margin:0 0 40px;
}

@media (max-width:520px){
  .about-lead{font-size:22px}
  .portrait img{max-width:100%}
}

/* Pages with the title hidden still need their top breathing room. */
.entry.is-untitled .entry-content{margin-top:76px}
.entry.is-untitled .entry-media{margin-top:76px}
.entry.is-untitled .entry-media + .entry-content{margin-top:44px}
.page-head.is-untitled{padding-top:76px}
.page-head.is-untitled .page-head-intro{margin-top:0}

@media (max-width:780px){
  .entry.is-untitled .entry-content,
  .entry.is-untitled .entry-media{margin-top:52px}
  .page-head.is-untitled{padding-top:52px}
}


/* --- Newsletter band ------------------------------------- */

.newsletter{
  border-top:1px solid var(--line);
  background:var(--raised);
  padding:56px 0 60px;
}

.newsletter .wrap{
  max-width:var(--measure);
}

.newsletter-title{
  margin:0 0 10px;
  font-size:var(--step-2);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.015em;
}

.newsletter-note{
  margin:0 0 26px;
  color:var(--muted);
  max-width:52ch;
}

.newsletter-form .widget + .widget{margin-top:26px}

/* Tidy up whatever the provider's embed puts in. */
.newsletter-form input[type="email"],
.newsletter-form input[type="text"]{
  width:100%;
  max-width:340px;
  padding:12px 13px;
  border:1px solid #cfc4b7;
  border-radius:2px;
  background:#fff;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
}

.newsletter-form input[type="submit"],
.newsletter-form button[type="submit"]{
  padding:12px 22px;
  border:1px solid var(--ink);
  border-radius:2px;
  background:var(--ink);
  color:var(--raised);
  font-family:var(--sans);
  font-size:var(--step-s);
  font-weight:600;
  cursor:pointer;
}

.newsletter-form form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}

.newsletter-form label{
  font-family:var(--sans);
  font-size:var(--step-s);
  color:var(--muted);
}

.newsletter-form p{
  font-family:var(--sans);
  font-size:14px;
  color:var(--muted);
}

@media (max-width:520px){
  .newsletter{padding:44px 0 48px}
  .newsletter-form input[type="email"],
  .newsletter-form input[type="text"]{max-width:100%}
  .newsletter-form input[type="submit"],
  .newsletter-form button[type="submit"]{width:100%}
}