/* BanglaFineType — main stylesheet

   Core geometry:
   - page canvas: 72rem maximum
   - editorial text measure: 46rem
   - section-title zone: 20rem
   - title/content overlap: 4rem
   - editorial content axis: 16rem from the page-left axis

   Typography:
   - Source Serif 4: Latin body/editorial text
   - Source Sans 3: headings, navigation, and utility links
   - Noto Serif Bengali / Noto Sans Bengali: Bangla text
*/

:root {
  --font-body-latin: "Source Serif 4", serif;
  --font-heading-latin: "Source Sans 3", sans-serif;

  --font-body-bangla: "Noto Serif Bengali", serif;
  --font-heading-bangla: "Noto Sans Bengali", sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-footer: 8rem;

  --page-width: 72rem;
  --text-width: 46rem;

  --title-width: 20rem;
  --title-overlap: 4rem;
}


/* Page foundation */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family: var(--font-body-latin);
  font-size: 18px;
  line-height: 1.5;
}

header,
main,
footer {
  width: min(100% - 4rem, var(--page-width));
  margin-inline: auto;
}


/* Vertical rhythm */

section {
  margin-top: var(--space-2xl);
  margin-bottom: 0;
}

section > :last-child,
.section-content > :last-child {
  margin-bottom: 0;
}

h1,
h2,
h3,
p,
ol,
ul {
  margin-top: 0;
}

h1 {
  margin-bottom: var(--space-sm);
}

h2 {
  margin-bottom: var(--space-md);
}

h3 {
  margin-bottom: var(--space-xs);
}

p {
  max-width: var(--text-width);
  margin-bottom: var(--space-md);
}

ol,
ul {
  margin-bottom: var(--space-md);
}

li + li {
  margin-top: 0.25rem;
}


/* Typography */

h1,
h2,
h3,
nav,
.skip-link {
  font-family: var(--font-heading-latin);
}

h1 {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 600;
}

h2 {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
}

h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 600;
}

nav {
  font-size: 1rem;
  line-height: 1.4;
}

p,
li {
  hyphens: auto;
  overflow-wrap: normal;
}

strong {
  font-weight: 600;
}

[lang="bn"] {
  font-family: var(--font-body-bangla);
  line-height: 1.8;
}

h1[lang="bn"],
h2[lang="bn"],
h3[lang="bn"],
nav [lang="bn"] {
  font-family: var(--font-heading-bangla);
}


/* Header and primary navigation */

header {
  padding-block: var(--space-md);
}

header nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
}

header nav > a {
  font-size: 1.15rem;
  font-weight: 600;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);

  margin: 0;
  padding: 0;

  list-style: none;
}

header nav li {
  margin: 0;
}

header nav a {
  color: inherit;
  text-decoration: none;
}

header nav a:hover,
header nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* Hero

   The project name and tagline begin on the page-left axis.
   The mission and action links begin on the editorial content axis.
*/

#home > h1,
#home > .tagline {
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

#home h1 {
  margin-bottom: var(--space-xs);
}

#home > .tagline {
  margin-bottom: var(--space-md);

  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 400;
}

#home > .mission,
#home > .hero-links {
  width: min(
    100% - calc(var(--title-width) - var(--title-overlap)),
    var(--text-width)
  );

  margin-left: calc(var(--title-width) - var(--title-overlap));
  margin-right: 0;
}

#home > .mission {
  margin-bottom: var(--space-lg);

  font-size: 1.2rem;
  line-height: 1.6;
}

#home img {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-bottom: var(--space-lg);
}


/* Typographic specimen

   Specimen lines begin on the same editorial content axis used by the
   split sections below.
*/

section[aria-labelledby="specimen-title"] > p {
  width: min(100%, var(--text-width));
  margin-left: 0;
  margin-right: 0;
  padding-left: calc(var(--title-width) - var(--title-overlap));
}


/* Principal text column */

section > p,
section > ol,
section > ul {
  width: min(100%, var(--text-width));
  margin-left: auto;
  margin-right: auto;
}


/* Major editorial sections

   Section titles begin on the page-left axis. Section content starts on the
   following row, 16rem from that axis with the current title/overlap values.
*/

.split-section {
  display: grid;
  grid-template-columns:
    calc(var(--title-width) - var(--title-overlap))
    var(--title-overlap)
    minmax(0, var(--text-width));

  align-items: start;
}

.split-section > h2 {
  grid-column: 1 / 3;
  grid-row: 1;

  width: 100%;
  margin: 0;

  text-align: left;
}

.split-section > .section-content {
  grid-column: 2 / 4;
  grid-row: 2;

  min-width: 0;
  margin-top: var(--space-md);
}

.section-content > p,
.section-content > ol,
.section-content > ul {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.section-intro {
  font-style: italic;
  font-weight: 500;
}


/* Repeated content within editorial sections */

#pillars .section-content > div,
#projects .section-content > div,
#design-notes .section-content > div {
  width: 100%;
  margin: 0;
  padding: 0;
}

#pillars article,
#projects article,
#design-notes article {
  width: 100%;
  max-width: var(--text-width);
  margin-left: 0;
  margin-right: 0;
}

#pillars article + article,
#projects article + article,
#design-notes article + article {
  margin-top: var(--space-lg);
}

#pillars article h3,
#projects article h3,
#design-notes article h3 {
  margin-bottom: 0.35rem;
}

#pillars article p,
#projects article p,
#design-notes article p {
  margin-bottom: var(--space-sm);
}

/* The last pillar is also the end of its section. */

#pillars .section-content > div > article:last-child > :last-child {
  margin-bottom: 0;
}

/* Project status lines are secondary metadata. */

#projects article p:first-of-type {
  font-family: var(--font-heading-latin);
  font-size: 0.9rem;
  line-height: 1.4;
}


/* Roadmap

   Labels and descriptions occupy aligned columns. Bullets hang independently
   so they do not disturb the text baselines.
*/

#roadmap ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

#roadmap li {
  position: relative;

  display: grid;
  grid-template-columns:
    11rem
    minmax(0, 1fr);

  column-gap: 0.75rem;
  align-items: baseline;

  padding-left: 1rem;
}

#roadmap li::before {
  content: "";

  position: absolute;
  left: 0.15rem;
  top: 0.66em;

  width: 0.33rem;
  height: 0.33rem;

  border-radius: 50%;
  background: currentColor;
}

#roadmap li span {
  grid-column: 2;
}


/* Action and utility links */

.hero-links,
.action-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);

  font-family: var(--font-heading-latin);
  font-size: 1rem;
}

.action-link,
.hero-links a,
.action-links a,
.footer-links a {
  font-family: var(--font-heading-latin);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
}

.action-link:hover,
.action-link:focus-visible,
.hero-links a:hover,
.hero-links a:focus-visible,
.action-links a:hover,
.action-links a:focus-visible,
.footer-links a:hover,
.footer-links a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* Footer */

footer {
  margin-top: var(--space-footer);
  padding-left: calc(var(--title-width) - var(--title-overlap));
  padding-bottom: var(--space-md);

  font-family: var(--font-heading-latin);
  font-size: 1rem;
}

footer .copyright {
  margin-bottom: var(--space-xs);
  font-size: inherit;
  font-weight: 400;
}

.footer-links {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-md);

  font-family: var(--font-heading-latin);
  font-weight: 400;
}


/* Accessibility */

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: var(--space-sm);
  z-index: 100;

  padding: var(--space-xs) var(--space-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}


/* Narrow screens */

@media (max-width: 60rem) {
  .split-section {
    display: block;
    width: min(100%, var(--text-width));
    margin-left: auto;
    margin-right: auto;
  }

  .split-section > h2 {
    width: auto;
    margin-bottom: var(--space-md);
  }

  .split-section > .section-content {
    margin-top: 0;
  }

  #home > .mission,
  #home > .hero-links {
    width: min(100%, var(--text-width));
    margin-left: 0;
  }

  section[aria-labelledby="specimen-title"] > p {
    padding-left: 0;
  }

  footer {
    padding-left: 0;
  }
}

/* Paper surfaces
   --------------------------------------------------------------------------
   The page uses two related paper textures:

   - The body carries a cool, neutral newsprint texture across the full
     browser width.
   - The main content area sits on a warmer, smoother book-paper texture.

   The subtle edge and shadow around main separate the book-paper sheet from
   the surrounding newsprint without making the content area look like a
   conventional web card.
*/

body {
  background-color: rgb(245, 245, 243);
  background-image:
    url("assets/images/textures/newsprint/bft-newsprint-texture.png");
  background-repeat: repeat;
}

main {
  background-color: rgb(249, 248, 244);
  background-image:
    url("assets/images/textures/book-paper/bft-book-paper-texture.png");
  background-repeat: repeat;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.025),
    0 0.2rem 1rem rgba(0, 0, 0, 0.055);

  padding-inline: 3rem;
}

/* Hero logo alignment
   --------------------------------------------------------------------------
   The transparent logo image includes a small amount of empty space along
   its left edge. Shift the image slightly left so the visible artwork aligns
   with the main page-content axis rather than with the image canvas itself.
*/

#home img {
  margin-left: -0.95rem;
}