@layer base;

@layer base {
/* =========================
   BASE (design system + primitives)
   ========================= */

/* Tokens (wins on overlaps) */
:root{
  --text-color: #848484;
  --text-color-400: #2f2e2e;

  --accent-color: hsl(22, 61%, 52%);
  --accent-color-100: hsl(22, 92%, 75%);

  --light-color: hsl(0, 0%, 100%);
  --bkgrd-color: hsl(0, 0%, 20%);
  --bkgrd-color-400: hsl(0, 0%, 40%);
  --bkgrd-author: hsl(4, 5%, 40%);

  --padding-base: 1rem;
  --padding-nav: .67rem;
  --padding-button: .5rem .8rem;

  --margin-base: 2rem;
  --margin-heading: 1.5rem 0 0;
  --above-main: 50px;
  --gap-base: 2rem;

  --font-size: 1.23rem;
  --heading-font: 'Raleway', sans-serif;
  --large-heading: clamp(2.75rem, 40px, 3ch);
  --body-font: 'Lato', sans-serif;
  --large-fontsize: 1.6rem;
  --small-fontsize: .8rem;

  --radius-base: 6px;
  --accent-gradient: linear-gradient(90deg, #FF86CD, #9FD6FD);
  --box-shadow: 0 0 4px 2px rgba(153, 153, 153, 0.131);

  /* Extras used by components */
  --is-white: hsl(0, 0%, 100%);
  --off-white: hsl(0, 0%, 94%);
  --accent: hsl(0, 3%, 24%);
  --accent-txt: hsl(0, 0%, 94%);
  --hero-font: "Raleway", sans-serif;
  --default-font-size: 1.3rem;
  --splashed-font-size: 1.6rem;
  --author-font-size: 0.8rem;
  --editor-font-size: 1.3rem;
  --hero-font-size: 1.5rem;
  --reference-font-size: 0.8rem;
  --accessible-font-size: 1.5rem;
  --lighter-accent: hsl(222deg 40% 97%);
  --is-dark: hsl(0, 0%, 10%);
}

/* Normalize / globals */
*{ padding:0; margin:0; box-sizing:border-box; }
html{ background: var(--off-white); }
body{
  font-family: var(--body-font);
  line-height: 1.3;
  font-size: var(--font-size);
  margin: 0; padding: 0; color: var(--text-color);
}
div{ margin:0; padding:0; box-sizing:border-box; }

/* Base container */
section{
  max-width: clamp(680px, 80vw, 900px);
  margin: 0; padding: 0 1rem;
}
@media (min-width:600px){ section{ padding: 0 2rem; } }

/* Typography */
.president .green h2{ color: var(--text-color); }

h1, .large-title{
  font-size: var(--large-heading);
  margin: var(--margin-heading);
  line-height: 1;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  color: transparent;
  background-clip: text;
}
h2{ margin: var(--margin-heading); }

h1, h2, h3, h4, h5{
  font-family: var(--heading-font);
  padding: .35rem 0 .25rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  color: transparent;
  background-clip: text;
}

.article-wrap span {
  font-weight:200;
}

.article h3, .article h4{ margin-top: 1rem; }
.posth4{ padding-top: 0; }

p, em, a{ margin-top: 1ch; color: #848484; }

ul, ol{ padding: 0.4rem 0 2rem; margin-inline-start: 1.2rem; }
ol li, ul li:not(.references ul li){ margin-top: .3rem; padding-left: .5rem; }

.article h2:last-of-type{ margin-bottom: .5rem; }
li, li a{ color: #848484; }

/* Tables */
table{ width:100%; border-collapse:collapse; margin:20px 0; }
table, th, td{ border:1px solid #ddd; }
th, td{ padding:10px; text-align:left; }
th{ background:#f4f4f4; }

/* Nav primitives */
.nav{
  position: fixed; width:100%; height: var(--above-main);
  top:0; left:0; background: var(--bkgrd-color); color: var(--light-color);
  padding: var(--padding-nav); text-align:center; transition: top .3s; z-index:1000;
}
.nav-buttons{
  display:flex; justify-content:space-between;
      max-width: clamp(680px, 80vw, 900px); margin:auto; padding:0 1rem 0 0;
}
.nav-buttons button{
  display:flex; padding: var(--padding-button);
  background-color: transparent; color: transparent; border:none; cursor:pointer;
  background: var(--accent-gradient); -webkit-background-clip:text; background-clip:text;
}
.nav-buttons button:disabled{ background-color: var(--bkgrd-color-400); cursor:not-allowed; }
.button-group{ display:flex; width:max-content; }
.nav-caret{ padding:0 .25rem; }
.contents{ padding-left:0; }
.contents::after{ content: 'Contents'; margin-left:.3rem; }
.next::before{ content:'Next'; }
.previous::after{ content:'Prev'; }
.pageNo{
  width:35px; height:32px;
  padding:.2rem .4rem; text-align:center; border-radius:50%;
}
.logo span{ display:none; }
@media (min-width:600px){ .logo span{ display:inline; } }

/* Layout */
main{
  padding: var(--padding-base);
  max-width: 1024px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 2rem;
}

/* Authors (base look) */
.author-container{
  display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; border-radius: var(--radius-base);
}
.author-group{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding:.5rem; max-width:30ch;
  background: linear-gradient(90deg, #FF86CD, #9FD6FD);
}
.ch20{ max-width:20ch; } .ch25{ max-width:25ch; } .ch30{ max-width:30ch; }
.ch35{ max-width:35ch; } .ch40{ max-width:40ch; } .ch45{ max-width:45ch; } .ch50{ max-width:50ch; }

.author{ display:flex; align-items:center; font-size: var(--small-fontsize); color: var(--text-color-400); }
.author-image{ width:54px; height:66px; margin-right:.5rem; }
.author-image img{ display:flex; width:54px; height:66px; margin-right:.5rem; }

/* Media blocks */
.image{ width:100%; height:auto; max-height:480px; overflow:hidden; display:flex; position:relative; }
video{ width:100%; object-fit:cover; object-position:center; }
.image img{ max-width:100%; object-fit:cover; object-position:center; }
.credit{ position:absolute; bottom:12px; right:1rem; padding:.35rem; font-size:12px; color:#fff; }
.credit a{ color:white; }
.overlay{ position:absolute; left:1rem; bottom:12px; }
.overlay img{ width:100%; height:auto; }




/* Default lead-in for the first paragraph of an article */
.article .article-wrap > p:first-of-type:not(.column p, .tall-video *, .card p, .split-inline p, .split-inline) {
  font-size: var(--large-fontsize);
  font-family: var(--heading-font);
  margin-bottom: 1rem;
}




/* Tall video */
.tall-video .column .image{ display:flex; object-position:center; max-height:780px; }
@media (min-width:800px){ .tall-video .column .image{ max-height:700px; } }
@media (min-width:1000px){ .tall-video .column .image{ max-height:600px; } }
.tall-video .column > p:first-of-type{ font-size: var(--large-fontsize); font-family: var(--heading-font); margin-bottom:1rem; }
.tall-video > * .column h1{ margin-top:0; padding-top:0; margin-bottom:1rem; }
.tall-video .author-container{ margin-bottom:2rem; }
.tall-video .column-container{ margin-top:0; }
.tall{ margin-bottom:2rem; }

/* Blockquotes (base) */
blockquote{
  font-family: var(--heading-font); font-style:italic; color:#555;
  padding: 1.5em 48px 1.5em 75px; margin:20px auto; position:relative;
}
blockquote::before{
  content:"“"; font-size:100px; font-weight:bold; color:#ccc;
  position:absolute; left:0; top:25px; line-height:.7; font-family: Georgia, serif;
}
/* blockquote::after{
  content:"”"; font-size:100px; font-weight:bold; color:#ccc;
  position:absolute; right:10px; bottom:20px; line-height:.7; font-family: Georgia, serif;
} */
blockquote p{ margin:0; line-height:1.3; font-size: var(--large-fontsize); }

/* Columns & Cards */
.column-container{
  width:100%; display:flex; flex-direction:column; flex:1; gap:0 2rem; margin-top:1rem;
}
.embed{ margin-top:1ch; }
@media (min-width:1124px){
  .column-container{
    width: 100%;
    position: relative;
    left: 0;                    /* stop shifting the box itself */
    margin-inline: -100px;      /* bleed visually */
    padding-inline: 100px;      /* pull content back inside */
  }
}

@media (min-width:768px){
  .column-container{ flex-direction:row; }
  .column{ display:flex; flex-direction:column; flex:1; }
}
.column .image{ display:flex; overflow:hidden; height:100%; max-height:100%; }
.column img{ object-fit:cover; object-position:center; }

.column-container h2, .card-container h2{ margin-top:0; }
.card-container{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2rem; }
@media (min-width:800px){ .card-container{ grid-template-columns:1fr 1fr; } }
.fullwidth{ margin-top:1rem; grid-template-columns:1fr; }
.card{ padding:0 0 2rem; background:#f3f3f3; border-radius: var(--radius-base); }
.green h2{ margin-top:1rem; }
.card img{ width:100%; border-radius:3px; }

/* References */
.references{ font-size:.7rem; }
.references ul{ list-style-type:none; padding:.5rem 0; margin-inline-start:0; }
.references ul li{ margin:0 0 .3rem; }

} /* end @layer base */