/* Final shared refinements. Load last: styles.css, pages.css, then simple.css.
   Colours and fonts use the existing site variables; keep content in the HTML. */
:root{--font-head:"Playfair Display",Georgia,serif;--font-body:"Lora",Georgia,serif;--topbar-h:59px}
html{scroll-padding-top:calc(var(--topbar-h) + 1.25rem)}
body.pg{font-family:var(--font-body)}
button,input,select{font-family:inherit}
.tb-inner{max-width:70rem;min-height:58px;padding:.45rem 1.5rem;gap:.7rem;box-sizing:border-box}
.tb-name{font-size:1.04rem}
/* Equal space from the visible name and Home text, including Home's .6rem padding.
   Both header dividers are thin rules so their height and centre are consistent. */
.tb-separator{flex:none;width:1px;height:1.5rem;background:var(--muted);opacity:.45;margin-left:.3rem;margin-right:-.3rem}
.tb-nav{justify-content:flex-start;flex-wrap:nowrap;gap:.18rem}
.tb-nav a,.nav-more summary{font-size:.9rem;padding:.35rem .6rem;line-height:1.7}
.tb-nav>a[aria-current="page"]{text-decoration:none}
.tb-tools{gap:.15rem;margin-left:auto}
.tb-btn{flex:none}
.menu-toggle{width:36px;height:36px;align-items:center;justify-content:center;background:none;border:0;color:var(--ink);padding:7px;border-radius:50%;cursor:pointer}
.menu-toggle svg{width:21px;height:21px}
.nav-more{position:relative}
.nav-more summary{display:flex;align-items:center;gap:.25rem;list-style:none;cursor:pointer;border-radius:8px;white-space:nowrap}
.nav-more summary::-webkit-details-marker{display:none}
.more-arrow{display:block;flex:none;width:14px;height:14px;transform-origin:50% 50%;transition:transform .2s}
.nav-more[open] .more-arrow{transform:rotate(180deg)}
.nav-more summary.is-current{color:var(--accent);font-weight:700}
.more-links{position:absolute;right:0;top:calc(100% + .6rem);display:flex;flex-direction:column;min-width:11.5rem;padding:.4rem;background:var(--cream);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 20px rgba(var(--shadow-rgb),.08)}
.more-links a{padding:.45rem .65rem}
@media(hover:hover){.nav-more summary:hover,.more-links a:hover{background:var(--cream-2);color:var(--accent)}}
.nav-more summary:focus-visible,.menu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pg-main{padding:2.8rem 1.5rem 0}
.pg-wrap{max-width:46rem}
.pg-main .pg-head{margin-bottom:2rem}
.pg-main:not(.pg-plain) .pg-head h1{margin-bottom:1rem}
.pg-main .pg-head h1{color:var(--ink)}
.pg-main .pg-head .pg-lede{margin-bottom:1.1rem}
.pg-section>h2{font-size:1.35rem;letter-spacing:normal;line-height:1.35}
.pg-section .lede{font-size:1rem;max-width:none}
.dash-list .pg-when{width:7.2rem}
.dash-list li{padding:.7rem 0}
.dash-more{font-size:.87rem}
.card-panel{box-shadow:none;border-radius:8px;padding:1.1rem 1.3rem}
.original-contact .card-panel{background:var(--cream-2);border:1px solid var(--line);border-radius:14px;padding:2rem 2.2rem}
.original-contact p.contact-line{font-size:1.02rem;margin:0 0 .7rem}
.original-contact h2.section-title,.original-profiles h2.section-title{font-size:clamp(1.22rem,4.4vw,1.5rem);margin:0 0 1.5rem}
.quote-card{box-shadow:none;border-radius:8px}
.pub-list{padding-left:0}
.pub-list>li{box-shadow:none}
.pg-search-box{position:relative}
.pg-search{z-index:100}
@media(max-width:1100px){
  .tb-inner{padding:.5rem 1.1rem}
  .tb-menu{display:inline-flex}
  .tb-separator{display:none}
  .more-links{position:static;box-shadow:none;background:transparent;border:0;border-left:1px solid var(--line);border-radius:0;margin:.2rem 0 .3rem .65rem;padding:0 .5rem;min-width:0}
}
@media(max-width:960px){.original-contact .card-panel{padding:1.3rem 1.2rem}}
@media(max-width:860px){
  .pg-main{padding:2rem 1.1rem 0}
  .pg-main:not(.pg-plain) .pg-head>h1,.pg-main:not(.pg-plain) .pg-head>.pg-kicker{margin:0 0 .7rem}
  .pg-main:not(.pg-plain) .pg-head::after{display:block}
  .pg-main:not(.pg-plain) .pg-head{margin:0 0 1.8rem}
}
@media(max-width:560px){
  .tb-name{font-size:.98rem}
  .pg-section>h2{font-size:1.25rem}
  .dash-list .pg-when{width:auto}
}
@media(max-width:360px){
  .tb-inner{padding-left:.65rem;padding-right:.65rem;gap:.25rem}
  .tb-name{font-size:.88rem}
  .tb-tools{gap:0}
  .tb-tools .tb-btn,.menu-toggle{width:32px;height:34px}
}
@media(prefers-reduced-motion:reduce){.more-arrow{transition:none}}

/* Keep current behavior with the previous fonts, colors and layout. */
.pg-search input::-webkit-search-cancel-button{display:none}
.pub-body{min-width:0}
.pub-abstract mjx-container{max-width:100%;overflow-x:auto;overflow-y:hidden;padding:.15em 0}
.pg-main,.pg-main [id],.pg-main h2,.pg-main h3{scroll-margin-top:0}
.error-body{min-height:100vh;display:flex;flex-direction:column}
.error-body .pg-main{flex:1;width:100%}

/* Consistent spacing, using the existing typefaces and palette. */
/* Original academic pages: 2.4rem on each side of a section divider. */
:root{--section-gap:4.8rem}
.pg-main .pg-section{display:flow-root;margin:0;padding:0;border:0}
.pg-main .pg-section+.pg-section{margin-top:calc(var(--section-gap)/2);padding-top:calc(var(--section-gap)/2);border-top:1px solid var(--rule-3)}
.pg-section>:last-child{margin-bottom:0}

/* The exact short underline from the original Style 5. */
.pg-section>h2,.post-body h2{
  position:relative;padding:0 0 .65rem;border-top:0;
  margin-bottom:1.15rem;line-height:1.4;
}
.pg-section>h2::after,.post-body h2::after{
  content:"";position:absolute;left:0;bottom:0;
  width:2.2rem;height:3px;background:var(--accent-soft);
}
.original-contact h2.section-title,.original-profiles h2.section-title{margin-bottom:1.15rem}
.pg-section>h3{margin:1.7rem 0 .55rem;line-height:1.45}
.pg-section .item{margin:0 0 1.5rem}
.pg-section .item:last-child{margin-bottom:0}
.pg-section .item h3{font-size:1.06rem;margin:0 0 .35rem;line-height:1.45}
.pg-section .item p{margin:0 0 .4rem}
.pg-section .item p:last-child{margin-bottom:0}
.pg-section .subhead{margin:1.8rem 0 .75rem;line-height:1.65}
.pg-section>h2+.subhead{margin-top:0}
.pg-section>.pub-list>li:first-child,.pg-section>ul.plain>li:first-child,
.pg-section>.pg-news>li:first-child,.pg-section>.dash-list>li:first-child{padding-top:0}
.pg-section>.pub-list>li:last-child,.pg-section>ul.plain>li:last-child,
.pg-section>.pg-news>li:last-child,.pg-section>.dash-list>li:last-child{padding-bottom:0}
.pg-section p.dash-more{margin:1rem 0 0}
.pg-section .overview-body p:last-child,.original-contact p.contact-line:last-child{margin-bottom:0}
.pub-title,.overview-title{line-height:1.5}
.pub-meta{line-height:1.6}
.post-body h2{margin-top:var(--section-gap)}
.post-body h3{margin:1.7rem 0 .6rem;line-height:1.45}
.post-body p{margin-bottom:1.1rem}

/* Comfortable menu rows, including long section names. */
.post-pop .tb-links a,.more-links a{line-height:1.5;padding:.55rem .65rem;white-space:normal}
.post-pop{scroll-padding:.5rem}
.post-pop .theme-picker-label{margin-bottom:.35rem}
.tb-btn:focus-visible,.post-toc-list a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Align the footer rule with the reading column and clear the corner dock. */
.pg-foot{box-sizing:border-box;width:calc(100% - 3rem);max-width:46rem;margin:2.75rem auto 0;padding:1.4rem 0 5.5rem}
.error-body .pg-foot{width:calc(100% - 3rem)}
@media(max-width:860px){
  .pg-foot,.error-body .pg-foot{width:calc(100% - 2.2rem)}
}
@media(max-width:560px){
  .pg-section>h2,.post-body h2{margin-bottom:1rem}
  .original-contact h2.section-title,.original-profiles h2.section-title{margin-bottom:1rem}
  .pg-section .item{margin-bottom:1.25rem}
  .pg-section .subhead{margin-top:1.5rem}
  .pg-section>h2+.subhead{margin-top:0}
  .pg-foot{margin-top:2.25rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The original small-screen section padding is 2rem on each side. */
@media(max-width:960px){:root{--section-gap:4rem}}

/* Approved page-heading icons; the six More pages use the academic title/lede. */
.pg-head h1,.post-head h1{display:flex;align-items:flex-start;gap:.4em}
.page-title-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 1em;width:1em;height:1.15em;color:inherit}
.page-title-icon svg{display:block;width:1em;height:1em}
.page-title-text{min-width:0}
.home-gallery-link{display:block;border-radius:inherit}
.home-gallery-link:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.tb-brand-short,.tb-brand-page{display:none}
.nav-backdrop{display:none}

/* The existing mobile breakpoint now opens navigation from the left. */
@media(max-width:1100px){
  .tb-inner{flex-wrap:nowrap;gap:.45rem;min-height:58px}
  .tb-inner>.tb-menu{flex:none}
  .tb-name{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:.4rem;overflow:hidden}
  .tb-brand-full{overflow:hidden;text-overflow:ellipsis}
  .tb-tools{flex:none;margin-left:0}
  .tb-name.is-compact .tb-brand-full{display:none}
  .tb-name.is-compact .tb-brand-short{display:inline;flex:none}
  .tb-name.is-compact .tb-brand-page{display:flex;align-items:center;gap:.4rem;min-width:0}
  .tb-brand-divider{flex:none;width:1px;height:1.4em;background:var(--muted);opacity:.45}
  .tb-brand-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
  .tb-nav{position:fixed;top:var(--topbar-h);left:0;bottom:0;right:auto;width:min(21rem,75vw);max-height:none;margin:0;padding:1.25rem 1rem 1.5rem;border:0;border-right:1px solid var(--line);background:var(--cream-2);box-shadow:8px 0 24px rgba(var(--shadow-rgb),.12);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.15rem;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);visibility:hidden;pointer-events:none;transition:transform .22s ease,visibility .22s;z-index:2}
  .tb-nav.open{display:flex;transform:translateX(0);visibility:visible;pointer-events:auto}
  .nav-backdrop:not([hidden]){display:block;position:fixed;inset:var(--topbar-h) 0 0;background:rgba(var(--shadow-rgb),.3);z-index:55}
  body.nav-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.tb-nav{transition:none}}
/* EDIT: HOME_PREVIEW_LIMIT. Keep the newest five entries in EACH homepage
   list in index.html; retain older entries in news.html and blogs.html.
   nth-child(n+6) is a safety cap, not a replacement for trimming those lists. */
.home-main #news .dash-list>li:nth-child(n+6),
.home-main #latest-posts .dash-list>li:nth-child(n+6){display:none}
.drawer-profile,.mobile-nav-icon{display:none}

/* Mobile sidebar portrait, identity and icon rows, following the supplied reference. */
@media(max-width:1100px){
  .tb-nav .drawer-profile{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:.4rem 0 1.9rem}
  .drawer-photo{display:block;width:clamp(88px,26vw,112px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;flex:none}
  .tb-nav .drawer-profile .drawer-name{display:block;padding:0;border:0;border-radius:0;background:none;color:var(--ink);font-family:var(--font-head);font-size:clamp(1.05rem,5vw,1.35rem);font-weight:700;line-height:1.3;text-align:center;white-space:normal}
  .tb-nav>a,.tb-nav .more-links>a{display:flex;align-items:center;gap:.75rem;padding:.72rem .65rem;border-left:3px solid transparent;border-radius:7px;font-size:.95rem;line-height:1.5;white-space:normal}
  .tb-nav>a[aria-current="page"],.tb-nav .more-links>a[aria-current="page"]{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--cream-2));color:var(--accent);font-weight:700}
  .tb-nav .mobile-nav-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 1.1rem;width:1.1rem;height:1.1rem;color:var(--muted)}
  .mobile-nav-icon svg{display:block;width:100%;height:100%}
  .tb-nav a[aria-current="page"]>.mobile-nav-icon{color:var(--accent)}
  .tb-nav .nav-more>summary{gap:.75rem;padding:.72rem .65rem .72rem calc(.65rem + 3px);font-size:.95rem;line-height:1.5}
  .tb-nav .nav-more>summary .more-arrow{margin-left:auto}
  .tb-brand-page{font-family:var(--font-body);font-weight:400;color:var(--muted)}
}

/* Small usability polish using the existing colours and controls. */
.blog-filter.active .blog-count{opacity:1}
.tb-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pg-main [tabindex="-1"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.lightbox-close:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.menu-toggle[aria-expanded="true"]{color:var(--accent);background:var(--cream-2)}
@media(max-width:1100px){
  /* A larger tap area keeps the existing 19–21px symbols and compact bar. */
  .tb-inner>.tb-menu,.tb-tools>.tb-btn{width:44px;height:44px;min-width:44px}
}

/* Blog return controls match the adjacent links and wrap with the same row. */
.post-last-page{appearance:none;border:0;padding:0;background:none;color:var(--accent);font:inherit;cursor:pointer}
@media(hover:hover){.post-last-page:hover{text-decoration:underline}}
.post-last-page:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Regular contents menus start with their page title; blog menus keep Contents. */
.post-pop .post-toc-title{font-family:var(--font-head);font-size:1rem;font-weight:700;line-height:1.4;text-transform:none;letter-spacing:normal;margin-bottom:.65rem}


/* EDIT: Version A's Classic sidebar follows --cream-2 in Light/Dark modes.
   Match only the navigation surfaces; keep the page background unchanged. */
.tb,.more-links{background:var(--cream-2)}
@media(hover:hover){
  .tb-nav a:hover,.nav-more summary:hover{background:var(--nav-hover);color:var(--tab-ink-active)}
}
/* The existing deeper accent stays readable on Classic's hover/active fill. */
.tb-nav>a[aria-current="page"],.nav-more summary.is-current{color:var(--tab-ink-active)}
.menu-toggle[aria-expanded="true"]{background:var(--nav-hover);color:var(--tab-ink-active)}
@media(max-width:1100px){
  .tb-nav{background:var(--cream-2)}
  .tb-nav>a[aria-current="page"],.tb-nav .more-links>a[aria-current="page"]{background:var(--nav-hover);color:var(--tab-ink-active)}
  .tb-nav a[aria-current="page"]>.mobile-nav-icon{color:var(--tab-ink-active)}
  .more-links{background:transparent}
}

/* EDIT: Only the name beside the Biography photo uses Version A Typeface 5's
   title face. Rouge Script is loaded only in bio.html; it has one real weight.
   Homepage, page titles, menu names and section headings keep their B-v005 fonts. */
.bio-hero-name{font-family:"Rouge Script",cursive;font-weight:400;font-synthesis:none;line-height:1.3}
/* Subsection headings use the already loaded Lora face, slightly lighter than
   the Playfair Display section headings. Preserve their sizes and spacing. */
.pg-main h3{font-family:var(--font-body);font-weight:600}

/* Footer help uses the same accent and hover colours as other site links. */
.site-guide-help a{color:var(--accent)}

/* Separate compact-brand actions keep the existing spacing and typography. */
.tb-name a{font:inherit;color:inherit;text-decoration:none;min-width:0}
.tb-name .tb-brand-title{appearance:none;border:0;background:none;padding:0;text-align:left;font:inherit;color:inherit;min-width:0;cursor:pointer}
.tb-name a:focus-visible,.tb-name button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
@media(hover:hover){.tb-name:hover{color:var(--ink)}.tb-name a:hover,.tb-name .tb-brand-title:hover{color:var(--accent)}}
@media(max-width:1100px){.tb-name{overflow:visible}}

/* The 404 search action keeps the existing destination-button style. */
.error-search{display:inline-flex;align-items:center;gap:.5rem;background:transparent;font-family:inherit;font-size:.92rem;font-weight:600;line-height:inherit;cursor:pointer}
.error-search svg{width:1em;height:1em;flex:none}

/* Reading-position feedback does not change the size of the contents menu. */
.post-toc-list a[aria-current="location"]{background:var(--nav-hover);color:var(--tab-ink-active);font-weight:600}

/* Suppress only the stale search-return circle, until the next interaction. */
#searchButton.search-return-focus:not([aria-expanded="true"]){outline:none;border-color:transparent;color:var(--ink)}