/* Public archive foundations. Admin and installer use independent stylesheets. */
@font-face {
  font-family:Archive Bengali;
  src:url('../fonts/noto-sans-bengali-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
  unicode-range:U+0980-09FF,U+200C-200D,U+25CC
}
@font-face {
  font-family:Archive Bengali;
  src:url('../fonts/noto-sans-bengali-600.woff2') format('woff2');
  font-weight:600 900;
  font-display:swap;
  unicode-range:U+0980-09FF,U+200C-200D,U+25CC
}
@font-face {
  font-family:Archive Bengali Serif;
  src:url('../fonts/noto-serif-bengali-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
  unicode-range:U+0980-09FF,U+200C-200D,U+25CC
}
:root {
  --color-midnight:#08111f;
  --color-navy:#0d1b2a;
  --color-slate:#142234;
  --color-charcoal:#171a1f;
  --color-gold:#c5a253;
  --color-gold-muted:#a8873e;
  --color-gold-light:#d5b76a;
  --color-gold-dark:#79612d;
  --color-ivory:#f8f5ee;
  --color-parchment:#eee8db;
  --color-white:#fcfbf7;
  --color-text:#202b36;
  --color-muted:#62645f;
  --color-line:#d8d1c3;
  --color-on-dark:#f8f5ee;
  --color-muted-dark:#bec5cc;
  --surface-page:var(--color-ivory);
  --surface-panel:var(--color-white);
  --surface-dark:var(--color-navy);
  --border-gold:1px solid #a8873e;
  --border-subtle:1px solid var(--color-line);
  --font-body:Archive Bengali,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:Georgia,'Times New Roman',serif;
  --font-bengali-display:Archive Bengali Serif,Georgia,serif;
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:3rem;
  --space-6:4.5rem;
  --space-7:6.5rem;
  --container:1160px;
  --reading:760px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --section-space:clamp(3.5rem,7vw,6.5rem);
  --radius:2px;
  --shadow-elevated:0 16px 48px #08111f12;
  --transition:180ms ease;
  --header-height:96px;
}
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:7rem
}
body {
  margin:0;
  background:var(--surface-page);
  color:var(--color-text);
  font-family:var(--font-body);
  line-height:1.75;
  -webkit-font-smoothing:antialiased
}
main {
  min-height:50vh
}
img,svg,video {
  max-width:100%;
  height:auto
}
a {
  color:var(--color-gold-dark);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color var(--transition),background var(--transition),border-color var(--transition)
}
a:hover {
  color:var(--color-text)
}
button,input,select,textarea {
  font:inherit
}
button,summary {
  cursor:pointer
}
input,select,textarea {
  min-width:0;
  max-width:100%
}
h1,h2,h3,h4 {
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.2;
  color:var(--color-midnight);
  margin:0 0 1rem
}
h1 {
  font-size:clamp(2.5rem,5.4vw,4.75rem);
  letter-spacing:-.035em;
  text-wrap:balance
}
h2 {
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  letter-spacing:-.025em
}
h3 {
  font-size:clamp(1.4rem,2vw,1.9rem)
}
:lang(bn) h1,:lang(bn) h2,:lang(bn) h3,:lang(bn) h4 {
  font-family:var(--font-bengali-display);
  letter-spacing:0;
  line-height:1.5
}
:lang(bn) {
  line-height:1.9
}
p {
  margin:0 0 1.25rem
}
strong {
  font-weight:600
}
small {
  font-size:.84rem
}
::selection {
  background:var(--color-gold);
  color:var(--color-midnight)
}
:focus-visible {
  outline:3px solid var(--color-gold-dark);
  outline-offset:5px
}
.dark :focus-visible,.site-header :focus-visible,.site-footer :focus-visible {
  outline-color:var(--color-gold-light)
}
[id] {
  scroll-margin-top:7rem
}
.container {
  width:min(100% - var(--gutter)*2,var(--container));
  margin-inline:auto
}
.reading-width {
  max-width:var(--reading)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  top:.5rem;
  left:.5rem;
  z-index:100;
  background:var(--color-white);
  padding:.7rem 1.2rem;
  transform:translateY(-160%)
}
.skip-link:focus {
  transform:translateY(0)
}
.dark {
  background:var(--surface-dark);
  color:var(--color-on-dark)
}
.dark h1,.dark h2,.dark h3 {
  color:var(--color-on-dark)
}
.dark a {
  color:var(--color-gold-light)
}
.dark a:hover {
  color:var(--color-white)
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto;
    transition:none;
    animation:none
  }
}
@media(max-width:600px) {
  :root {
    --header-height:80px
  }
  h1 {
    font-size:clamp(2.15rem,9vw,3.25rem)
  }
}