/* Publishing portal additions on top of the shared style.css.
   Division accent: publishing red (#9E100F). Bilingual: RTL typography below. */
.portal-publishing {
  --division-accent: var(--div-publishing);
  /* Owner-requested per-portal page tint (2026-06-17): a calm, light rose wash
     so a visitor feels at once they are in the press, not the main site. We
     remap the page canvas and the two light-tint tokens to the warm family in
     one place, so every soft surface stays coherent. White card surfaces and
     the navy/red brand tokens are untouched. Deliberate, documented exception
     to the "only --division-accent per portal" rule in DESIGN_GUIDE 18.2. */
  --color-bg: #FAF3F2;
  --blue-050: #F6E9E8;
  --blue-100: #ECD5D2;
}

/* Division accent touches: a clearer publishing identity than the hub (red top
   rule, red division label, red breadcrumb links) so a visitor immediately sees
   this is the press and not the main institute site. */
/* Header gets a soft rose wash so the press reads as its own section at a glance,
   distinct from the hub's plain white header. Navy text stays fully legible. */
.portal-publishing .site-header {
  background: linear-gradient(180deg, rgba(246, 233, 232, .97), rgba(250, 243, 242, .9));
  border-block-end-color: var(--blue-100);
}
/* The footer brand may wrap on a narrow column instead of overflowing the next one. */
.portal-publishing .footer-brand .brand-abbr { white-space: normal; font-size: 1.12rem; }
.portal-publishing .site-header::before {
  block-size: 3px;
  background: linear-gradient(to right, var(--div-publishing) 0 40%, var(--brand) 40% 100%);
}
.portal-publishing .kicker { color: var(--div-publishing); }

/* Brand second line in the HEADER ONLY: a red division label (the hub shows the
   institute name here). Scoped to the header so the footer keeps its readable
   institute name and does not overlap the columns. */
.portal-publishing .site-header .brand-full {
  color: var(--div-publishing);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  max-inline-size: none;
}
/* The expanded strapline belongs to the lockup, but seven navigation links need
   the same horizontal space on medium laptops. Keep the imprint name and hide
   only the second line until the desktop has room for both. */
@media (max-width: 84rem) {
  .portal-publishing .site-header .brand-full { display: none; }
}

/* The bilingual publishing menu has seven links plus two actions. Collapse it
   on small laptops before the English labels can push the CTA off-screen. */
@media (max-width: 88rem) {
  .portal-publishing .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .portal-publishing .header-cta { display: none; }
  .portal-publishing .site-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: var(--surface);
    border-block-end: 1px solid var(--n-100);
    box-shadow: var(--shadow-2);
    display: none;
  }
  .portal-publishing .site-nav.open { display: block; }
  .portal-publishing .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 0;
  }
  .portal-publishing .site-nav a {
    display: block;
    padding: .85rem clamp(1rem, 4vw, 2.5rem);
    font-size: 1.05rem;
    white-space: normal;
  }
  .portal-publishing .site-nav a::after { display: none; }
  .portal-publishing .site-nav li + li { border-block-start: 1px solid var(--n-100); }
}

/* Header CTA: refined, single line, with an arrow. */
.portal-publishing .header-cta {
  white-space: nowrap;
  padding: .55rem 1.1rem;
  font-size: .9rem;
  box-shadow: 0 2px 10px rgba(36, 47, 95, .16);
}

/* Page head: a distinct tinted band, with the cartographic art contained (no
   full-width bleed) and a faint red wash at the registration corner. */
.portal-publishing .page-head {
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(158, 16, 15, .05), transparent 46%),
    linear-gradient(118deg, var(--blue-050) 0%, var(--surface) 55%, var(--blue-050) 100%);
  border-block-end: 1px solid var(--blue-100);
}
.portal-publishing .page-head::after {
  inline-size: min(34%, 430px);
  opacity: .5;
}

/* Breadcrumbs: larger and clearer, with red links. */
.portal-publishing .breadcrumbs { font-size: .82rem; font-weight: 600; color: var(--n-700); }
.portal-publishing .breadcrumbs a { color: var(--div-publishing); }
.portal-publishing .breadcrumbs a:hover { color: var(--red-800); }

.portal-head { position: relative; overflow: hidden; }

/* Language toggle in the header */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--brand);
  border: 1px solid var(--n-300);
  border-radius: 99px;
  padding: .3rem .85rem;
  margin-inline-end: .6rem;
  min-block-size: 34px;
}
.lang-toggle:hover { border-color: var(--div-publishing); color: var(--div-publishing); }

/* Category chip + open-access badge on cards and book heads */
.cat-chip {
  display: inline-block;
  border: 1px solid var(--div-publishing);
  color: var(--div-publishing);
  border-radius: 99px;
  padding: .05rem .6rem;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-inline-end: .5rem;
}
.oa-badge {
  display: inline-block;
  border-radius: 99px;
  padding: .05rem .6rem;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ok);
  background: rgba(30, 122, 82, .08);
  border: 1px solid rgba(30, 122, 82, .35);
}
.book-byline { font-size: .85rem; color: var(--n-700); margin-block-start: auto; }
.book-byline-lg { color: var(--n-700); margin-block: .2rem; }

/* Hero actions */
.pub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

/* Slightly more compact home hero. */
.pub-hero { padding-block: clamp(1.8rem, 4.5vw, 2.8rem); }
.pub-hero h1 { font-size: var(--fs-800); }
.pub-hero .lede { font-size: var(--fs-400); }

/* Home banner: a headingless band of rotating lines on attractive gradients. */
.pub-banner-wrap { padding-block-start: var(--space-5); }
.pub-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-block-size: 9rem;
  box-shadow: var(--shadow-2);
}
.pub-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5) var(--space-6);
  opacity: 0;
  transform: translateX(2.5%);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}
.pub-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.pub-banner-text {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, .9rem + .9vw, 1.45rem);
  line-height: 1.5;
  max-inline-size: 52rem;
  text-wrap: balance;
}
.pub-slide-0 { background: linear-gradient(120deg, var(--blue-900), var(--blue-600)); }
.pub-slide-1 { background: linear-gradient(120deg, var(--brand), var(--blue-500)); }
.pub-slide-2 { background: linear-gradient(120deg, var(--red-900), var(--blue-800)); }
.pub-slide-3 { background: linear-gradient(120deg, var(--blue-800), #3a2a5c); }
.pub-dots {
  position: absolute;
  inset-block-end: .7rem;
  inset-inline: 0;
  display: flex;
  gap: .45rem;
  justify-content: center;
  z-index: 2;
}
.pub-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.pub-dot:hover { background: rgba(255, 255, 255, .7); }
.pub-dot.current { background: #fff; transform: scale(1.25); }
@media (max-width: 36rem) {
  .pub-banner { min-block-size: 11rem; }
  .pub-slide { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .pub-slide { transition: opacity .25s ease; transform: none; }
}

/* Launch countdown + private-access unlock (Books page before launch). */
.pub-countdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-block: var(--space-4) var(--space-3);
}
.cd-unit {
  min-inline-size: 5rem;
  padding: var(--space-3) var(--space-2);
  background: linear-gradient(135deg, var(--blue-900), var(--blue-600));
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.cd-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-label {
  display: block;
  margin-block-start: .35rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .72);
}
.pub-launch-date { font-family: var(--font-mono); color: var(--n-700); margin-block-start: 0; }
.pub-unlock {
  max-inline-size: 24rem;
  margin: var(--space-6) auto 0;
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
}
.pub-unlock-row { display: flex; gap: .5rem; margin-block-start: .4rem; }
.pub-unlock-row input {
  flex: 1;
  min-inline-size: 0;
  padding: .6rem .8rem;
  border: 1px solid var(--n-300);
  border-radius: var(--radius);
  font: inherit;
  background: var(--surface);
}
.pub-unlock-row input:focus { outline: var(--focus-ring); border-color: var(--brand); }

/* Section tint: a touch deeper than the page canvas so bands still read. */
.section-tint { background: #F3E5E3; }

/* "What we do" value cards */
.pub-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--n-100);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
}
.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 12px;
  color: var(--div-publishing);
  background: var(--red-050);
  border: 1px solid var(--red-100);
  margin-block-end: var(--space-3);
}
.value-card h3 { font-size: var(--fs-500); margin-block-end: .35rem; }
.value-card p { color: var(--n-700); margin: 0; font-size: .95rem; }

/* Book detail page */
.book-hero {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.book-cover {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--blue-100);
  background: var(--blue-050);
  box-shadow: var(--shadow-2);
}
.book-cover img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}
.book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  align-items: center;
}

/* Details list */
.detail-list {
  display: grid;
  gap: 0;
  margin: 0;
  max-inline-size: 56rem;
}
.detail-list > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: .55rem;
  border-block-end: 1px solid var(--n-100);
}
.detail-list dt { font-weight: 600; color: var(--n-700); margin: 0; }
.detail-list dd { margin: 0; word-break: break-word; }

/* Policy index cards */
.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.policy-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--n-100);
  border-inline-start: 3px solid var(--div-publishing);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.policy-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--ink); }
.policy-card h2 { font-size: var(--fs-500); margin-block-end: .35rem; }
.policy-card p { color: var(--n-700); font-size: .92rem; margin-block: 0 var(--space-3); }
.policy-more {
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--div-publishing);
  font-weight: 600;
  font-size: .85rem;
}

/* Type filter row (catalog) */
.type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border-block-end: 1px solid var(--n-100);
  padding-block-end: var(--space-3);
}
.type-filter a {
  text-decoration: none;
  font-weight: 500;
  font-size: .9rem;
  color: var(--n-700);
  border: 1px solid var(--n-300);
  border-radius: 99px;
  padding: .35rem 1rem;
  min-block-size: 24px;
}
.type-filter a:hover { border-color: var(--div-publishing); color: var(--div-publishing); }
.type-filter a.current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Note card (home + submit aside) */
.card-note {
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* Citation box (APA / MLA / Chicago / Harvard) */
.cite-box {
  max-inline-size: 56rem;
  margin-inline: auto;
  margin-block-start: var(--space-5);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.cite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: .8rem;
}
.cite-copy { padding: .4rem .9rem; font-size: .85rem; background: var(--surface); }
.cite-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-end: .8rem; }
.cite-tabs button {
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .3rem .8rem;
  border: 1px solid var(--n-300);
  border-radius: 99px;
  background: var(--surface);
  color: var(--n-700);
  cursor: pointer;
  min-block-size: 28px;
}
.cite-tabs button:hover { border-color: var(--brand); color: var(--brand); }
.cite-tabs button[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.cite-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.7;
  background: var(--surface);
  border: 1px solid var(--n-100);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  word-break: break-word;
}

/* -------- Responsive -------- */
@media (max-width: 60rem) {
  .pub-values { grid-template-columns: 1fr 1fr; }
  .policy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .pub-values { grid-template-columns: 1fr; }
  .book-hero { grid-template-columns: 1fr; }
  .book-cover { max-inline-size: 240px; }
  .detail-list > div { grid-template-columns: 1fr; gap: .1rem; }
}
/* Footer columns: 3 on desktop, 2 on tablet, 1 on phones. The narrowest rule must
   come LAST so it wins the cascade (a phone is below both breakpoints). */
.footer-writers { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
@media (max-width: 60rem) {
  .footer-writers { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
@media (max-width: 36rem) {
  .footer-writers { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* Mobile header: the portals add a language toggle next to the menu button. Keep
   the toggle compact in the hamburger zone, and on phones let the brand shrink so
   the menu button is never pushed off a narrow screen. */
@media (max-width: 72rem) {
  .lang-toggle { margin-inline-end: .3rem; padding: .28rem .62rem; font-size: .74rem; min-block-size: 38px; }
}
@media (max-width: 30rem) {
  .portal-publishing .header-bar { gap: .5rem; }
  .site-header .brand { min-inline-size: 0; }
  .site-header .brand-name { min-inline-size: 0; }
  .site-header .brand-abbr { font-size: 1.04rem; overflow: hidden; text-overflow: ellipsis; }
}

/* --------------------------------------------------------------------------
   Arabic / RTL typography. IBM Plex Sans Arabic (self-hosted) is the brand
   Arabic face; it also drives Arabic text on an English page (the language
   toggle) via [lang="ar"]. Arabic is cursive, so the latin letter-spacing must
   be removed wherever it is applied, or the glyphs disconnect and look broken.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

[dir="rtl"] {
  --font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, 'Noto Naskh Arabic', sans-serif;
  --font-display: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, 'Noto Naskh Arabic', serif;
  --font-mono: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, monospace;
  line-height: 1.7;
}
/* Arabic text on an otherwise English page (e.g. the language toggle). */
[lang="ar"] { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; letter-spacing: 0; }
/* Arabic is cursive: zero the latin letter-spacing or the glyphs come apart. */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .kicker, [dir="rtl"] .brand-abbr, [dir="rtl"] .brand-full,
[dir="rtl"] .breadcrumbs, [dir="rtl"] .cat-chip, [dir="rtl"] .oa-badge,
[dir="rtl"] .type-filter a, [dir="rtl"] .footer-title, [dir="rtl"] .cite-tabs button,
[dir="rtl"] .pub-banner-text, [dir="rtl"] .cd-label { letter-spacing: 0; }
/* The red division tag reads better slightly larger in Arabic, with no uppercasing
   and no letter-spacing (this selector out-specifies the header brand-full rule). */
[dir="rtl"] .site-header .brand-full { font-size: .74rem; text-transform: none; letter-spacing: 0; }
/* Mirror the header accent stripe and the page-head wash in RTL */
[dir="rtl"] .portal-publishing .site-header::before {
  background: linear-gradient(to left, var(--div-publishing) 0 40%, var(--brand) 40% 100%);
}
[dir="rtl"] .portal-publishing .page-head {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(158, 16, 15, .05), transparent 46%),
    linear-gradient(242deg, var(--blue-050) 0%, var(--surface) 55%, var(--blue-050) 100%);
}
/* Keep citations and identifiers readable left-to-right inside an RTL page */
[dir="rtl"] .cite-text,
[dir="rtl"] .detail-list dd { direction: ltr; text-align: start; }

/* --------------------------------------------------------------------------
   Author benefits check-list (home page, "What your book receives")
   -------------------------------------------------------------------------- */
.pub-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-3);
}
.pub-benefits li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  background: var(--surface);
  border: 1px solid var(--n-100);
  border-inline-start: 3px solid var(--div-publishing);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  box-shadow: var(--shadow-1);
  font-weight: 500;
}
.pub-benefits svg {
  flex-shrink: 0;
  margin-block-start: .15rem;
  color: var(--div-publishing);
}
.pub-benefits-status {
  max-inline-size: 52rem;
  margin: var(--space-4) 0 0;
  color: var(--n-700);
}

/* Forthcoming titles: editorial status is more prominent than sales metadata. */
.forthcoming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: var(--space-4);
}
.forthcoming-card {
  padding: clamp(1.15rem, 2.5vw, 1.65rem);
  background: var(--surface);
  border: 1px solid var(--n-100);
  border-block-start: 3px solid var(--div-publishing);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.forthcoming-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .55rem 1rem;
  margin-block-end: var(--space-3);
}
.status-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.85rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: rgba(158, 16, 15, .09);
  color: var(--div-publishing);
  font-size: .76rem;
  font-weight: 700;
}
.forthcoming-date {
  color: var(--n-500);
  font-size: .78rem;
}
.forthcoming-card h2 {
  margin: 0 0 .55rem;
  color: var(--brand);
  font-size: var(--fs-500);
}
.forthcoming-card > p { color: var(--n-700); }
.forthcoming-byline { margin-block: 0 var(--space-3); }
.forthcoming-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem 1rem;
  margin: var(--space-4) 0 0;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--n-100);
}
.forthcoming-meta div { min-inline-size: 0; }
.forthcoming-meta dt {
  color: var(--n-500);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.forthcoming-meta dd { margin: .15rem 0 0; color: var(--ink); }
[dir="rtl"] .forthcoming-meta dt { letter-spacing: 0; }
@media (max-width: 30rem) {
  .forthcoming-meta { grid-template-columns: 1fr; }
}

.portal-publishing .check-row {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-weight: 400;
  line-height: 1.55;
}
.portal-publishing .check-row input[type="checkbox"] {
  flex: 0 0 auto;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-block-start: .2rem;
}

/* Proposal form: two useful columns on wide screens, one readable flow on phones. */
.pub-submit-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-6);
}
@media (max-width: 52rem) {
  .pub-submit-grid { grid-template-columns: minmax(0, 1fr); }
}