/* ===================== */
/* SpaghettiOs Page*/
/* ===================== */
/* Box Model Hack */
* {
  box-sizing: border-box;
}

:root {
 
  --section-gap: 4.5rem;
  
  --max-width: 1200px;

  --text-lr-padding: 4.5rem;
  --heading-top-gap: 1rem;
  --heading-bottom-gap: 1.5rem;
  --h6-top-padding: 7rem;
  --h6-bottom-padding: 1rem;
  --p-bottom-padding: 3rem;
  /* remove the gap between divs  */
  /* --slide-gap: -.25rem;  */

  /* gap between matrix items */
  --row-gap: .25rem;

  /* 1.250 - Major Third*/
  --fs-1: .75rem;    /* captioning */
  --fs-2: 1rem;     /* p */
  --fs-3: 1.25rem;  /* h6 */
  --fs-4: 1.563rem; /* h5 */
  --fs-5: 1.953rem; /* h4 */
  --fs-6: 2.441rem; /* h3 */
  --fs-7: clamp(2.75rem, 6.75vw + .6rem, 6.25rem); /* h2 */
  --fs-8: 3.815rem; /* h1 */
}
.nav-button{
  position: fixed;
  top: 2rem;
  left: 38px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: none;           /* harmless on <a> */
  display: inline-flex;   /* centers icon without relying on line-height quirks */
  align-items: center;
  justify-content: center;
  text-decoration: none;  /* remove anchor underline */
  cursor: pointer;
  z-index: 1000;
  background-color: rgba(255 255 255 / .5); /* Selah can override color only */
}
.nav-button:hover{
  background-color: rgba(255 255 255/ .80);
}

.material-symbols-outlined {
  padding: 12px;
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  /* Your defaults */
  font-size: 32px;
 color: rgba(224 0 0 / .7);
  
  font-variation-settings: 
    'FILL' 0,   /* 0 outline, 1 filled */
    'wght' 700, /* 100–700 */
    'GRAD' 0,
    'opsz' 40;
}
.material-symbols-outlined:hover{
  color: rgba(224 0 0 / .95);
}

html{
  /* font-size: 16px; */
}
body  {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
}

.images-section-wrapper{
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(
    0, 5vw, var(--gutter-max)
  );
}
img {
  width: 100%;
  height: auto;
}

.text{
margin: 0 var(--text-lr-padding);
}
@media (max-width: 850px){
  :root {
    --text-lr-padding: 4rem;
    /* --fs-7: 3.025rem; */
  }
}

@media (max-width: 800px){
  :root {
    --text-lr-padding: 2.5rem;
  }
 
  .nav-button {
    left: 20px;
  }
}

@media (max-width: 600px){
  :root {
    --text-lr-padding: 1.5rem;
    --fs-7: 2.6rem;
  }
}

p{
  font-weight: 300;
  padding-bottom: var(--p-bottom-padding);
  font-size: var(--fs-2)
}

small {
  font-size: var(--fs-1);
  font-weight: 300;
  display: block;
  text-align: left;
  line-height: 2;
}


h2{
  font-size: var(--fs-7);
  font-weight: 700;
  text-wrap-style: balance;
  word-break:break-word;
  margin-bottom: var(--heading-bottom-gap);
  display: block;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: .875;
  word-spacing: .125em;
}

h6{
  text-transform: uppercase;
  padding-top: var(--h6-top-padding);
  padding-bottom: var(--h6-bottom-padding);
  font-size: var(--fs-2);
  font-weight: 300;
}

p,
h6{
  line-height: 1.5;
}

.o{
  color: RGB(255 203 0);
}

.yellow{
  color: RGB(255 203 0);
  font-weight: 900;
  letter-spacing: .05em;
  
}
.yellow:nth-of-type(2){
  letter-spacing: 0;
}
.bold{
  font-weight: 900;
  
}

.space{
  padding-left: .05em;
}
.tm{
  font-weight: 500;
  font-size: clamp(2rem, 3.75vw + .6rem, 4rem);
  position: relative;
  vertical-align: super;
  top: 6px;
  left: -2px;
}
.af-heading{
  line-height: .8;
}
.italic {
  font-style: italic;
}
.haters {
  font-weight: 600;
}

/* Simple sections */
#header-div{
  background-color: RGB(255 1 0);
}
.spaghettiO_2 {
  display: flex;
  margin-top: var(--section-gap);
}

.spaghettio-logo{
  width: 350px;
  margin: auto;
  padding-top: 2rem;
}
.graphic{
  display: flex;
  margin-top: 6.5rem;
}
.spoon-divider{
  width: clamp(150px, 20vw + 25px, 275px);
  margin: 0 auto;
}
.red-graph-text-container {
  display: flex;
  width: 100%;
  margin-top: 2.5rem;
  padding: 0 var(--text-lr-padding) 
}
.graph-image-container{
  width: 63%;
}

.graph-text-container{
  padding-left: 1.5rem;
  text-align: left;
  width: 37%;

}
@media (max-width: 1000px) {
  .red-graph-text-container{
    display: block;
  }
  .graph-text-container{
    padding: 1.5rem 1.5rem 0rem 0rem;
    padding-top: 1.5rem;
    width: 63%;
  }
}

.spaghettiO_16 {
  margin-top: 2rem;
}


.big-matrix-wrapper,
.af-matrix-wrapper,
.quad-wrapper {
  width: 100%;
  margin: 0

}

/* Shared row styling for all matrix's  */
.big-matrix .row,
.af-matrix .row,
.quad-matrix .row{
  display: flex;
  gap: var(--row-gap);
  width: 100%;
  margin-bottom: var(--row-gap);
}

/* small tweak for quad-matrix */
.quad-matrix .row{
 margin-bottom: 0;
 
}


/* Video defaults (non Big-Matrix)  */
.spaghettiO_1 video,
/* .big-matrix video, */
.af-matrix video,
.quad-matrix video{
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}


/* .quad-matrix video{
  margin-top: var(--row-gap);
} */
.spaghettiO_1 video,   /* header graphic */
.spaghettiO_7 video,   /* big-matrix row 2 left*/
.spaghettiO_8 video,   /* big-matrix row 2 right */
.spaghettiO_18 video,  /* AF */
.spaghettiO_19 video,  /* AF */
.spaghettiO_21 video,  /* quad */
.spaghettiO_22 video,  /* quad */
.spaghettiO_23 video,  /* quad */
.spaghettiO_24 video { /* quad */
  width: 100vw;  
}
/* BIG MATRIX (scoped) */

.big-matrix {
  display: flex;
  flex-direction: column; /* rows stack */
  margin-bottom: var(--section-gap);
}

/* rows stretch tiles to a uniform row height */
.big-matrix .row {
  align-items: stretch;
  /* display: flex; */
  gap: var(--row-gap);
  width: 100%;
}

/* tiles share the row width by weight and take the row height */
.big-matrix .slide {
  flex: var(--w, 1) 1 0;   /* weight; override per row below */
  min-width: 0;
  height: var(--rowH, 22vw); /* row height scales with viewport width */
}




/* video fills its tile, preserves aspect; no white space */
.big-matrix .row .slide > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* fill without gutters (crop if needed) */
  max-width: none;
}

/* this keeps the videos from continuing to grow in their containers despite the max-width on the page */
.big-matrix .r1 video,
.big-matrix .r2 video{
  max-height: 264px;
}
.big-matrix .r3 video{
  max-height: 216px;
}
.big-matrix .r4 video{
  max-height: 384px;
}

/* This prevents the slides from growing height wise despite the max page width of 1200px. Keeps the gutter size fixed once the page hits max-width */
@media (min-width: 1200px){
   .big-matrix .r1 .slide,
   .big-matrix .r2 .slide{
    height: 264px;
}
  .big-matrix .r3 .slide{
    height: 216px;
  }
  .big-matrix .r4 .slide{
    height: 384px;
  }

}

/* ---------- Row-specific layout ---------- */

/* Row 1: three equal tiles */
/* Row 1 weights: 1 | 2 | 1 */
.big-matrix .r1 .slide:nth-child(1) { --w: 1; }
.big-matrix .r1 .slide:nth-child(2) { --w: 2; }
.big-matrix .r1 .slide:nth-child(3) { --w: 1; }


/* Row 3: wide + narrow + wide => 2 : 1 : 2 */
.big-matrix .r3 { --rowH: 18vw; }                 /* tune to match comp */
.big-matrix .r3 .slide:nth-child(1),
.big-matrix .r3 .slide:nth-child(3) { --w: 2; }
.big-matrix .r3 .slide:nth-child(2) { --w: 1; }

/* Row 4: two-up equal */
.big-matrix .r4 { --rowH: 32vw; }                 /* tune to match comp */
.big-matrix .r4 .slide:nth-child(1) { --w: 2; }
.big-matrix .r4 .slide:nth-child(2) { --w: 1; }


/* AF matrix */
/* .af-matrix {
  margin-bottom: var(--section-gap);
} */
#static-april-fools{
 margin: 0;
}
#omoji-april-fools{
  display: block;
  height: auto;
  margin-bottom: var(--row-gap)
}

/* Quad matrix */
.quad-matrix{
  width: 100%;
  margin-bottom: 0;
}
.quad-matrix video {
  margin-top: var(--row-gap);
}


/* give paragraphs more breathing room on mobile */
@media (max-width: 1000px) {
  p{
    margin-bottom: 2rem;
  }
}