@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* still needs to be included as file *
@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff");
}
*/






:root {
   --ff-body: "Fira Sans";
   --ff-heading: "Fira Sans";

   --clr-black: hsl(0 0% 10% / 1);
   --clr-white: hsl(0 0% 100% / 1);

   --clr-dark: hsl(10 3% 41% / 1);
   --clr-darkl: hsl(10 3% 5% / 0.5);

   --clr-light: hsl(215 29% 92% / 1);
   --clr-lightl: hsl(215 29% 92% / 1);

   --clr-lighter: hsl(215 29% 99% / 1);

   --clr-blue: hsl(220 42% 42% / 1);

/*   --clr-navlight: hsl(0, 0%, 85%);
   --clr-navcyan: hsl(186, 71%, 31%);
   --clr-navcyand: hsl(186, 72%, 26%);
   --clr-navcyanll: hsl(184, 32%, 90%);
   --fs-nav10: 10px; /* 0.625rem */

   --fs-xl: 1.5em;

   --fs-l: clamp(3.5rem, 12vw + 1rem, 12rem);
   --fs-m: 2.5rem;
   --fs-s: 1rem;

   --space-e: 1.75rem;
}






/* ******************************************************************* #RESET */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
   box-sizing: border-box;
}

/* 2. Remove default margin */
* {
   margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
   html {
      interpolate-size: allow-keywords;
   }
}

body {
   /* 4. Add accessible line-height */
   line-height: 1.5;
   /* 5. Improve text rendering */
   -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
   display: block;
   max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
   font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
   overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
   text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
   text-wrap: balance;
}

/* 10. Create a root stacking context */
#root, #__next {
   isolation: isolate;
}





/* **************************************************************** #DEFAULTS */
html {
   font-style: normal;
}

body {
   font-family: var(--ff-body), sans-serif;
   color: var(--clr-dark);
}

h1, h2, h3, h4, h5, h6 {
   font-size: 2.1rem;
   text-transform: uppercase;
   padding-bottom: 1.75rem;
   font-weight: 500;
   max-block-size: 70%;
}

main > p {
   padding-bottom: 2.5rem;
}

dl {
   padding: 0.5rem 0 1.5rem;
}

dt {
   text-transform: uppercase;
   font-size: 1.5rem;
   font-weight: 500;
}

dd::before {
   padding-left: 0.75rem;
   content: "༶   ";
}

a:link, a:visited {
   color: var(--clr-blue);
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}


#content {
   font-size: clamp(1rem, 80ch, var(--fs-xl));
   /* temporary */
   padding-top: 3.75rem;
}

.center {
   text-align: center;
}

#header {
   background-color: var(--clr-white);
}

#banner {
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1/-1;

   width: 100vw;
   height: 20%;
}

.sidebar {
   display: flex;
   /*display: grid;
   grid-template-columns: repeat(5fr, minmax(200px, 1fr) 5%);
   /*grid-template-columns: 70% 20%;*/
   flex-wrap: wrap;
   gap: 0.5rem;
}

.wrapper {
   display: flex;
   flex-direction: column;
   gap: 3.5rem;
}

@media (min-width: 601px) {
   .wrapper {
      /* Change the direction to a column layout */
      flex-direction: row;
   }
}

.col1 {
   flex:3;
}

.col2 {
   flex:1;
}

.col2 > * {
   margin-bottom: 2rem;
}



/*
.wrap {
   display: flex;
   flex-wrap: wrap;
}

.wrap > * {
   margin: 0 3rem;
   flex: 1 1 200px;
}*/

.stacked {
   display: grid;
   grid-template-rows: repeat(3, 1fr);
}

.stacked > * {
   grid-column: 1 / -1;
   grid-row: 1 / -1;
}







/* ******************************************************************** #GRID */

/* Sizes >>>>>>>>>
   phones:   600px
   tablets:  768px
   laptops:  992px
   screens: 1200px
*/

#container {
   min-height: 100%;
   display: grid;
   grid-template-columns: 10% 1fr 10%;
   /*grid-template-rows: auto 1fr auto;*/
}

#header {
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 2/3;


/*
   display: flex;
   justify-content: space-around;
   margin: 1rem 0;*/
}

#content {
   display: grid;
   /*grid-template-columns: 1fr minmax(80%, 1fr) 1fr;*/
   grid-template-columns: subgrid;
   grid-column: 2/3;
   align-self: start;
}

/*#content > * {
   grid-column: 2 / 3;
}*/



#sidebar {
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 2/3;

/*
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 2rem;
   align-content: flex-start;
   padding: 3.75rem 2.5rem;
   */
}

.sidebar-wrap {
   /*display: grid;
   grid-template-columns: subgrid;
   grid-column: 2/3;*/


   margin: 4rem 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 2rem;
}

#footer {
   display: grid;
   /*grid-template-columns: 1fr minmax(80%, 1fr) 1fr;*/
   grid-template-columns: subgrid;
   grid-column: 1/-1;
}

.media, .copyright {
   grid-column: 2 / 3;
   row-gap: 0.5rem;

   display: grid;
   grid-template-columns: repeat(2, 1fr);
   /* new */
   grid-template-rows: 2.5rem 1fr;
}

.media {
   padding: 3rem 0;
}

.media p {
   grid-column: 1 / 3;
   /* new */
   grid-row: 1 / 2;
}

.social {
   grid-column: 1 / 2;

   display: flex;
}

.member {
   grid-column: 1 / 2;
   margin-top: 1rem;

   display: flex;
}

   .member > figure {
      padding-right: 0.5rem;
}
/*
.member > * {
   flex-shrink: 1;
   flex-basis: auto;
}*/

@media (min-width: 601px) {
   .member {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      justify-self: end;
      margin-top: 3rem;
      /*max-width: 90%;*/
   }
   .member > figure {
      align-self: center;
   }

}

.copyright {
   display: flex;
   flex-wrap: wrap;
   padding: 1rem 0;

}

.copyright p:last-child {
   padding-left: 1rem;
}

@media (min-width: 601px) {
   .copyright > * {
      grid-row: 1 / 1;
   }

   .copyright p:last-child {
      grid-column: 2 / 3;
      margin: 0 0 0 auto;
   }
}

.slideshow {
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1/-1;
}



/* ******************************************************************* #THEME */
#container {

}

#header {

}

#content {

}

#sidebar {

}

#footer {
   color: var(--clr-white);
   background: var(--clr-dark);
}

.inverse {
   background: var(--clr-white);
}

.full-bleed {
   box-shadow: 0 0 0 100vmax var(--clr-white);
   clip-path: inset(0 -100vmax);
}

.media p:first-child {
   font-size: 1.5rem;
   font-weight: 400;
}

.social svg {
   fill: var(--clr-white);
   stroke: var(--clr-white);
}

.social svg:hover {
   fill: var(--clr-black);
   stroke: var(--clr-dark);
}

.member svg {
   fill: var(--clr-white);
   stroke: var(--clr-white);
}

.member svg:hover {
   fill: var(--clr-black);
   stroke: var(--clr-dark);
}

.copyright, .copyright a {
   color: hsl(0 0% 0%);
   text-decoration: none;
}

.copyright a:hover {
   color: var(--clr-black);
   text-decoration: underline;
}


.imginfo {
  margin-bottom: 1rem;
  position: relative;
  margin-bottom: 2.5rem;
}
.imginfo img {
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  /* For Safari 3.1 to 6.0 */
  transition: opacity 0.5s;
  border-radius: 5px;
}

.imginfo figcaption {
   font-size: 60%;
  padding: 10px;
  line-height: 1.5;
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
  color: var(--clr-white);
  background-color: var(--clr-dark);
  opacity: 0.7;
}

.imginfo figcaption .fig-title {
  font-weight: 700;
}
.imginfo figcaption .fig-author {
  font-weight: 300;
  font-size: 0.8rem;
}

#content  {
   padding-bottom: 2.5rem;
}

h1 > p {
   text-transform: lowercase;
   font-size: 70%;
   color: var(--clr-darkl);
}

ul > li:last-child {
   margin-bottom: 2rem;
}

.inline {
   padding-bottom: 2rem;
}

/* ***************************************************************** #NAVMAIN */










































































/* ******************************************************************* #CARDS */
.card {
   overflow: hidden;

   width: calc(19 * 1rem); /* Box dimensions */


   border-radius: 4px; /* Styling */
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
               0 3px 1px -2px rgba(0,0,0,0.12),
               0 1px 5px 0 rgba(0,0,0,0.2);
   transition: box-shadow 0.56s ease-in-out; /* Animation */
}

.card:hover { /* Shows an outer shadow */
   box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14),
               0 9px 46px 8px rgba(0,0,0,0.12),
               0 11px 15px -7px rgba(0,0,0,0.2);
}

.card__title {
   padding: var(--space-e);
   color: var(--clr-white);
   font-size: 2rem;
   line-height: 1;
   font-weight: 500;
}

.dark {
   color: var(--clr-dark);
}

.card__btn {
   grid-row: 3 / 3;
   align-self: center;


   display: inline-block;
   width: 150px;
   height: 48px;

   background: transparent;
   border: 1px solid var(--clr-white);




   color: var(--clr-white) !important;
   font-family: -system-ui, sans-serif;

   margin-left: 2rem;
}
/*
.card__btn > a {
   font-size: 1.25rem;
   color: var(--clr-white);
   text-decoration: none;
}

.card__btn > a:hover {
   color: var(--clr-dark);
   border: 1px solid var(--clr-white);
}

.card__btn:hover {
   border: 0.125rem solid var(--clr-dark);
}

.card__btn:hover {
   background: var(--clr-white);
   transition: all 0.3s ease;
}*/



.card__btn {
   display: inline-block;
   padding: 16px 0;
   /*color: #fff !important;*/
   text-decoration: none;
   position: relative;
   background: transparent;
   border: 1px solid #e1e1e1;
   font: 12px/1.2 "Oswald", sans-serif;
   letter-spacing: 0.4em;
   text-align: center;
   text-indent: 2px;
   text-transform: uppercase;
   transition: color 0.1s linear 0.05s;
}

.card__btn::before {
   content: "";
   display: block;
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   height: 1px;
   background: #e1e1e1;
   z-index: 1;
   opacity: 0;
   transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}

.card__btn::after {
   transition: border 0.1s linear 0.05s;
}

.card__btn .btn-inner {
   position: relative;
   z-index: 2;
}

.card__btn:hover {
   color: #373737 !important;
   transition: color 0.1s linear 0s;
}

.card__btn:hover::before {
   top: 0;
   height: 100%;
   opacity: 1;
   transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}

.card__btn:hover::after {
   border-color: #373737;
   transition: border 0.1s linear 0s;
}

.address > p {
   padding-bottom: 2rem;
}

/* Style all input fields */
input[type=text],input[type=email], select, textarea {
  width: 100%; /* Full width */
  padding: 12px 20px; /* Some padding */
  margin: 8px 0; /* Some margin */
  display: inline-block; /* Allows width to work properly */
  border: 1px solid #ccc; /* Grey border */
  border-radius: 4px; /* Rounded corners */
  box-sizing: border-box; /* Ensures padding/border is inside width */
}

textarea {
   height: 37rem;
}

/* Style the submit button */
input[type=submit] {
  width: 100%;
  background-color: #04AA6D; /* Green background */
  color: white; /* White text */
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer; /* Pointer on hover */
}

/* Add a hover effect for the submit button */
input[type=submit]:hover {
  background-color: #45a049;
}


/* *************************************************************** #BANNER */
.banner {
   display: grid;

   grid-column: 1/-1;

   bacground: lightgreen;
   width: 100%;
   z-index: none;
}

.banner-img {
   width: 100%;
   height: 16rem;
   object-fit: cover;
   object-position: center left;
}







/* *************************************************************** #STORY */

.background {
   position: fixed;
   z-index: -1;
}

.s1 {
   position: absolute;
   top: -4rem;
   font-size: 8rem;
   font-weight: 800;
   text-transform: uppercase;
   opacity: 0.2;
}

.s2 {
   font-weight: 800;
   position: absolute;
   top: 3rem;
   right: -44rem;
   font-size: 4rem;
   text-transform: lowercase;
   opacity: 0.1;
}

.story-links {
   list-style: disc;
}


.story {
   max-width: 960px;
   border-radius: 0.75rem;
   box-shadow: 24px 24px 80px rgba(0, 0, 0, 0.1);
   padding: 20px 20px 28px 20px;
   box-sizing: border-box;
   margin: 20px;
   display: flex;
   flex-direction: column;
}
@media (min-width: 576px) {
   .story {
      flex-direction: row;
      align-items: center;
      margin: 40px;
      padding: 32px;
   }
}

.story-thumbnail {
   width: 100%;
   max-height: 300px;
/* border-radius: 0.75rem; */
   object-fit: cover;
   margin-bottom: 18px;
}
@media (min-width: 576px) {
   .story-thumbnail {
      width: 100%;
      max-height: none;
      min-height: 15rem;
      margin-bottom: 0;
   }
}

@media (min-width: 576px) {
   .story-content {
      width: 90%;
      padding-left: 2rem;
   }
}

.story-date {
   display: block;
   font-family: var(--font-family-secondary);
   font-size: var(--font-size-caption);
   line-height: var(--line-height-caption);
   text-transform: uppercase;
   color: var(--color-text);
   margin-bottom: 6px;
}
@media (min-width: 576px) {
   .story-date {
      margin-bottom: 8px;
   }
}

.story-title {
   font-family: var(--font-family-primary);
   font-size: var(--font-size-title);
   line-height: var(--line-height-title);
   color: var(--color-text);
   -webkit-box-decoration-break: clone;
               box-decoration-break: clone;
   background-image: linear-gradient(90deg, var(--color-highlight-primary), var(--color-highlight-secondary));
   background-size: 100% 42%;
   background-repeat: no-repeat;
   background-position: 0 85%;
   padding: 0 4px;
   margin-left: -4px;
}