/* 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; }
/* Mobile: keep the whole header inside the viewport. The wordmark plus the language
   toggle and the menu button were wider than a phone screen, pushing the menu off
   the right edge in LTR. Shrink the wordmark a touch and tighten the toggle. */
@media (max-width: 30rem) {
  .portal-publishing .brand-abbr { font-size: 1.04rem; }
  .portal-publishing .header-bar { gap: .5rem; }
  .portal-publishing .lang-toggle { padding-inline: .6rem; font-size: .72rem; margin-inline-end: .25rem; }
}
.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;
}

/* 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) {
  .site-header .brand { min-inline-size: 0; }
  .site-header .brand-name { min-inline-size: 0; }
  .site-header .brand-abbr { font-size: 1.06rem; 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; }