html {
  font-size: 13px;
}

:root {
  /* Base font scale (mobile first) */
  --font-base: 1rem;        /* 13px */
  --font-sm: 0.875rem;      /* 11.4px */
  --font-md: 1rem;          /* 13px */
  --font-lg: 1.5rem;        /* 19.5px */
  --font-xl: 2rem;          /* 26px */

   /* Font weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700; 

  /* Line height */
  --line-tight: 1.2;
  --line-normal: 1.6;

/* Highlight Color */
--highlight-color: #9f1515;


}


body {
  font-family: 'Inter Tight', 'Inter', 'Work Sans', 'IBM Plex Sans', 'Rubik', sans-serif;
  background-color: #fafafa;
  text-align: center;
  padding-top: 50px;
  margin: 0px;
  padding:.25rem;
  font-size: var(--font-base);
}

h1, h2, h3, p, section {
  margin-top: 0;         /* prevent double spacing */
  margin-bottom: 1rem;   /* consistent vertical rhythm */
}

a {
  color: #000;
  text-decoration: none; /* optional */
}

a:hover {
  text-decoration: underline;
}

a:active {
  opacity: 0.7;
}


h2 {
  margin-bottom: 1rem;
  font-size: var(--font-xl);
  font-weight: var(--weight-semibold);
}
h3 {
  font-size: var(--font-lg);
}

p {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}



/* Header Section*/
/* header {
  display: grid;
  grid-template-columns: 2fr 1fr;  
  grid-template-rows: auto auto;   
  gap: 1rem 2rem;                  
  align-items: center;
}


.main-title-section {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.sayuh-title {
  width: min(50vw, 700px);
  height: auto;
}

.main-scroll-down {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: start;
}

.header-nav-quote {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: auto auto; 
  align-items: start;
  gap: 2rem;
}

.main-quote-container {
    justify-self: start;
    
} 

.main-quote-text {
    margin: 0px;
}

.nav-menu {
  display: flex;          
  gap: 2rem;              
  list-style: none;       
  padding: 0;             
  margin: 0px;          
}   


.header-blank {
  grid-column: 2;
  grid-row: 2;
} 
*/

/* Header */
header {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 1rem;
  padding: .5rem;
}

.main-title-section {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;  /* center the SVG horizontally */
  text-align: center;
}
  .sayuh-title {
  width: min(50vw, 700px);
  height: auto;
  }

.main-scroll-down {   
  justify-self: start;      
}


.header-nav-quote {
  grid-column: 1;
  grid-row: 2/3;
  justify-items: start;
}


.nav {
  grid-row: 3;
  justify-content: flex-start;
}
.nav-menu {
  list-style: none;
  padding-left: 0px;
  justify-items: start;
  margin-bottom: 0px;
}

/* Main Section */
main {
  display: grid;
  grid-template-columns: 1fr;  /* single column all the way down */
  gap: 1rem;                  /* optional spacing */
  align-items: center;
  padding: .5rem;
  
  text-align: start;
  
}

main p {
  text-indent: .75rem;
  margin-top: var(--font-lg);
  border-bottom: 1px solid rgb(226, 226, 232);
  padding-bottom: var(--font-lg);
  line-height: var(--line-normal);
}


.welcome-title {
 
 background-color: #f0f0fd; /* soft pastel or accent */
}

.welcome-desctiption-text {
  margin-top: 0px;
}

/* Webm Section */
.gif-loop {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}


/* Footer Section */
.footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;                  /* optional spacing */
    align-items: center;
    padding: .5rem;
   
}
.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}
.network-section {
    grid-column: 1;
    grid-row: 1;
}
.bookshelf-section {
    grid-column: 2;
}

.bookshelf-title,
.network-title {
  margin-bottom: 0.5em;
  background-color: #f0f0fd; /* soft pastel or accent */
  
}

.footer-anchors {
  margin-top: 0px;
}

a.social-links {
  display: block;
  margin-bottom: .5em;
}

.scroll-top {
    justify-self: start;
}

@media (min-width: 768px) {
  /* desktop / laptop styles go here */

  :root {
  --font-base: 1rem;        /* 13px */
  --font-sm: 1rem;      /* 11.4px */
  --font-md: 1.25rem;          /* 13px */
  --font-lg: 2rem;        /* 19.5px */
  --font-xl: 3rem; 
}
.page-container {
  margin: 0 auto;
  width: 90%;           /* 90% of viewport width */
  max-width: 94vw;      /* stops it if needed but still dynamic */
  box-sizing: border-box;
}


main {
  max-width: 100%;
}

img {
  max-width:  100%;
}

p {
  max-width: 1080px;
}

p.footer-anchors {
  max-width: 100%;
}
  header {
  max-width: 90%;
  display: grid;
  grid-template-columns: 2fr;  
  grid-template-rows: auto auto;   
  gap: 1rem 2rem;                  

}


.main-scroll-down {
  justify-self: self-start;
  /* justify-self: end; */
  align-self: end;
}

.main-content {
  width: 100%;
}

.main-content .main-description {
  max-width: 50%;

}

.header-nav-quote {
  max-width: 90%;
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: auto auto; 
  align-items: start; 
 
}

.welcome-title {
  text-align: center;
}
.welcome-text {
  text-align: center;
}

.nav {
  grid-column: 2;
  grid-row: 1;
  align-items: start;
}

.nav-menu {
  display: flex;
  margin-top: 0px;
}
.nav-link {
  margin-left: 5px;
}

.footer {
  max-width: 100%;
}
.footer-content{
  grid-template-columns: 1fr;
}

.bookshelf-section {
  grid-column: 1;
  justify-self: start;
  width: 100%;
}

.network-section {
  justify-self: start;
  width: 100%;
}
.gif-section {
  
max-width: 100%;
height: auto;
display: block;


}

}