/* Layout samples for the JournalsPub home page (?layout=magazine|catalogue|directory).
   Same data, three different structures. Colours come from jp.css. */
main:has(.mg-masthead), main:has(.ct-top), main:has(.dr-strip) { background: transparent; box-shadow: none; border: 0; padding: 0; width: min(1180px, 100% - 2rem); }
.mg-head, .dr-dhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.mg-head h2, .dr-dhead h2 { margin: 0; }

/* ---- A. Magazine: content first, no hero panel ---- */
.mg-masthead { text-align: center; padding: 56px 0 32px; }
.mg-kicker { text-transform: uppercase; letter-spacing: .16em; font-size: var(--t-xs); color: var(--faint); margin: 0 0 var(--s-4); }
.mg-masthead h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; margin: 0 0 var(--s-5); }
.mg-search { display: flex; max-width: 640px; margin: 0 auto var(--s-4); border: 1.5px solid var(--brand); border-radius: 999px; overflow: hidden; background: #fff; }
.mg-search input { flex: 1; border: 0; padding: .95rem 1.4rem; font: inherit; outline: none; min-width: 0; }
.mg-search button { background: var(--brand); color: #fff; border: 0; padding: 0 1.8rem; font-weight: 700; cursor: pointer; }
.mg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0; padding: 0; }
.mg-chips a { display: block; padding: .35rem .85rem; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: var(--t-sm); text-decoration: none !important; background: #fff; }
.mg-chips a:hover, .mg-chips .all { border-color: var(--brand); }
.mg-latest, .mg-journals { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-6); margin-bottom: var(--s-5); }
.mg-head { border-bottom: 2px solid var(--brand); padding-bottom: var(--s-3); margin-bottom: var(--s-5); }
.mg-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-6); }
.mg-lead { display: grid; grid-template-columns: 170px 1fr; gap: var(--s-5); }
.mg-cover img { width: 170px; height: 220px; object-fit: cover; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.2); display: block; }
.mg-meta { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 .4rem; }
.mg-lead h3 { font-size: var(--t-xl); line-height: 1.2; margin: 0 0 .5rem; }
.mg-lead h3 a { text-decoration: none !important; }
.mg-by { color: var(--muted); font-size: var(--t-sm); margin: 0 0 .6rem; }
.mg-abs { font-family: var(--serif); color: var(--ink); margin: 0 0 .8rem; }
.mg-read { font-weight: 700; }
.mg-side { list-style: none; margin: 0; padding: 0 0 0 var(--s-5); border-left: 1px solid var(--rule); counter-reset: n; }
.mg-side li { padding: 0 0 var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--rule); display: grid; gap: .25rem; }
.mg-side li:last-child { border: 0; margin: 0; }
.mg-side .t { font-family: var(--serif); font-weight: 700; line-height: 1.3; text-decoration: none !important; }
.mg-rail { list-style: none; display: flex; gap: var(--s-4); overflow-x: auto; margin: 0; padding: 0 0 var(--s-3); scroll-snap-type: x proximity; }
.mg-rail li { flex: 0 0 120px; scroll-snap-align: start; }
.mg-rail a { display: block; text-decoration: none !important; font-size: var(--t-xs); line-height: 1.3; }
.mg-rail img { width: 120px; height: 156px; object-fit: cover; border-radius: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.18); display: block; margin-bottom: .4rem; }
.mg-cta { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); background: var(--brand); color: #fff; border-radius: var(--radius-lg); padding: var(--s-6); margin-bottom: var(--s-7); }
.mg-cta h2 { color: #fff; margin: 0 0 .3rem; } .mg-cta p { margin: 0; color: #dfe5f7; }
.mg-cta .button.cta { background: #fff; color: var(--brand); border-color: #fff; }

/* ---- B. Catalogue: a shelf of covers, library style ---- */
.ct-top { display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); padding: 40px 0 var(--s-4); flex-wrap: wrap; }
.ct-title h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin: 0 0 .2rem; } .ct-title p { margin: 0; color: var(--muted); }
.ct-search { display: flex; gap: .5rem; flex: 1; min-width: 280px; max-width: 520px; }
.ct-search input { flex: 1; padding: .8rem 1rem; border: 1px solid var(--rule-strong); border-radius: 8px; font: inherit; min-width: 0; }
.ct-search button { background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: 0 1.3rem; font-weight: 700; cursor: pointer; }
.ct-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--rule-strong); margin-bottom: var(--s-6); }
.ct-tabs a { padding: .7rem 1rem; white-space: nowrap; text-decoration: none !important; color: var(--muted); border-bottom: 3px solid transparent; font-weight: 600; font-size: var(--t-sm); }
.ct-tabs a.on, .ct-tabs a:hover { color: var(--brand); border-bottom-color: var(--accent-bright); }
.ct-shelf ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s-6) var(--s-5); }
.ct-shelf li a { display: block; text-decoration: none !important; }
.ct-shelf img { width: 100%; max-width: 150px; height: 195px; object-fit: cover; border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.22); display: block; margin-bottom: .6rem; transition: transform .2s; }
.ct-shelf li a:hover img { transform: translateY(-4px); }
.ct-shelf b { display: block; font-family: var(--serif); font-size: var(--t-sm); line-height: 1.3; color: var(--ink); }
.ct-shelf small { color: var(--faint); font-size: var(--t-xs); }
.ct-more { text-align: center; margin: var(--s-6) 0; }
.ct-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-bottom: var(--s-7); }
.ct-band > div { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--accent-bright); border-radius: var(--radius-lg); padding: var(--s-6); }
.ct-band h2 { margin: 0 0 .3rem; } .ct-band p { color: var(--muted); }

/* ---- C. Directory: subject sidebar + compact lists (database portal) ---- */
.dr-strip { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; padding: 28px 0 var(--s-4); border-bottom: 1px solid var(--rule-strong); margin-bottom: var(--s-5); }
.dr-strip h1 { margin: 0; font-size: var(--t-xl); }
.dr-strip ul { list-style: none; display: flex; gap: var(--s-5); margin: 0 auto 0 0; padding: 0; color: var(--muted); font-size: var(--t-sm); }
.dr-strip b { color: var(--brand); font-family: var(--serif); font-size: var(--t-lg); }
.dr-strip form { display: flex; gap: .4rem; flex: 0 1 380px; }
.dr-strip input { flex: 1; padding: .6rem .9rem; border: 1px solid var(--rule-strong); border-radius: 6px; font: inherit; min-width: 0; }
.dr-strip button { background: var(--brand); color: #fff; border: 0; border-radius: 6px; padding: 0 1rem; font-weight: 700; cursor: pointer; }
.dr-body { display: grid; grid-template-columns: 250px 1fr; gap: var(--s-6); align-items: start; margin-bottom: var(--s-7); }
.dr-nav { position: sticky; top: 1rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-4); max-height: calc(100vh - 2rem); overflow: auto; }
.dr-nav h2 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin: 0 0 var(--s-2); }
.dr-nav ul { list-style: none; margin: 0; padding: 0; }
.dr-nav a { display: flex; justify-content: space-between; padding: .4rem .5rem; border-radius: 6px; text-decoration: none !important; font-size: var(--t-sm); }
.dr-nav a:hover { background: var(--brand-tint); } .dr-nav span { color: var(--faint); }
.dr-recent, .dr-domain { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-5); margin-bottom: var(--s-4); }
.dr-recent h2 { margin: 0 0 var(--s-3); font-size: var(--t-lg); }
.dr-recent ul { list-style: none; margin: 0; padding: 0; }
.dr-recent li { padding: .55rem 0; border-top: 1px solid var(--rule); display: grid; gap: .1rem; }
.dr-recent li:first-child { border: 0; } .dr-recent span { color: var(--faint); font-size: var(--t-xs); }
.dr-dhead { border-bottom: 2px solid var(--accent-bright); padding-bottom: .5rem; margin-bottom: var(--s-3); } .dr-dhead span { color: var(--faint); font-size: var(--t-sm); }
.dr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem var(--s-5); }
.dr-list a { display: flex; align-items: center; gap: .7rem; text-decoration: none !important; padding: .3rem; border-radius: 6px; }
.dr-list a:hover { background: var(--brand-tint); }
.dr-list img { width: 44px; height: 58px; object-fit: cover; border-radius: 2px; flex: none; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.dr-list i { width: 44px; height: 58px; background: var(--bg-sink); border-radius: 2px; flex: none; }
.dr-list span { font-size: var(--t-sm); line-height: 1.3; font-weight: 600; }
.dr-more { margin: var(--s-3) 0 0; font-size: var(--t-sm); }
@media (max-width: 860px) {
  .mg-grid, .mg-lead, .ct-band, .dr-body, .dr-list { grid-template-columns: 1fr; }
  .mg-side { border-left: 0; padding-left: 0; }
  .mg-cta { flex-direction: column; align-items: flex-start; }
  .dr-nav { position: static; max-height: none; }
  .mg-lead { justify-items: start; }
}

/* ---- Home (chosen 28 Oct 2026): Directory's structure with Catalogue's cover cards ---- */
main:has(.hm-strip) { background: transparent; box-shadow: none; border: 0; padding: 0; }
.hm-strip { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; padding: 30px 0 var(--s-4); border-bottom: 1px solid var(--rule-strong); margin-bottom: var(--s-5); }
.hm-id { margin-right: auto; }
.hm-id h1 { margin: 0; font-size: var(--t-2xl); line-height: 1.1; }
.hm-sub { margin: .25rem 0 0; color: var(--muted); font-size: var(--t-sm); }
.hm-search { display: flex; gap: .4rem; flex: 0 1 360px; }
.hm-search input { flex: 1; padding: .7rem .95rem; border: 1px solid var(--rule-strong); border-radius: 8px; font: inherit; min-width: 0; background: #fff; }
.hm-search button { background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: 0 1.1rem; font-weight: 700; cursor: pointer; }
.hm-cta { display: flex; gap: .5rem; margin: 0; }
.hm-body { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-6); align-items: start; margin-bottom: var(--s-7); }
.hm-nav { position: sticky; top: 1rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-4); max-height: calc(100vh - 2rem); overflow: auto; }
.hm-nav h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin: 0 0 var(--s-2); font-family: var(--sans); }
.hm-nav ul { list-style: none; margin: 0; padding: 0; }
.hm-nav li a { display: flex; justify-content: space-between; gap: .5rem; padding: .42rem .55rem; border-radius: 6px; text-decoration: none !important; font-size: var(--t-sm); line-height: 1.3; }
.hm-nav li a:hover { background: var(--brand-tint); } .hm-nav li span { color: var(--faint); }
.hm-navlinks { display: grid; gap: .25rem; margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--rule); font-size: var(--t-sm); }
.hm-recent, .hm-domain, .hm-band > div { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-5); margin-bottom: var(--s-4); }
.hm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px solid var(--accent-bright); padding-bottom: .5rem; margin-bottom: var(--s-4); }
.hm-head h2 { margin: 0; font-size: var(--t-lg); } .hm-head h2 a { text-decoration: none !important; }
.hm-head span { color: var(--faint); font-size: var(--t-sm); }
.hm-recent ul { list-style: none; margin: 0; padding: 0; }
.hm-recent li { padding: .6rem 0; border-top: 1px solid var(--rule); display: grid; gap: .1rem; }
.hm-recent li:first-child { border: 0; padding-top: 0; } .hm-recent li span { color: var(--faint); font-size: var(--t-xs); }
.hm-shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: var(--s-5) var(--s-4); }
.hm-shelf a { display: block; text-decoration: none !important; }
.hm-shelf img, .hm-nocover { width: 100%; max-width: 120px; height: 156px; object-fit: cover; border-radius: 3px; box-shadow: 0 5px 16px rgba(0,0,0,.22); display: block; margin-bottom: .55rem; transition: transform .2s; }
.hm-shelf a:hover img { transform: translateY(-3px); }
.hm-nocover { display: grid; place-items: center; background: var(--brand); color: #fff; font: 700 1.1rem var(--serif); letter-spacing: .04em; text-transform: uppercase; }
.hm-shelf b { display: block; font-family: var(--serif); font-size: var(--t-sm); line-height: 1.3; color: var(--ink); }
.hm-shelf small { color: var(--faint); font-size: var(--t-xs); }
.hm-morecard a { height: 156px; max-width: 120px; border: 1px dashed var(--accent-bright); border-radius: 3px; display: grid; place-content: center; text-align: center; gap: .3rem; background: var(--accent-tint); }
.hm-morecard span { font: 700 1.6rem var(--serif); color: var(--brand); } .hm-morecard b { font-family: var(--sans); font-size: var(--t-xs); }
.hm-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.hm-band > div { border-top: 3px solid var(--accent-bright); } .hm-band h2 { margin: 0 0 .3rem; } .hm-band p { color: var(--muted); }
@media (max-width: 860px) {
  .hm-body, .hm-band { grid-template-columns: 1fr; }
  .hm-nav { position: static; max-height: none; }
  .hm-nav ul { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; }
  .hm-nav li a { white-space: nowrap; border: 1px solid var(--rule-strong); border-radius: 999px; }
  .hm-strip { gap: var(--s-3); } .hm-search { flex-basis: 100%; }
}

/* Phone: the home search was 359px wide in a 328px strip. */
.hm-search { min-width: 0; max-width: 100%; box-sizing: border-box; }
.hm-search input { width: 0; }