:root {
  --pink: #FF9AFF;
  --blue: #4575F7;
  --orange: #FF4D00;
  --yellow: #FFC900;
  --green: #7CB000;
}

[data-theme="light"] {
   --color-bg: #EAEAEA;
   --color-fg: #151515;
   --color-lk: #9429F9;
   --color-fg2:#000000;
}

[data-theme="dark"] {
   --color-bg: #151515;
   --color-fg: #BFBFBF;
   --color-lk: #FF9AFF;
   --color-fg2:#FFFFFF;
}


html {
  height: 100%;
  overflow: hidden;
}

* {
  scrollbar-width: thin; /* Options: auto, thin, none */
  scrollbar-color: var(--color-lk) var(--color-bg); /* thumb color | track color */
}

/* 2. WebKit Pseudo-elements (Chrome, Edge, Safari for advanced shapes/borders) */

/* The entire scrollbar area */
::-webkit-scrollbar {
  width: 12px;               /* Width of vertical scrollbar */
  height: 12px;              /* Height of horizontal scrollbar */
}

/* The track (background) of the scrollbar */
::-webkit-scrollbar-track {
  background: var(--color-bg);
  border-radius: 6px;
}

/* The draggable thumb (handle) */
::-webkit-scrollbar-thumb {
  background-color: var(--color-lk);
  border-radius: 6px;       /* Makes it round */
  border: 3px solid var(--color-bg); /* Creates padding between thumb and track */
  z-index: 12;
}

/* Optional: Handle hover state */
::-webkit-scrollbar-thumb:hover {
  background-color: #4f46e5;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: "Areal", sans-serif;
  font-size: 15.3px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;

}

#container {
  display: block;
  width: inherit;
  height: 100%;
  overflow-y: scroll;
  padding: 0px 12px 0px 12px;
  background: var(--color-bg);
}

#info {
  width: calc(30vw - 8px);
  height: 100vh;
  display: inline-block;
  background-color: none;
  padding: 22px 12px 0px 12px;
  float: left;
  box-sizing: border-box;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

#work {
  width: calc(50vw - 8px);
  height: 100vh;
  display: inline-block;
  background-color: none;
  padding: 22px 12px 196px 12px;
  float: left;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;

}

#randoms {
  width: calc(20vw - 8px);
  height: 100vh;
  display: inline-block;
  background-color: none;
  padding: 22px 12px 194px 12px;
  float: left;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;

}

.random {
  padding-bottom: 0px;
    padding-top: 22px;
    display: block;
    position: relative;
    height: auto;
    background: var(--color-bg);
    z-index: 10;
}


@font-face {
  font-family: 'Areal';
  src: url("../fonts/ABCArealSemiMono-Medium.woff2") format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Areal-Italic';
  src: url("../fonts/ABCArealSemiMono-MediumItalic.woff2") format('woff2');
  font-weight: normal;
  font-style: normal;
}


button {
  all: unset; /* Resets all properties to their initial or inherited values */
  cursor: pointer;
}

button:hover {
  color: var(--color-lk);
}

h1 {
  font-family: "Areal", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-size: 15.3px;
  letter-spacing:0;
  color: var(--color-fg);
  line-height: 22px;
  margin: 0;
  padding: 0;
  display: inline-block;
}

h2 {
  font-family: "Areal", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 15.3px;
  line-height: 22px;
  color: var(--color-fg);
  margin: 0;
  padding: 0;
  margin-bottom: 0px !important;
}

h2.proj-sub {
  text-indent: 0px;
}


h3 {
  font-family: "Areal", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-size: 15.3px;
  line-height: 22px;
  color: var(--color-fg);
  margin: 0;
  padding: 0;
}

p {
  font-family: "Areal", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  line-height: 22px;
  margin: 0 0 24px;
}

p.indent {
  text-indent: 48px;
}

.m-left {
  margin-left: 8px;
}

a.linkout {
  padding-top: 0px;
  color: var(--color-fg);
  opacity: 1;
  margin-right: 0px;
  text-decoration: underline;
}
span.italic {
  font-family: "Areal-Italic", sans-serif;
  font-weight:normal;
  font-style:normal;
  padding: 3px 2px 3px 0;
}

.img-contain {
  display: flex;          /* Places items side-by-side */
  align-items: center;    /* Vertically centers label and toggle */
  justify-content: space-between; /* Pushes toggle to the far right (optional) */
  gap: 24px;
  position:relative;
  padding: 0 ;
}

.controls{
  position:absolute;
  right:0px;
  top:-35px;
  display: flex;          /* Places items side-by-side */
  align-items: center;    /* Vertically centers label and toggle */
  justify-content: space-between; /* Pushes toggle to the far right (optional) */
  gap: 8px;
}

.arrow-left, .arrow-right {
  width: 32px;
  height: 32px;
  display: block;
  opacity:.5;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  padding: 7px 10px 7px 10px;
}

.arrow-left:hover, .arrow-right:hover {
  opacity:1;
}

.arrow-left:hover span, .arrow-right:hover span{
  color: var(--color-lk);
}

/* Cursor hint for click-to-advance carousels: a floating copy of the controls'
   font-based arrow (3x scale), following the pointer over whichever half it's on. */
.carousel-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px; /* center the 96x96 box on the pointer coordinates */
  padding: 0;
  font-size: 2em; /* scales with the inherited 15.3px glyph size, so it stays 3x if that changes */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  color: #ffffff;
  mix-blend-mode: difference;
}

.img-box.has-click-nav {
  cursor: none;
  touch-action: pan-y; /* let a horizontal drag reach JS as a swipe; vertical scroll stays native */
  -webkit-touch-callout: none; /* no iOS "save image" menu while dragging */
}

.proj-linkout {
  display: flex;          /* Places items side-by-side */
  align-items: center;    /* Vertically centers label and toggle */
  justify-content: space-between; /* Pushes toggle to the far right (optional) */
  gap: 4px;
  position: relative;
  flex-direction; row;
  padding-right: 10px;

}

.proj-title {
  margin-bottom: 8px;
}

input[type=checkbox]{
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
	cursor: pointer;
	text-indent: -9999px;
  width: 40px;
  height: 18px;
  background: var(--color-bg);
  border: 1px solid;
  border-color: var(--color-fg);
	display: block;
  border-radius: 22px;
	position: relative;
  padding: 0;
}

label:after {
	content: '';
	position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
	background: var(--color-fg);
  border-radius: 16px;
  transition: 0.15s;
}



input:checked + label {
	background: var(--color-bg);
}

input:checked + label:after {
  left: calc(100% - 3px);
	transform: translateX(-100%);

}

label:active:after {
  width: 34px;
  background: var(--color-lk);
}

a.linkout:hover {
  opacity: 1;
  color: var(--color-lk);
}

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

a:hover {
  opacity: 1;
  color: var(--color-lk);
}

.bot {
  width: auto;
  max-width: 1280px;
}


/* Keyboard-nav stop (see carousel.js). Match #work's top padding so the title
   counts as "already there" at scroll-top instead of needing its own keypress. */
[data-nav-stop] {
  scroll-margin-top: 22px;
}

#fixed-bottom {
  display:block;
  position: fixed;
  bottom:0;
  left: 0;
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-bg) 0%, transparent) 0%, /* 20% opaque */
    color-mix(in srgb, var(--color-bg) 100%, transparent) 60% /* 90% opaque */
  );
  width: calc(30vw - 8px);
  height:120px;
  z-index: 2;
}

#fixed-top {
  display:block;
  position: fixed;
  left:0;
  top: 0;
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-bg) 100%, transparent) 40%, /* 20% opaque */
    color-mix(in srgb, var(--color-bg) 0%, transparent) 100% /* 90% opaque */
  );
  width: calc(30vw - 8px);
  padding: 22px 0 0 12px;
  height:56px;
  z-index: 20;
}

.work-colo {
  display: block;
}

.colo-mobile {
  display: none;
}

.copyright {
  margin-top:72px;

}


.nav {
  height: auto;
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  background-color: none;
}

.intro {
  display: inline-block;
  float: left;
  margin-left: 12px;
  height: auto;
  width: auto;
}
.intro-2 {
  display: inline-block;
  float: right;
  position: absolute;
  margin-right: 16px;
  height: auto;
  right:0;
  width: auto;
}

.intro h1 {
  line-height: 22px;
}

#mode-switch {
  display: flex;          /* Places items side-by-side */
  align-items: center;    /* Vertically centers label and toggle */
  justify-content: space-between; /* Pushes toggle to the far right (optional) */
  gap: 0px;
  position:absolute;
  bottom: 20px;
  left:24px;
}

.expandable-content {
  max-height: 0;
  margin: 22px 0 30px;
  overflow: hidden;
  width: auto;
  transition: max-height 0.3s ease-out; /* Smooth transition */
}

.expandable-content.expanded {
  max-height: 1500px; /* Adjust as needed for your content */
  /* Or use height: auto; for dynamic content, but transition might be less smooth */
}

.expand-toggle {
  text-decoration: underline;
  margin-left: 8px;
  font-weight: normal;
}

.expand-toggle[aria-expanded="true"]::after {
  content: "Less"; /* Example for an indicator */
}

.expand-toggle[aria-expanded="false"]::after {
  content: "More";
}

.project, .project-last {
  padding-bottom: 12px;
  padding-top:22px;
  display:block;
  position:relative;
  height:auto;
  z-index: 2;
  background: var(--color-bg);
}

.project-last {
  padding-bottom: 0px;
}

.project h2, .random h2, .project-last h2 {
  display: inline-block;
}

.proj-detail-etc {
  width: 95%;
}

.img-box {
  width: 100%;
  height: auto;
  margin-bottom: 0;
  border-radius: 4px;
  background-color: var(--color-bg);
  overflow: hidden;
  object-fit: contain;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none; /* no highlight flash when clicking through slides quickly */
}

.img-box img, .img-box video {
  width: inherit;
  height: auto;
  vertical-align: middle;
  object-fit: contain;

}

.carousel-track {
  display: flex;
  transition: transform 0.3s ease;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
}

.img-box .carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.info-details {
  width: 100%;
  height: auto;
  bottom: 0px;
  position: relative;
  padding-bottom: 96px;
  margin-top:44px;

}

.section-title {
  position:relative;
  display: flex;          /* Places items side-by-side */
  align-items: center;    /* Vertically centers icon and title */
  justify-content: flex-start; /* Icon then title, packed left */
  gap: 8px;
  margin-bottom:22px;
}

.section-icon {
  display:block;
  flex: 0 0 auto;         /* Keep the icon at 26x12 instead of letting flex shrink it */
  width: 26px;
  height:12px;
}

.wrench {
  background-color: var(--color-fg);
  -webkit-mask-image: url("../img/wrench.svg");
  mask-image: url("../img/wrench.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
}

.dice {
  background-color: var(--color-fg);
  -webkit-mask-image: url("../img/dice.svg");
  mask-image: url("../img/dice.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
}

[data-scroll-top] {
  cursor: pointer;
}

[data-scroll-top]:hover {
  color: var(--color-lk);
}

.hidden-msg {
  position: fixed;
  left: calc(30vw + 4px);
  width: calc(50vw - 8px);
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  height: auto;
  bottom: 96px;
}

.hidden-msg h2 span {
  text-decoration:underline;
}

.logos {
  position: fixed;
  display: flex;          /* Places items side-by-side */
  align-items: center;    /* Vertically centers label and toggle */ /* Pushes toggle to the far right (optional) */
  gap: 8px;
  width: calc(20vw - 8px);
  right: 12px;
  bottom:64px;
}

.colo-mobile .logos {
  position: relative;
  width: 66px;
}

.info-image {
  width: calc(33.333vw - 144px);
  height: calc(33.333vw - 144px);
  background-color: var(--color-lk);
  -webkit-mask-image: url("../img/bluecifer.svg");
  mask-image: url("../img/bluecifer.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
}



.info-image-2 {
  width: calc(33.333vw - 144px);
  height: calc(33.333vw - 144px);
  background-color: var(--color-lk);
  -webkit-mask-image: url("../img/mac-se.svg");
  mask-image: url("../img/mac-se.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
}

.info-image-3 {
  width: calc(33.333vw - 144px);
  height: calc(33.333vw - 144px);
  background-color: var(--color-lk);
  -webkit-mask-image: url("../img/sthalvard.svg");
  mask-image: url("../img/sthalvard.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
}

.info-image-4 {
  width: calc(33.333vw - 168px);
  height: calc(33.333vw - 168px);
  background-color: var(--color-lk);
  -webkit-mask-image: url("../img/for-hire.svg");
  mask-image: url("../img/for-hire.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
}

span.italic:hover {

  color: var(--color-fg2);
  background-color: color-mix(in srgb, var(--color-fg) 20%, transparent);
  border-radius: 0px;


}

span.italic:hover .info-image {
  display: inline-block;
}

.hidden-content-js-1 {
  display: none; /* Initially hide the content div */
}

.hidden-content-js-2 {
  display: none; /* Initially hide the content div */
}

.hidden-content-js-3 {
  display: none; /* Initially hide the content div */
}
.hidden-content-js-4 {
  display: none; /* Initially hide the content div */
}

.show-content {
  display: block; /* Class to show the content */
}

button.mode {
  display: inline-block;
  right: 24px;
  bottom: 24px;
  position: absolute;
}

.item-cont {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 0px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-fg) 25%, transparent);
}

.employer {
  display: inline-block;
}

.job-title {
  display: inline-block;
}

.job-title p {
  font-weight: normal;
  opacity: .6;
}
.years {
  width:30%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: normal;
}

.item-last {
  margin-bottom: 24px;
}

.no-marg{
  margin-bottom: 0px;
}

.logo {
  width:44px;
  position:relative;
  display:block;
  margin-bottom:22px;
}

#logo-c {
  width: 44px;
  height: auto;
  display: block;
  cursor: pointer;
  overflow: visible;
  margin-inline: auto;
}

#logo-c .bg {
  fill: var(--color-fg);
  transition: fill 0.2s ease-out;
}

#logo-c.is-strobing .bg {
  animation: logo-c-strobe 0.5625s steps(1) infinite;
}

#logo-c.is-strobing .bg:nth-child(1)  { animation-delay: 0.45s; }
#logo-c.is-strobing .bg:nth-child(2)  { animation-delay: 0.3s; }
#logo-c.is-strobing .bg:nth-child(3)  { animation-delay: 0s; }
#logo-c.is-strobing .bg:nth-child(4)  { animation-delay: 0.15s; }
#logo-c.is-strobing .bg:nth-child(5)  { animation-delay: 0s; }
#logo-c.is-strobing .bg:nth-child(6)  { animation-delay: 0.15s; }
#logo-c.is-strobing .bg:nth-child(7)  { animation-delay: 0s; }
#logo-c.is-strobing .bg:nth-child(8)  { animation-delay: 0.15s; }
#logo-c.is-strobing .bg:nth-child(9)  { animation-delay: 0s; }
#logo-c.is-strobing .bg:nth-child(10) { animation-delay: 0.15s; }
#logo-c.is-strobing .bg:nth-child(11) { animation-delay: 0.45s; }
#logo-c.is-strobing .bg:nth-child(12) { animation-delay: 0.45s; }
#logo-c.is-strobing .bg:nth-child(13) { animation-delay: 0.45s; }
#logo-c.is-strobing .bg:nth-child(14) { animation-delay: 0.3s; }
#logo-c.is-strobing .bg:nth-child(15) { animation-delay: 0.3s; }
#logo-c.is-strobing .bg:nth-child(16) { animation-delay: 0.3s; }

@keyframes logo-c-strobe {
  0%  { fill: color-mix(in srgb, var(--color-lk) 100%, transparent); }
  33%  { fill: color-mix(in srgb, var(--color-lk) 75%, transparent); }
  66%  { fill: color-mix(in srgb, var(--color-lk) 50%, transparent); }
  100%  { fill: color-mix(in srgb, var(--color-lk) 25%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  #logo-c.is-strobing .bg {
    animation: none;
    fill: #ff0040;
  }
}


@media screen and (max-width: 960px) {
       /* Styles applied when the screen width is 768px or narrower */

      html, body {
        height: auto;
        overflow: visible;
      }

      #info {
        width: calc(100vw - 24px);
        height: auto;
        display: block;
        position: relative;
        overflow: visible;
        border-right: none;
      }

      .proj-detail-etc {
        width: 100%;
      }

      .hidden-msg {
        display: none;
      }

      .logos {
        display: none;
      }

      #work {
        width: calc(100vw - 24px);
        height: auto;
        display: block;
        position: relative;
        overflow: visible;
      }

      #randoms {
        width: calc(100vw - 24px);
        height: auto;
        display: block;
        position: relative;
        overflow: visible;
      }



      .img-contain {
        display: flex;          /* Places items side-by-side */
        align-items: center;    /* Vertically centers label and toggle */
        justify-content: space-between; /* Pushes toggle to the far right (optional) */
        gap: 8px;
        padding: 0;
      }



      #mode-switch {
        display: flex;          /* Places items side-by-side */
        align-items: center;    /* Vertically centers label and toggle */
        justify-content: space-between; /* Pushes toggle to the far right (optional) */
        gap: 0px;
        position:absolute;
        bottom: 20px;
        left:0px;
        right: 0;
        width:88px;
      }

      #fixed-bottom {
        position: relative;
        width: 100%;
        height: 44px;
      }

      #fixed-top {
        width: calc(100vw - 24px);
      }

      .info-details {
        padding: 0px;
      }
      .work-colo {
        display: none;
      }

      .colo-mobile {
        display: block;
        margin-bottom:48px;
        padding: 12px;
      }

      .bot {
        position: relative;
      }

      p.indent {
        text-indent: 48px;
      }

   }

   @media screen and (max-width: 480px) {
     .employer {
       display: block;
     }

     .job-title {
       display: block;
     }
   }