/*
CSS RESET
A version of this: https://piccalil.li/blog/a-more-modern-css-reset/
*/
 
/* * {
  outline: 1px solid red;
} */
  *,
   *:before,
   *:after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
 
 /* Prevent font size inflation */
   html {
     -moz-text-size-adjust: none;
     -webkit-text-size-adjust: none;
     text-size-adjust: none;
   }
 
/* To animating to or from height: auto  */
   html {
    interpolate-size: allow-keywords;
  }
  
   /* Remove default margin in favour of better control in authored CSS */
 
 body, h1, h2, h3, h4, p,
 figure, blockquote, dl, dd {
   margin-block-end: 0;
 }
 
 /* Inherit fonts for inputs and buttons */
 input, button,
 textarea, select {
   font-family: inherit;
   font-size: inherit;
 }
 
 textarea:not([rows]) {
   min-height: 10em;
 }
 
 :target {
   scroll-margin-block: 5ex;
 }
 
 /* Make images easier to work with */
 img,
 picture,
 svg,
 video {
   display: block;
   max-inline-size: 100%;
   height: auto;
 }
 
 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
 ul[role='list'],
 ol[role='list'] {
   list-style: none;
 }
 
 a:not([class]) {
   text-decoration-thickness: max(0.06rem, 1px);
   text-underline-offset: 0.3rem;  
 }
 
 /* Set core body defaults */
 body {
   min-height: 100vh;
 }
 
 /* Anything that has been anchored to should have extra scroll margin */
 :target {
   scroll-margin-block: 5ex;
 }
/*
GLOBAL STYLES
--------------
COLOR VARIABLES 
FLUID TYPE VARIABLES
FLUID SPACING VARIABLES
BODY AND FONT FACE
TYPE ELEMENTS
OTHER GLOBAL ELEMENTS 
*/

/********************************/
/****** COLOR VARIABLES  *******/        


[data-theme="light"] {
  --brand: #433E37;
  --accent: #AF0E49;
  --secondary: #E4DACD;
  --tertiary:#9ec23d;     
  --text:#332F29; 
  --text-alt: #ffffff;      
  --surface: #F9F7F4;
  --surface-l: #fff;
  --shadow:#F9F7F4; 
  --hover:#AF0E49; 
  --hover-alt:#9ec23d; 
  
  .affs{
    filter: invert(86%) sepia(4%) saturate(1373%) hue-rotate(319deg) brightness(111%) contrast(106%);
   }
   .btn {
    color: #fff;
  }

}

[data-theme="dark"] {
  --brand: #fff2eb;
  --accent: #AF0E49;
  --secondary: #433E37;
  --tertiary:#9EC23D;     
  --text:#fff2eb; 
  --text-alt: #332F29;      
  --surface: #27241f;
  --surface-l: #433E37;
  --shadow:#F9F7F4; 
  --hover:#9ec23d; 
  --hover-alt:#AF0E49; 
  .affs{
    filter: invert(22%) sepia(12%) saturate(261%) hue-rotate(356deg) brightness(97%) contrast(91%);
   }  
}

/********************************/

/***** FLUID TYPE VARIABLES ******/     


@font-face {
  font-family: "Orelega One Regular";
  src: url("/font/OrelegaOne-Regular.woff2");
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+018E-018F, U+01B7,
      U+01EA-01EB, U+0218-021B, U+0237, U+0251, U+0259, U+0292, U+02BB-02BC,
      U+02C6-02C7, U+02CC, U+02D8-02DD, U+0300-0304, U+0306-0308,
      U+030A-030C, U+0311-0313, U+0326-0327, U+0345, U+0400-045F,
      U+0472-0473, U+0490-0491, U+0496-049B, U+04A2-04A3, U+04AA-04AF,
      U+04B2-04B3, U+04B6-04B7, U+04C0-04C2, U+04CB-04CC, U+04CF-04F9,
      U+1E9E, U+2002-2003, U+2009, U+200B, U+2010-2014, U+2018-201F, U+2022,
      U+2026, U+2032-2033, U+2039-203A, U+2044, U+2074, U+20AC, U+20B7,
      U+2122, U+2190-2193, U+2212, U+2215, U+E100-E112, U+FB00-FB04, U+FEFF,
      U+FFFD;
}



/* @link https://utopia.fyi/type/calculator?c=320,19,1.2,1280,22,1.25,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.8247rem, 0.8062rem + 0.0922vw, 0.88rem);
  --step--1: clamp(0.9896rem, 0.9528rem + 0.184vw, 1.1rem);
  --step-0: clamp(1.1875rem, 1.125rem + 0.3125vw, 1.375rem);
  --step-1: clamp(1.425rem, 1.3271rem + 0.4896vw, 1.7188rem);
  --step-2: clamp(1.71rem, 1.5639rem + 0.7307vw, 2.1484rem);
  --step-3: clamp(2.052rem, 1.8408rem + 1.0559vw, 2.6855rem);
  --step-4: clamp(2.4624rem, 2.1642rem + 1.4909vw, 3.3569rem);
  --step-5: clamp(2.9549rem, 2.5411rem + 2.0688vw, 4.1962rem);
  --step-6: clamp(3.5459rem, 2.9794rem + 2.8323vw, 5.2452rem);
  --step-7: clamp(4.255rem, 3.4879rem + 3.8358vw, 6.5565rem);
  --step-8: clamp(5.106rem, 4.0762rem + 5.1493vw, 8.1956rem);
  --step-9: clamp(6.1272rem, 4.7548rem + 6.8622vw, 10.2445rem);
  --step-10: clamp(7.3527rem, 5.535rem + 9.0883vw, 12.8057rem);
}

/********************************/
/*** FLUID SPACING VARIABLES ****/


/* @link https://utopia.fyi/space/calculator?c=320,19,1.2,1280,22,1.25,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.2917rem + 0.1042vw, 0.375rem);
  --space-2xs: clamp(0.625rem, 0.6042rem + 0.1042vw, 0.6875rem);
  --space-xs: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.0625rem);
  --space-s: clamp(1.1875rem, 1.125rem + 0.3125vw, 1.375rem);
  --space-m: clamp(1.8125rem, 1.7292rem + 0.4167vw, 2.0625rem);
  --space-l: clamp(2.375rem, 2.25rem + 0.625vw, 2.75rem);
  --space-xl: clamp(3.5625rem, 3.375rem + 0.9375vw, 4.125rem);
  --space-2xl: clamp(4.75rem, 4.5rem + 1.25vw, 5.5rem);
  --space-3xl: clamp(7.125rem, 6.75rem + 1.875vw, 8.25rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1875rem + 0.625vw, 0.6875rem);
  --space-2xs-xs: clamp(0.625rem, 0.4792rem + 0.7292vw, 1.0625rem);
  --space-xs-s: clamp(0.875rem, 0.7083rem + 0.8333vw, 1.375rem);
  --space-s-m: clamp(1.1875rem, 0.8958rem + 1.4583vw, 2.0625rem);
  --space-m-l: clamp(1.8125rem, 1.5rem + 1.5625vw, 2.75rem);
  --space-l-xl: clamp(2.375rem, 1.7917rem + 2.9167vw, 4.125rem);
  --space-xl-2xl: clamp(3.5625rem, 2.9167rem + 3.2292vw, 5.5rem);
  --space-2xl-3xl: clamp(4.75rem, 3.5833rem + 5.8333vw, 8.25rem);

  /* Custom pairs */
  --space-s-l: clamp(1.1875rem, 0.6667rem + 2.6042vw, 2.75rem);
}

/********************************/
/****** BODY AND FONT FACE *******/

/* Body */

html {
  font-size: 90%;
  scrollbar-gutter: stable; /* stops the jumping when there is a short page with no scroll */
  background-color:white; 
  max-width: 1920px;
  margin-inline: auto; 
  scrollbar-color: var(--text) var(--text-alt);
  scrollbar-width: auto; 
}


@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}


body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: var(--step-0);
  line-height: calc(1.4em + 0.5rem);
  background-color: var(--surface);
  color: var(--text);
  font-weight: 400; 
}


/********************************/
/******** TYPE ELEMENTS ********/

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height:calc(1em + 0.5rem);
  text-wrap: balance;
  font-weight: 400;
  font-family: "Orelega One Regular", Georgia, 'Times New Roman', Times, serif;
}


h1 {
  font-size: var(--step-4); 
  margin-block-end: var(--space-s);  
}

h2 {
  font-size: var(--step-3);
  text-transform: capitalize ;
}

h3 {
  font-size: var(--step-2);
}

h4 {
  font-size: var(--step-1);
  font-weight: 500;
  text-transform: capitalize;  
}

h5 {
  font-size: var(--step--1); 
  color: var(--tertiary);
  line-height:2.2;  
  letter-spacing: .05rem;
  text-transform: uppercase;
}

h6 {
  font-size: var(--step--1);
}

p{
  margin-block: var(--space-xs);
  font-variant-numeric: oldstyle-nums;
}

small {
  font-size: var(--step--1);
  line-height: 1.5;
  display: inline-block;
}

a {
  color: var(--text);
  text-decoration-color: var(--text);
  padding-block: var(--space-s);
}

a:hover {
  color: var(--hover);
}


a:active{
  position: relative;
  inset-block-start: 0.05rem;
  /* give all links a bounce on click. */
}

strong {
  font-weight: 700;
}

li{
  line-height: 2;
}

main li {  
  margin-inline-start: var(--space-s);
  line-height: calc(1.5em + 0.5rem);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
small,
li,
figcaption {
  max-inline-size: 65ch;
}


/********************************/
/***** OTHER GLOBAL ELEMENTS *****/

hr {
    height: .04rem;
    background-color: var(--text);  
    border:none;
    margin-block: var(--space-m);
}
 

* {
  scrollbar-color: hsl(224, 19%, 15%) var(--shadow);
  scrollbar-width: auto;
}

::marker {
  color: var(--text);
  font-size: var(--step-1); 
}

::selection {
  color: var(--surface);
  background-color: var(--text);
}


blockquote {
  display: block;  
  font-style:italic;
  padding-inline-start: var(--space-xs);
  border-inline-start: .5rem solid var(--text);
}

cite{
  font-weight: 600;
  font-style: normal;
  float: inline-end;
}
 
address {
  display: inline-block;
  font-style: italic;
}

figcaption {
  padding: 1rem;
  display: inline-block;
}

/* skip links and focus */

.skip-link {
  position: absolute;
  padding: 0.5rem;
  margin: 1rem;
  background-color: var(--shadow);  
  z-index: 10;
  font-weight: 700;}

.skip-link:not(:focus) {
  clip-path: inset(50%);
}

:focus-visible {
    outline: 0.3rem solid var(--accent);  
    border-radius: 0.5rem;
  } 

.toggle:focus-visible {
  outline: 0.3rem solid var(--accent);  
  border-radius: 0.5rem;
 }

/* Less used*/

a abbr  {
  text-decoration: none;
}

abbr {
  text-decoration: underline dotted;
}

kbd {
  border: 0.1rem solid;
  border-radius: 0.3rem;
  box-shadow: inset 0 -0.1rem 0 0;
  padding: 0.3rem 0.5rem;
  margin-inline: 0.3rem;
  white-space: nowrap; 
}

code {
  background-color: var(--tertiary);
  color: var(--brand-95-l);
  font-size: var(--step-0);
  font-family: "Courier New", Courier, monospace;
  padding: 0.2rem;
}

pre {
  background-color: var(--shadow-2);
  color: var(--text);
  font-size: var(--step-0);
  font-family: "Courier New", Courier, monospace;
  padding: var(--space-xs);
  overflow: auto;
  margin-block: var(--space-s);
  font-weight: 600;  
}

fieldset{
  border: 0;
}

legend{
  font-size: var(--step-1);
  font-weight: 700;
  margin-block-end: var(--space-xs);
}
/*
COMPOSITION
-----------
BODY
HEADER & NAV 
HOMEPAGE MAIN
ABOUT
FOOTER 
HOMEPAGE BENTO
FLUID BREAKOUTS 
*/

/********************************/
/************ BODY ************/              

.top-bar     {grid-area: tb;}
header       {grid-area: h;}
main         {grid-area: m;}
footer       {grid-area: f;}


body { 
  padding-inline:4vw;
  display: grid; 
  grid-template:
  "tb"
  "h"
  "m" 1fr /* gives remaining space to the main */
  "f"
  ; 
}
/********************************/
/******** HEADER & NAV  ********/

.logo-area        {grid-area: header-1;}
.header-contacts  {grid-area: header-2;}
 nav              {grid-area: header-3;}

/* small devices */

header{
  display: grid;
  grid-template:
  "header-1"
  "header-2"
  "header-3"  
 / 
  1fr;   
  
  gap: var(--space-s);
  margin-block-end: var(--space-xs);
}

@media (width <= 60rem){
header >* {
  display: grid;  
  justify-content: center;
 }

.logo-area{
  justify-self: center;
}
.logo img  {
  max-inline-size: 200px;
}
}

/* medium devices */

@media (width > 60rem){
  header {   
    grid-template:
    "header-1 header-2" 
    "header-3 header-3" 
    / 
     1fr       1fr;   
  }

  header nav{
    align-self:center;
    justify-content: end;
    }

    .header-contacts {  
      justify-self: end;    
    }  
}

/* large devices */

@media (width > 87rem){
header {
  grid-template:
    "header-1 header-2 header-3"
  /  
     1fr       1fr        1fr;      
}

header nav{
  align-self:center;
  justify-items: end;
  }

.header-contacts {  
  justify-self: center;    
}
}

 header nav ul, .pagination ul {   
    justify-content: center;
    display: flex;
    flex-wrap: wrap; 
    gap: var(--space-m); 
  
  }
nav ul{    
  list-style: none;
  }


/********************************/
/******** HOMEPAGE BENTO ********/
 
.card-1  {grid-area: card-1;}
.card-2  {grid-area: card-2;}
.card-3  {grid-area: card-3;}
.card-4  {grid-area: card-4;}
.card-5  {grid-area: card-5;}
.card-6  {grid-area: card-6;}
.card-7  {grid-area: card-7;}

/* small devices */
@media (width <= 60rem){
  .home-bento{
  display: grid;
  gap:var(--space-xs); 
  grid-template:
  "card-1" 
  "card-2" 
  "card-3" 
  "card-4" 
  "card-5" 
  "card-6" 
  "card-7"
   /
    1fr     
 ;   
  margin-block-end: var(--space-m);
  justify-content: center;
 }
}

/* medium devices */
@media (width > 60rem){
  .home-bento {
    display: grid; 
    gap:var(--space-m); 
    grid-template:
    "card-1 card-1 card-2 card-2" 
    ".      card-3 card-3     ." 
    "card-4 card-4 card-4 card-4" 
    ".      card-5 card-6     ."
    " card-7 card-7 card-7 card-7"    
    /
      .6fr    4fr    4fr     .6fr   
   ;    
    }  
  }

/* large devices */
@media (width > 87rem){
.home-bento  {
  display: grid; 
  gap:var(--space-s-l); 
  grid-template:
  "card-1 card-1  card-2 card-2  card-3  card-3" 
  "card-4 card-4  card-5 card-5  card-3  card-3"
  "card-6 card-6  card-7 card-7  card-7  card-7"
  /
    1fr    1fr     1fr    1fr     1fr     2fr 
 ; 
  }  
}

/********************************/
/************  ABOUT ************/

.cols {
  columns: 26rem auto;
  gap: var(--space-2xl);
  column-rule: 0.2rem solid var(--text); 
  padding-block-start: var(--space-l); 
}

.cols div{
break-inside: avoid;
}
 
/********************************/
 /************ POSTS ************/


/* Bio Section */

/* small devices */
@media (width <= 60rem){
  .bio-section   {
   display: grid;
   gap:var(--space-xs); 
   grid-template:
   " bio-1" 
   " bio-2" 
   " bio-3"   
     /
     1fr     
  ;   
   margin-block-end: var(--space-m);
   justify-content: center;
  }
 }
 
 /* medium and large devices */
 @media (width > 60rem){
  .bio-section  {
     display: grid; 
     gap:var(--space-m); 
     grid-template:
     " bio-2  bio-1" 
     " bio-3  bio-3"       
     /
       2fr    1fr ;     
     }   
   }

   .bio-1  {grid-area: bio-1;}
   .bio-2  {grid-area: bio-2;}
   .bio-3  {grid-area: bio-3;}

   
.pagination{
  margin-block-start: var(--space-l);
  justify-self: center;
  }
  
  .pagination a{
    padding: var(--space-xs);  
    border: .4rem solid var(--text);
    text-decoration: none;
    border-radius: .5rem;
    transition: .2s ease-out;
    }
  
    .pagination a:hover{ 
      background-color: var(--accent);
      color: #fff;   
      }   
    
      .links-nextprev a{  
        padding: var(--space-xs);      
        transition: .2s ease-out;
        width: 300px;      
      }
  
      .links-nextprev  {
       margin-block-start: var(--space-l);
       display: flex;     
       justify-content: space-around;
       list-style: none;  
      }

   
/********************************/
/************ FOOTER ************/


  
footer{ 
  margin-block-start: var(--space-l);
  text-align: center;
}

footer small a{ 
  padding: var(--space-xs); 
}

footer small {  
  max-inline-size: 100ch;
  line-height: 3;
}

/********************************/
 /********* BLOG ARCHIVE *********/

 
.box {
  /*--------Settings-------*/ 
  --grid-col-count: 3;
  --grid-gap: var(--space-s-l);
  --grid-item-min-width: 22rem;
  justify-items: center;
  /*------------------------*/ 

  --gap-count: calc(var(--grid-col-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-gap));
  --grid-item-max-width: calc((100% - var(--total-gap-width)) / var(--grid-col-count));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-min-width), var(--grid-item-max-width)), 1fr));
  gap: var(--grid-gap);
  padding-block: var(--grid-gap);
  
}


/********************************/
/******* FLUID BREAKOUTS *******/

/* https://layout-breakouts-builder.vercel.app/ */

.page-layout > *, .full-width > * {
  grid-column: content;
}
.page-layout, .full-width {
--minimum-content-padding: 2rem;

/** TRACK WIDTHS **/
--full-max-width: 1fr;
--popout-max-width: 75rem;
--content-max-width: 45rem;

/** TRACK SIZES **/
--full: minmax( var(--minimum-content-padding), 1fr );
--popout: minmax( 0, calc( ( var(--popout-max-width) - var(--content-max-width)) * 0.5 ) );
--content: min( var(--content-max-width), 100% - var(--minimum-content-padding) * 2 );

display: grid;
grid-template-columns: 
  [full-start]
  var(--full)
    [popout-start]
    var(--popout)
      [content-start]
      var(--content)
      [content-end]
    var(--popout)
    [popout-end]
  var(--full)
  [full-end];
}

/** CLASSES **/
.full { grid-column: full; }
.full-start { grid-column-start: full-start; }
.full-end { grid-column-end: full-end; }

.popout { grid-column: popout; }
.popout-start { grid-column-start: popout-start; }
.popout-end { grid-column-end: popout-end; }

.content { grid-column: content; }
.content-start { grid-column-start: content-start; }
.content-end { grid-column-end: content-end; }

.full-width { grid-column: full; }
.full-content, .full-content-nopad { grid-column: full; }
.full-content { padding-inline: var(--minimum-content-padding); }
/*
UTILITY
-------
FLOW
POSITIONING
COLOR
REMOVE
OTHER
*/

/********************************/
/************  FLOW ************/            

.flow {
    --flow-space: 1rem;
  }  
  .flow > * + * { 
    margin-top: var(--flow-space);
  }  
  h2 {
    --flow-space: 3.6rem;
  }  
  h3 {
    --flow-space: 2rem;
  }  
  h4{
    --flow-space: 1.3rem;
  }  
  section{
    --flow-space: 5rem;
  }  
  img{
    --flow-space: 2rem;
  }  
  blockquote,
  blockquote + * {
    --flow-space: 3rem;
  }  
 
  
/********************************/
  /******  POSITIONING  ********/            
 
  .text-center{
    text-align: center;
  }
  
  .center-me {
    display: grid;
    justify-items: center;
  }  
  
   .balance{ 
   text-wrap: balance;
  }
  .pretty{ 
   text-wrap: pretty;
  }
  
  .float-right{
   float: right;
  }

  .justify-self-end{
    justify-self: end;
  }
  
/********************************/
  /**********  COLOR  ***********/            


.dot {    
  color: var(--tertiary);
 }

/********************************/
/************ REMOVE************/            

/* Accessibility utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.no-indent ul li {
  margin-inline-start: initial;
}

span.email b {
	display: none;
}  

/*******************************/
/************ OTHER************/            


/* Helper text styles */
.hint-text {
  display: block;
  font-size: var(--step--1);
  color: var(--text);
  margin-block-start: 0.25rem;
}

.error-message {
  display: block;
  color: var(--accent); 
  margin-block-start: 0.25rem;
}

.curved-corners img{
  border-radius: 1rem;
}
/*
BLOCK
-------
BODY
HEADER & NAV 
HOMEPAGE BENTO GRID
ABOUT
REEL
LIGHT DARK MODE
LITE YOUTUBE 
FOOTER
FORMS
BOX
OTHER 

/********************************/
/************  BODY ************/              

/* Bento animation*/

@media (width <= 60rem){

@keyframes slide-fade-in {
  from {  
    transform:  translatey(30vw);  
  }
}
}

.card, .box li{
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      animation: slide-fade-in both;
      animation-timeline: view();
      animation-range:entry 0% 50%;        
    }
  }
}


/*  removes all browers button styles
focus need to be added back */
button{
  all:unset
}

.btn, .btn:active{
  border-radius: 0.5rem;
  border: none;
  background-color: var(--accent);  
  color: #fff;
  display: block;
  padding: 0.3em 1.5em;
  font-weight: 600;
  letter-spacing: 0.05em;  
  text-decoration: none;  
  text-transform: uppercase;
  width:  fit-content;
  height: fit-content; 
  font-size: var(--step--1); 
  outline: 0.1rem solid transparent;
  outline-offset: -0.125rem;
  box-shadow: .08rem  .2rem .1rem .08rem hsla(0, 0%, 2%, 1);
  transition: .2s ease-out;
  margin-block-end: var(--space-s);
}

.btn:hover {
  color: #fff;
  transition: .1s ease-in; 
  box-shadow: .05rem .08rem .1rem .01rem hsla(0, 0%, 2%, 0.3);
  transition: .2s ease-in;  
  background-color: hsl(from var(--accent) h s calc(l + -1)); 
}  
 
.btn:focus-visible{
  outline: 0.3rem solid var(--accent);  
  border-radius: 0.5rem;
}

/********************************/
 /******** HEADER & NAV  *******/

header{
  padding-block-end: var(--space-m);
  color: var(--text);
}

header a{
  text-decoration: none;
  }

 
.logo-area{ 
  gap: var(--space-s);
  width: max-content;  
  align-self: center;
  border: .5rem solid var(--brand);
  background-color: var(--surface-l);
  border-radius: 1rem;
  padding: 1rem; 

}

.logo svg {
 fill: var(--brand);
 min-inline-size:300px;
 block-size: auto; 
}

.logo svg:hover {
  fill: var(--accent);
 }

header h1 span{
  font-size: var(--step-0);
  display: block;  
  line-height: normal;
}

.header-contacts{ 
  border-radius: 1rem;
  padding: 1rem; 
  align-content: center;
  justify-items: center;    
}

.header-contacts li{
  list-style: none;  
}

.header-contacts li svg {
 display: inline;
 vertical-align: middle;
 inline-size: 1.8rem;
}

.change-path {stroke: var(--text);}
.logo-path {fill: var(--text-alt);}
.logo-text-path {fill: var(--text);}
.logo:hover {color:var(--text)}

header nav a{
  padding-block: var(--space-m);
  padding-inline: var(--space-3xs-2xs);
}

header nav a[aria-current="page"] {
text-decoration:underline;
text-decoration-thickness: max(0.2rem, 1px);
text-underline-offset: var(--space-xs);
}

/********************************/
 /****  HOMEPAGE BENTO GRID ****/


.card{  
  border-radius: .8rem;
  padding: var(--space-m);
  outline: 0.4rem solid transparent; 
}

.card-1{
background-color: var(--secondary); 
}

.card-2{
  background-color: var(--brand);
  justify-items: center;
  color: var(--text-alt);
}

.profile-img{
  border: .8rem solid var(--secondary);
  border-radius:50rem;
  max-width: 200px ;
}

.card-3{
  background-color: var(--brand);
  color: var(--text-alt);
  justify-items: center;
  padding: var(--space-l);
}

.card-3 img{
border-radius: 1rem;
border: .5rem solid var(--surface-l);
height: min-content;
}

.card-4{
  background-color: var(--tertiary); 
  color:  #332F29;
  align-content: center; 
  justify-items: center;
  border: .5rem solid var(--brand);
}
.card-4 ul{
  margin-block: 2rem;
}
.card-4 li a {
  color: #332F29;
  text-decoration-color: #332F29;
  font-weight: 600; 
}

.card-4 li a:hover {
  color: var(--accent);
 
}

.card-4 li::marker {
  color: #332F29;
  content: "\2605  ";  
}


@media (width < 87rem){
.card-4 ul{
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
 
}
.card-4 ul li{
  margin-inline-start: 2rem;
} 
}

.card-5{
  background-color: var(--accent);
  color:#fff;
  align-items: center; 
  }


  .card-6{   
    background-color: #FCBE39; 
    color:  #332F29;
    align-items: center;  
    justify-items: center;      
   }  
  
  
  .card-7{
    border: .4rem solid var(--brand); 
    list-style: none;  
     }

    
    .card-7 svg {
     display: inline;
     vertical-align: middle;
     inline-size: 1.8rem;
    }

    .bio-name{
      text-transform: uppercase;
      font-size: var(--step--1);
    }
/********************************/
 /***********  REEL  ***********/

.reel {
display: flex;
/* change block-size for fixed heights */
block-size: auto;
overflow-x: auto;
overflow-y: hidden;
scrollbar-color: var(--text-alt) var(--brand);
}

.reel > * {
flex: 0 0 auto;
}

.reel div {
flex-basis: 22rem; 
}

/* space between "slides" */
.reel > * {
margin-inline-end: 10rem;
}


/********************************/
 /************  POSTS ************/


/* needed to show the focus ring */
.post-link {
  display: block; 
}

.post h1{
margin-block-start: var(--space-s);
}
.bio-section {
  margin-block-start: var(--space-l);
  background-color: var(--brand);
  border-radius: 1rem;
  color: var(--text-alt);
  padding: var(--space-l);
}

.bio-section p a {
  color: var(--text-alt);
  text-decoration-color: var(--text-alt);  
}

.bio-1{
  justify-items: center;
  align-content: center;
}

.bio-3{
background-color:var(--text-alt);
color: var(--text);
padding-inline: var(--space-l);
border-radius: 1rem;
}

.bio-2 ul li::marker {
  color:var(--text-alt);
}

.post-metadata  {
  display: flex; 
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  align-items:center;
  margin-block:var(--space-s);  
}

.post-metadata li  {
margin-block: var(--space-3xs);
}

 .post-tag {
  background-color: var(--brand);
  color: var(--text-alt);
  padding: var(--space-3xs)  var(--space-xs);
  margin:var(--space-2xs);
  text-decoration: none;
  text-transform: capitalize;
  border-radius: .2rem;  
  font-size: var(--step--1);
}
.post-tag:hover {
  background-color: var(--tertiary);
  color:#27241f;
}

.tag{
  text-transform: lowercase;
}
/********************************/
 /************  FOOTER ************/

footer{
  padding-block: var(--space-m);
}

/********************************/
/************ FORMS ************/

/* Base form styles */
form {
  margin-block-end: var(--space-m);
  background-color: var(--shadow-2);
  border-radius: 0.5rem;
}

.field-wrapper {
  margin-block-end: 1.5rem;
}

/* Label styles */
label {
  display: block;
  font-weight: 600;
  margin-block-end: 0.5rem;
  color: var(--text);
}

/* Required field indicator */
.required {
  color: var(--accent);
  margin-inline-start: 0.25rem;
}

/* Input styles */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 1rem 0.5rem;
  border: 0.2rem solid var(--text);
  border-radius: 0.5rem; 
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Focus states */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--tertiary); 
}


/* Textarea specific styles */
textarea {
  height: 15rem;
  resize: vertical; 
}


/********************************/

/******* LIGHT DARK MODE  *******/

.top-bar{
  display: flex;
  justify-self: end;
  height: 55px;
}

.toggle {
  background: none;
  color: inherit;
  border: none;
  padding: 1rem;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  
}
.theme-icon {
  inline-size: 25px;
  block-size: 25px;
  transition: 0.3s;
}
.theme-icon:hover {
  transform: scale(1.2);
}

.hide-dark-img {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .theme-icon:active {
    transform: rotate(-22deg);
  }
}

/********************************/
/************ BOX  ************/

.box li{
list-style: none;
border-radius: 1rem;
padding: var(--space-m); 
background-color: var(--brand);
outline: 0.4rem solid transparent; 
margin-inline: 0
}

.box h2{
  margin-block: var(--space-xs);
  font-size: var(--step-1);   
}

.box a:hover{
 color: var(--hover-alt);
}
.box { 
  color: var(--text-alt);  
}

.has-feature-image{
  background-size: cover;
}

.postlist-date{
  color: var(--text-alt);
}

.box a {
  color: var(--text-alt);
} 

.archive-img:hover  {
  transition: 0.3s ease-in-out;
  transform: scale(1); 
} 

.archive-img {
  transition: 0.3s ease-in-out;
  transform: scale(.95);
  will-change: transform;
} 

.archive-img img{
  border-radius: 1rem; 
} 

.feature-img{
  border-radius: 1rem; 
}


/********************************/

/********** LITE YOUTUBE  **********/

lite-youtube {
  background-color: #000;
  position: relative;
  display: block;
  contain: content;
  background-position: center center;
  background-size: cover;
  cursor: pointer; 
  border-radius: 1rem;
  border: .5rem solid var(--text);
}

/* gradient */
lite-youtube::before {
  content: attr(data-title);
  display: block;
  position: absolute;
  top: 0;
  /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
  background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
  height: 99px;
  width: 100%;
  font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
  color: hsl(0deg 0% 93.33%);
  text-shadow: 0 0 2px rgba(0,0,0,.5);
  font-size: 18px;
  padding: 25px 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

lite-youtube:hover::before {
  color: white;
}

lite-youtube::after {
  content: "";
  display: block;
  aspect-ratio: 16 / 9;
}
lite-youtube > iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

/* play button */
lite-youtube > .lyt-playbtn {
  display: block;
  /* Make the button element cover the whole area for a large hover/click target… */
  width: 100%;
  height: 100%;
  /* …but visually it's still the same size */
  background: no-repeat center/100px 100px;
  /* YT's actual play button svg */
  background-image: url('/svg/yt-play.svg');
  position: absolute;
  cursor: pointer;
  z-index: 1;
  filter: invert(11%) sepia(98%) saturate(4186%) hue-rotate(329deg)
  brightness(92%) contrast(95%) drop-shadow(0 .2rem 0 rgba(0, 0, 0, 0.6));
  transition: filter .1s cubic-bezier(0, 0, 0);
  transition: .2s ease-out;
  border: 0;
}

lite-youtube:hover > .lyt-playbtn,
lite-youtube .lyt-playbtn:focus {
  filter: invert(11%) sepia(98%) saturate(4186%) hue-rotate(329deg)
  brightness(92%) contrast(95%) drop-shadow(0  0 .1rem rgba(0, 0, 0, 0.3));
}

/* Post-click styles */
lite-youtube.lyt-activated {
  cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lyt-playbtn {
  opacity: 0;
  pointer-events: none;
}

.lyt-visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.ha, .ha-placeholder  {
display: none !important;
}

.affs {
  margin-inline: var(--space-xl); 
}

.eb{
 filter: invert(13%) sepia(5%) saturate(1896%) hue-rotate(357deg) brightness(93%) contrast(83%);
 width: 200px;
 justify-self: center; 
}
/*
EXCEPTIONS
It gets kinda lonely here!