@charset "UTF-8";
/*!
 Theme Name:   Benjamin Wilkerson Tousley
 Description:  Benjamin Wilkerson Tousley
 Author:       Frederik Delmotte
 Author URI:   http://frederikdelmotte.com
 Version:      1.0.0
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/* 
 * variables
 */
/* Default Equations */
/* Penner Equations (approximated) originally created by @robpenner */
/* 
 * mixins
 */
/* 
 * functions
 */
/* 
 * keyframe animation
 */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-moz-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
/* 
 * fonts

@font-face {
	font-family: 'fontname';
	src: url('fonts/fontname.otf') format('opentype');
	font-style: normal;
	font-stretch: normal;
}

*/
/*
 * root
 */
:root {
  --color: #000;
  --background: #ccc;
  --mono: #ccc; }

/* 
 * global
 */
h1, h2, h3, p, a, ul li, details summary {
  color: inherit; }

a {
  color: inherit;
  text-decoration: none;
  outline: none; }

ul {
  list-style: none; }

img {
  padding: 0;
  margin: 0;
  display: block; }

img,
video {
  -moz-user-select: -moz- none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  -moz-user-drag: -moz- none;
  -webkit-user-drag: none;
  user-drag: none; }

main, section, aside, div {
  position: relative; }

/* 
 * typography
 */
body {
  font-family: 'Inter', sans-serif; }

h1, h2, h3, p, a, span, ul li, details summary {
  font-style: normal;
  font-stretch: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em; }

strong {
  font-weight: normal; }

i {
  font-style: normal; }

/* 
 * layout
 */
body {
  background: var(--background);
  color: var(--color);
  transition: color 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75);
  /* 
   * states
   */ }
body.projects {
  /* removed patterned background to prevent visible bars during navigation */
  background-image: none;
}

/* Force a solid black background to hide pattern during transitions
   and when you prefer a darker backdrop. Use cautiously as this
   overrides theme variables. */
body.force-black {
  background: #000 !important;
}

/* Convenience: if user wants immediate global black background, add `force-black` to `<body>` in HTML */
/* (global override removed so theme toggles work correctly) */
  body #grid {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: flex;
    gap: 16px;
    padding: 0 16px;
    z-index: 999;
    pointer-events: none;
    display: none; }
    body #grid span {
      display: block;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 0, 0.2); }
  body header {
    position: relative;
    margin: 16px 16px 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2; }
    body header > a.color {
      display: block;
      border-radius: 6px;
      width: 12px;
      height: 12px;
      will-change: background;
      transition: background 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75); }
    body header > ul li {
      display: flex;
      gap: 16px; }
    body header > ul.index {
      position: absolute;
      top: 40px;
      left: 0px;
      display: none; }
      body header > ul.index li:nth-of-type(2) {
        position: absolute;
        top: 0;
        left: calc( ( ( ( 100vw - ( ( 6 - 1 ) * 16px ) - ( 2 * 16px ) ) / 6 ) * 1 ) + ( ( 1 - 1 ) * 16px ) + 16px ); }
        body header > ul.index li:nth-of-type(2) a {
          white-space: nowrap; }
    body header > ul.nav {
      position: absolute;
      right: 28px; }
  body main {
    transition: opacity 0.25s cubic-bezier(0.25, 0.25, 0.75, 0.75); }
  body.projects header ul.index, body.category header ul.index {
    display: block; }
    body.projects header ul.index li a, body.category header ul.index li a {
      display: none; }
  body.projects header ul.nav li:nth-of-type(2), body.category header ul.nav li:nth-of-type(2) {
    display: none; }
  body.projects main section, body.category main section {
    margin: calc( ( var(--vh, 1vh ) * 50 ) - 48px ) 16px calc( ( var(--vh, 1vh ) * 50 )  ) 16px; }
    body.projects main section nav a, body.category main section nav a {
      display: block; }
      body.projects main section nav a video,
      body.projects main section nav a img,
      body.projects main section nav a svg, body.category main section nav a video,
      body.category main section nav a img,
      body.category main section nav a svg {
        display: none; }
      body.projects main section nav a > span span:nth-of-type(2), body.category main section nav a > span span:nth-of-type(2) {
        opacity: .5; }
  body.projects.list header ul.index > li:nth-of-type(1) a:nth-of-type(1), body.category.list header ul.index > li:nth-of-type(1) a:nth-of-type(1) {
    display: block; }
  body.projects.list main section nav a, body.category.list main section nav a {
    opacity: 0.25; }
    body.projects.list main section nav a video,
    body.projects.list main section nav a img,
    body.projects.list main section nav a svg, body.category.list main section nav a video,
    body.category.list main section nav a img,
    body.category.list main section nav a svg {
      position: fixed;
      width: calc( ( ( ( 100% - ( ( 6 - 1 ) * 16px ) - ( 2 * 16px ) ) / 6 ) * 4 ) + ( ( 4 - 1 ) * 16px ) );
      aspect-ratio: 1;
      object-fit: contain;
      bottom: 64px;
      left: calc( ( ( ( 100vw - ( ( 6 - 1 ) * 16px ) - ( 2 * 16px ) ) / 6 ) * 1 ) + ( ( 1 - 1 ) * 16px ) + 32px );
      z-index: 4; }
    body.projects.list main section nav a.img, body.category.list main section nav a.img {
      opacity: 1; }
      body.projects.list main section nav a.img video,
      body.projects.list main section nav a.img img,
      body.projects.list main section nav a.img svg, body.category.list main section nav a.img video,
      body.category.list main section nav a.img img,
      body.category.list main section nav a.img svg {
        display: block; }
  body.projects.grid header ul.index > li:nth-of-type(1) a:nth-of-type(2), body.category.grid header ul.index > li:nth-of-type(1) a:nth-of-type(2) {
    display: block; }
  body.projects.grid main section, body.category.grid main section {
    margin: calc( ( var(--vh, 1vh ) * 50 ) - 48px ) 16px calc( ( var(--vh, 1vh ) * 50 )  ) calc( ( ( ( 100% - ( ( 6 - 1 ) * 16px ) - ( 2 * 16px ) ) / 6 ) * 1 ) + ( ( 1 - 1 ) * 16px ) + 32px ); }
  body.projects.grid main section nav a, body.category.grid main section nav a {
    width: calc( ( ( ( 100% - ( ( 5 - 1 ) * 16px ) - ( 2 * 0px ) ) / 5 ) * 4 ) + ( ( 4 - 1 ) * 16px ) );
    margin-bottom: 120px; }
    body.projects.grid main section nav a video,
    body.projects.grid main section nav a img,
    body.projects.grid main section nav a svg, body.category.grid main section nav a video,
    body.category.grid main section nav a img,
    body.category.grid main section nav a svg {
      display: block;
      width: 100%;
      margin-bottom: 1em; }
  body.projects.date header ul.index > li:nth-of-type(2) a:nth-of-type(1), body.category.date header ul.index > li:nth-of-type(2) a:nth-of-type(1) {
    display: block; }
  body.projects.a_z header ul.index > li:nth-of-type(2) a:nth-of-type(2), body.category.a_z header ul.index > li:nth-of-type(2) a:nth-of-type(2) {
    display: block; }
  body.project header ul.nav li:nth-of-type(1) {
    display: none; }
  body.project main {
    position: absolute;
    top: 0; }
  body.project main section#project {
    width: 100vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100); }
    body.project main section#project #project-slides {
      /* safari blink fix */
      -webkit-backface-visibility: hidden;
      height: 100%;
      font-size: 0;
      white-space: nowrap;
      z-index: 1;
      will-change: transform;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none; }
      body.project main section#project #project-slides * {
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        -webkit-perspective: none; }
      body.project main section#project #project-slides::-webkit-scrollbar {
        display: none; }
      body.project main section#project #project-slides.left {
        cursor: w-resize; }
      body.project main section#project #project-slides.right {
        cursor: e-resize; }
      body.project main section#project #project-slides.disableSnapping {
        scroll-snap-type: none; }
      body.project main section#project #project-slides > div {
        scroll-snap-align: center; }
      body.project main section#project #project-slides > div {
        white-space: nowrap;
        width: 100vw;
        height: 100%;
        display: inline-flex;
        vertical-align: top;
        justify-content: center;
        align-items: center; }
        body.project main section#project #project-slides > div > div {
          display: flex;
          z-index: 1;
          width: 100%;
          height: 100%;
          transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
          transform-origin: top center;
          will-change: transform;
          justify-content: center;
          align-items: center;
          /* safari fix */ }
          body.project main section#project #project-slides > div > div video,
          body.project main section#project #project-slides > div > div img,
          body.project main section#project #project-slides > div > div svg {
            max-width: 100%;
            max-height: 100%; }
          body.project main section#project #project-slides > div > div svg {
            width: 100%; }
        body.project main section#project #project-slides > div.small > div, body.project main section#project #project-slides > div.medium > div, body.project main section#project #project-slides > div.large > div {
          height: calc( 100% - 240px );
          width: calc( 100% - ( 16px * 2 ) ); }
        body.project main section#project #project-slides > div.cover > div video,
        body.project main section#project #project-slides > div.cover > div img {
          height: 100%;
          object-fit: cover; }
    body.project main section#project #project-info {
      position: absolute;
      z-index: 2;
      bottom: 0;
      margin: 16px;
      width: calc( 100% - 32px );
      display: flex;
      flex-flow: column-reverse; }
      body.project main section#project #project-info h2,
      body.project main section#project #project-info #project-info-details {
        transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
        will-change: opacity; }
      body.project main section#project #project-info h2 span:nth-of-type(2) {
        opacity: .5; }
      body.project main section#project #project-info #project-info-details {
        margin-bottom: 1em; }
        body.project main section#project #project-info #project-info-details.more > a {
          cursor: s-resize;
          opacity: 1;
          transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); }
          body.project main section#project #project-info #project-info-details.more > a span {
            margin-right: 5px; }
          body.project main section#project #project-info #project-info-details.more > a:after {
            content: '…'; }
        body.project main section#project #project-info #project-info-details.more p {
          display: none; }
          body.project main section#project #project-info #project-info-details.more p a {
            text-decoration: underline; }
      body.project main section#project #project-info #project-info-counter {
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: right;
        font-size: 0; }
        body.project main section#project #project-info #project-info-counter span.next {
          display: inline-block;
          width: 0;
          white-space: nowrap;
          overflow: hidden;
          vertical-align: bottom; }
          body.project main section#project #project-info #project-info-counter span.next span {
            white-space: nowrap; }
            body.project main section#project #project-info #project-info-counter span.next span:nth-of-type(1) {
              padding-left: 20px; }
            body.project main section#project #project-info #project-info-counter span.next span:nth-of-type(2) {
              opacity: .5; }
    body.project main section#project.details #project-slides {
      cursor: n-resize; }
      body.project main section#project.details #project-slides > div:not(.cover) > div {
        transform: scale(0.8); }
    body.project main section#project.details #project-info #project-info-details.more > a {
      opacity: 0; }
    body.project main section#project.next #project-info h2,
    body.project main section#project.next #project-info #project-info-details {
      opacity: 0;
      pointer-events: none; }
  body.info header ul {
    /*
    &.nav li:nth-of-type(2){
    	display: none;
    }
    */ }
    body.info header ul.nav li:nth-of-type(1) {
      display: none; }
  body.info main section {
    padding: 120px calc( ( ( ( 100% - ( ( 6 - 1 ) * 16px ) - ( 2 * 16px ) ) / 6 ) * 1 ) + ( ( 1 - 1 ) * 16px ) + 32px ) 120px 16px;
    display: flex;
    flex-direction: column;
    gap: 120px; }
    body.info main section ul li.label {
      opacity: .5; }
  body.init {
    transition: none; }
    body.init header a.color {
      transition: none; }
  body.intro {
    pointer-events: none; }
  body.loading * {
    cursor: wait; }
  body.loading main {
    opacity: .25; }

  body.mono {
    background: var(--background);
    color: var(--color); }
    body.mono header a.color {
      background: var(--color); }
    body.mono.projects.list main section nav a:before, body.mono.category.list main section nav a:before {
      background: var(--color); }
    body.mono svg {
      fill: var(--color); }
  body.dark {
    background: #000;
    color: #fff; }
    body.dark header a.color {
      background: #fff; }
    body.dark.projects.list main section nav a:before, body.dark.category.list main section nav a:before {
      background: #fff; }
    body.dark svg {
      fill: #fff; }
  body.light {
    background: #fff;
    color: #000; }
    body.light header a.color {
      background: #aaa; }
    body.light.projects.list main section nav a:before, body.light.category.list main section nav a:before {
      background: #000; }
    body.light svg {
      fill: #000; }

/* 
 * media queries
 */
@media screen and (min-width: 760px) {
  h1, h2, h3, p, a, span, ul li, details summary {
    font-size: 18px;
    line-height: 28px; } }
@media screen and (min-width: 960px) {
  h1, h2, h3, p, a, span, ul li, details summary {
    font-size: 21px;
    line-height: 32px; } }
@media screen and (min-width: 1020px) {
  body #grid {
    gap: 24px;
    padding: 0 24px; }

  h1, h2, h3, p, a, span, ul li, details summary {
    font-size: 24px;
    line-height: 36px; }

  body header {
    margin: 24px; }
    body header > a.color {
      border-radius: 10px;
      width: 20px;
      height: 20px; }
    body header > ul li {
      gap: 24px; }
    body header > ul.index {
      top: 0;
      left: calc( ( ( ( 100% - ( ( 12 - 1 ) * 24px ) - ( 2 * 0px ) ) / 12 ) * 4 ) + ( ( 4 - 1 ) * 24px ) + 24px ); }
      body header > ul.index li:nth-of-type(2) {
        left: calc( ( ( ( 100vw - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 1 ) + ( ( 1 - 1 ) * 24px ) + 24px ); }
    body header > ul.nav {
      right: 44px; }
  body.projects main section, body.category main section {
    margin: 160px 24px 160px calc( ( ( ( 100% - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 1 ) + ( ( 1 - 1 ) * 24px ) + 48px ); }
  body.projects.list main section nav a, body.category.list main section nav a {
    opacity: initial;
    margin-bottom: 0; }
    body.projects.list main section nav a video,
    body.projects.list main section nav a img,
    body.projects.list main section nav a svg, body.category.list main section nav a video,
    body.category.list main section nav a img,
    body.category.list main section nav a svg {
      position: fixed;
      width: calc( ( ( ( 100vw - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 4 ) + ( ( 4 - 1 ) * 24px ) );
      top: calc( 160px + 36px + 16px );
      bottom: auto;
      right: calc( ( ( ( 100vw - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 1 ) + ( ( 1 - 1 ) * 24px ) + 48px );
      left: auto; }
    body.projects.list main section nav a:before, body.category.list main section nav a:before {
      content: '';
      width: 0px;
      height: 2px;
      top: 18px;
      display: block;
      float: left;
      position: relative;
      transition: background 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75), width 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), margin 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); }
    body.projects.list main section nav a:hover:before, body.category.list main section nav a:hover:before {
      width: 24px;
      margin-right: 12px; }
    body.projects.list main section nav a:hover video,
    body.projects.list main section nav a:hover img,
    body.projects.list main section nav a:hover svg, body.category.list main section nav a:hover video,
    body.category.list main section nav a:hover img,
    body.category.list main section nav a:hover svg {
      display: block;
      pointer-events: none; }
    body.projects.list main section nav a > span, body.category.list main section nav a > span {
      margin-bottom: 0; }
      body.projects.list main section nav a > span span, body.category.list main section nav a > span span {
        display: inline; }
  body.projects.grid main section, body.category.grid main section {
    margin: 160px calc( ( ( ( 100% - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 1 ) + ( ( 1 - 1 ) * 24px ) + 48px ) 160px calc( ( ( ( 100% - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 1 ) + ( ( 1 - 1 ) * 24px ) + 48px ); }
  body.projects.grid main section nav, body.category.grid main section nav {
    display: flex;
    flex-wrap: wrap;
    gap: calc( ( ( 100vw - 312px ) / 12 ) + 48px ); }
    body.projects.grid main section nav a, body.category.grid main section nav a {
      width: calc(  ( 100% - ( ( ( ( 100vw - 312px ) / 12 ) + 48px ) * 2 ) ) / 3  );
      margin-bottom: 120px; }
      body.projects.grid main section nav a video,
      body.projects.grid main section nav a img,
      body.projects.grid main section nav a svg, body.category.grid main section nav a video,
      body.category.grid main section nav a img,
      body.category.grid main section nav a svg {
        aspect-ratio: 1;
        max-height: 100%;
        object-fit: contain; }
  body.project main section#project div#project-slides > div.small > div, body.project main section#project div#project-slides > div.medium > div, body.project main section#project div#project-slides > div.large > div {
    height: calc( 100% - 240px ); }
  body.project main section#project div#project-slides > div.small > div {
    width: calc( ( ( ( 100% - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 4 ) + ( ( 4 - 1 ) * 24px ) ); }
  body.project main section#project div#project-slides > div.medium > div {
    width: calc( ( ( ( 100% - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 6 ) + ( ( 6 - 1 ) * 24px ) ); }
  body.project main section#project div#project-slides > div.large > div {
    width: calc( ( ( ( 100% - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 8 ) + ( ( 8 - 1 ) * 24px ) ); }
  body.project main section#project div#project-slides > div.bleed > div {
    width: 100%; }
  body.project main section#project div#project-info {
    width: calc( 100% - 48px );
    margin: 24px;
    display: block;
    flex-flow: unset; }
    body.project main section#project div#project-info #project-info-details {
      margin: 0;
      position: absolute;
      bottom: 0;
      left: calc( ( ( ( 100vw - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 6 ) + ( ( 6 - 1 ) * 24px ) + 24px );
      width: calc( ( ( ( 100vw - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 5 ) + ( ( 5 - 1 ) * 24px ) ); }
  body.project main section#project.details div#project-slides > div:not(.cover) > div {
    transform: scale(0.75); }
  body.info main section {
    padding: 160px calc( ( ( ( 100% - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 5 ) + ( ( 5 - 1 ) * 24px ) + 48px ) 160px calc( ( ( ( 100% - ( ( 12 - 1 ) * 24px ) - ( 2 * 24px ) ) / 12 ) * 1 ) + ( ( 1 - 1 ) * 24px ) + 48px ); } }

/* Make project images clickable without changing size or position */
#project-slides .project-link {
  display: contents;
}

#project-slides .project-link img {
  display: block;
}

/* Fallback if display:contents has browser issues */
@supports not (display: contents) {
  #project-slides .project-link {
    display: inline-block;
    line-height: 0;
    font-size: 0;
  }
}

/* Pure CSS Chrome Tabs - Info Page */
body.info .tabs-section {
  padding: 120px 16px 32px;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

body.info .tabs-section p {
  font-size: 24px;
  line-height: 32px;
  margin: 0;
  text-align: center;
  font-weight: 500;
}

body.info .subtitle {
  font-size: 16px;
  font-weight: normal;
  opacity: 0.7;
  display: block;
  margin-top: 8px;
}

body.info .tab-container {
  position: relative;
}

body.info .tab-input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

body.info .tab-nav {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 12px;
  margin-bottom: 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.info .tab-nav::-webkit-scrollbar { display: none; }

body.info .tab-btn {
  background: none;
  border: none;
  padding: 12px 24px 12px 20px;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  opacity: 0.6;
  transition: opacity 0.25s cubic-bezier(0.25,0.25,0.75,0.75);
  margin-right: 8px;
}

body.info .tab-btn:hover { opacity: 0.8; }

body.info .tab-input:checked + .tab-nav .tab-btn,
body.info #tab-summary:checked ~ .tab-nav .tab-btn:nth-of-type(1),
body.info #tab-skills:checked ~ .tab-nav .tab-btn:nth-of-type(2),
body.info #tab-experience:checked ~ .tab-nav .tab-btn:nth-of-type(3),
body.info #tab-certs:checked ~ .tab-nav .tab-btn:nth-of-type(4),
body.info #tab-contact:checked ~ .tab-nav .tab-btn:nth-of-type(5),
body.info #tab-graph:checked ~ .tab-nav .tab-btn:nth-of-type(6) {
  opacity: 1;
  font-weight: 500;
}

body.info .tab-input:checked + .tab-nav .tab-btn::after,
body.info #tab-summary:checked ~ .tab-nav .tab-btn:nth-of-type(1)::after,
body.info #tab-skills:checked ~ .tab-nav .tab-btn:nth-of-type(2)::after,
body.info #tab-experience:checked ~ .tab-nav .tab-btn:nth-of-type(3)::after,
body.info #tab-certs:checked ~ .tab-nav .tab-btn:nth-of-type(4)::after,
body.info #tab-contact:checked ~ .tab-nav .tab-btn:nth-of-type(5)::after,
body.info #tab-graph:checked ~ .tab-nav .tab-btn:nth-of-type(6)::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20px;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px 1px 0 0;
}

body.info .tab-content {
  min-height: 200px;
}

body.info .tab-pane {
  display: none;
}

body.info #tab-summary:checked ~ .tab-content #content-summary,
body.info #tab-skills:checked ~ .tab-content #content-skills,
body.info #tab-experience:checked ~ .tab-content #content-experience,
body.info #tab-certs:checked ~ .tab-content #content-certs,
body.info #tab-contact:checked ~ .tab-content #content-contact,
body.info #tab-graph:checked ~ .tab-content #content-graph {
  display: block;
  animation: tabSlideIn 0.3s cubic-bezier(0.25,0.25,0.75,0.75);
}

@keyframes tabSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive & Dark mode */
@media (min-width: 760px) {
  body.info .tabs-section p { font-size: 28px; }
  body.info .tab-btn { font-size: 18px; }
}

@media (min-width: 1020px) {
  body.info .tabs-section { padding: 160px 24px 48px; }
}

body.dark .tab-nav { border-bottom-color: rgba(255,255,255,0.1); }
body.dark .tab-pane ul li { border-bottom: 1px solid rgba(255,255,255,0.05); }


body.info .tab-nav {
  justify-content: space-evenly !important;
  gap: 0 !important;
}

body.info .tab-btn {
  flex: 1 !important;
  max-width: 120px !important;
  margin: 0 !important;
}

#project-slides .large iframe {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: none;
  display: block;
  background: #050508;
  pointer-events: all;
}

/* Prevent the slide from intercepting iframe clicks */
#project-slides .large:has(iframe) {
  pointer-events: none;
}
#project-slides .large:has(iframe) iframe {
  pointer-events: all;
}