:root {
  color-scheme: light dark;
  --primary-color-dark: oklch(19.57% 0 0)
    /* #151515 */
  ;
  --primary-color-light: oklch(99.61% 0.008 98.87)
    /* #fffef8 */
  ;
  --primary-color: light-dark(oklch(19.57% 0 0), oklch(99.61% 0.008 98.87));
  --primary-background: light-dark(oklch(99.61% 0.008 98.87), oklch(19.57% 0 0));
  /* --primary-color: light-dark(#151515, #ffce00);
  --primary-background: light-dark(#ffce00, #151515); */
  --logo-url: light-dark(url("/images/logo-beyondfocus-light-v3.svg"),
      url("/images/logo-beyondfocus-dark-v3.svg"));
  --logo: light-dark("/images/logo-beyondfocus-light-v3.svg",
      "/images/logo-beyondfocus-dark-v3.svg"
    );
  --logo-url-light: url("/images/logo-beyondfocus-light-v2.svg");
  --logo-url-dark: url("/images/logo-beyondfocus-dark-v3.svg");
  --camera-icon-url: light-dark(url("/images/camera-dslr-light.svg"),
      url("/images/camera-dslr-dark.svg"));
  --highlight-color: light-dark(oklch(46.22% 0.3062 264.18)
      /* #0019ff */
      , oklch(86.91% 0.1776964642744734 91.31023417294985)
      /* #ffce00 */
    );
  /* --highlight-color: light-dark(#151515, #ffce00); */
  --heading-font-family: "Nanum Myeongjo", serif;
  --mono-font-family: Lekton, "Noto Sans Mono", monospace;
  --view-transition-name-8th-wonder: "stories/8th-wonder-hampi";
  --view-transition-name-8th-wonder-background-image: url("https://lh3.googleusercontent.com/tg1KpjzcEOr8IpjvDnAzwCoNJ-WkjfFb2d-1KMmAFNFqcMtwxEFqCynIwmtq9Fb_a-jI7fOcqbjd5pNPqrdULSp4G0Kf=s0");
}

/* For browsers that support clamp and container queries */
@supports (font-size: clamp(1rem, 1cqi, 1rem)) {
  :root {
    /* @link https://utopia.fyi/type/calculator?c=320,18,1.25,1728,20,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --step--2: clamp(0.7035rem, 0.7238rem + -0.0188cqi, 0.72rem);
    --step--1: clamp(0.9rem, 0.8914rem + 0.0429cqi, 0.9377rem);
    --step-0: clamp(1.125rem, 1.0966rem + 0.142cqi, 1.25rem);
    --step-1: clamp(1.4063rem, 1.3472rem + 0.2955cqi, 1.6663rem);
    --step-2: clamp(1.7578rem, 1.6525rem + 0.5265cqi, 2.2211rem);
    --step-3: clamp(2.1973rem, 2.0237rem + 0.8676cqi, 2.9607rem);
    --step-4: clamp(2.7466rem, 2.4738rem + 1.3637cqi, 3.9467rem);
    --step-5: clamp(3.4332rem, 3.0178rem + 2.0769cqi, 5.2609rem);

    /* @link https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=400&minRatio=1.25&maxFontSize=20&maxWidth=1728&maxRatio=1.333&steps=sm%2Cbase%2Cmd%2Clg%2Cxl%2Cxxl%2Cxxxl&baseStep=base&prefix=size&useContainerWidth=true&includeFallbacks=true&useRems=true&remValue=16&decimals=2&previewFont=Lekton&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280*/
    --size-sm: clamp(0.9rem, 0.05cqi + 0.89rem, 0.94rem);
    --size-base: clamp(1.13rem, 0.15cqi + 1.09rem, 1.25rem);
    --size-md: clamp(1.41rem, 0.31cqi + 1.33rem, 1.67rem);
    --size-lg: clamp(1.76rem, 0.56cqi + 1.62rem, 2.22rem);
    --size-xl: clamp(2.2rem, 0.92cqi + 1.97rem, 2.96rem);
    --size-xxl: clamp(2.75rem, 1.45cqi + 2.39rem, 3.95rem);
    --size-xxxl: clamp(3.43rem, 2.2cqi + 2.88rem, 5.26rem);
    --size-xxxxl: clamp(5rem, 3cqi + 3.5rem, 7rem);
    --size-xxxxxl: clamp(6rem, 3.5cqi + 4rem, 8rem);
    --size-xxxxxxl: clamp(7rem, 4cqi + 4.5rem, 9rem);
  }
}

/* For browsers that don't support clamp or container queries */
@supports not (font-size: clamp(1rem, 1cqi, 1rem)) {
  :root {
    --size-sm: 0.9rem;
    --size-base: 1.13rem;
    --size-md: 1.41rem;
    --size-lg: 1.76rem;
    --size-xl: 2.2rem;
    --size-xxl: 2.75rem;
    --size-xxxl: 3.43rem;
    --size-xxxxl: 4.5rem;
    --size-xxxxxl: 5.5rem;
    --size-xxxxxxl: 6.5rem;
  }

  @media screen and (min-width: 1728px) {
    :root {
      --size-sm: 0.94rem;
      --size-base: 1.25rem;
      --size-md: 1.67rem;
      --size-lg: 2.22rem;
      --size-xl: 2.96rem;
      --size-xxl: 3.95rem;
      --size-xxxl: 5.26rem;
      --size-xxxxl: 7rem;
      --size-xxxxxl: 8rem;
      --size-xxxxxxl: 9rem;
    }
  }
}

@view-transition {
  navigation: auto;
}

body {
  /* background: var(--primary-background) no-repeat left top; */
  background-color: var(--primary-background);
  /* background-size: 100vw 100vh; */
  background-size: cover;
  background-attachment: fixed;
  background-position: right top;
  background-blend-mode: overlay;
  color: var(--primary-color);
  padding-bottom: var(--size-sm);
  font-size: var(--step-0);
  font-family: "Nohemi", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

@media (prefers-color-scheme: light) and (min-width: 900px) {
  body {
    /* background-image: url("/images/ice_age.png"); */
    background-color: transparent;
    background-image: url('https://lh3.googleusercontent.com/_OLeDIPfj0q0RD4oj1ybkO1cuspW7y7GkEPkdbfLQAZ_hkxtRbJVvZfQODd9hAcNksmabiquu7bv7rjut-WH8fKuxR1nmA=s0');
    /* background-image:url('../images/background-image-light.avif'); */
    /* background-image: none; */
    background-image: url("../images/background-image-light.avif");
    /* background-blend-mode: color-burn; */

    &[view-transition-name="stories-8th-wonder-hampi"] {
      background-image: url("https://lh3.googleusercontent.com/UC8bNyxknc1cZ6LDIOvsJ37SxA-_P513LZaTtByuyMxKZNyQFDEFOHmIIa2yOa0vLmCDZWMcqMcybxw3Qf3U5-aPXN3Z=s0");
      background-color: var(--primary-background);
      background-blend-mode: color-burn;
    }

    &[view-transition-name="portfolio"],
    &[view-transition-name="profile"],
    &[view-transition-name="stories-banyan-clan"],
    &[view-transition-name="stories-beauty-beholder"],
    &[view-transition-name="stories-bengaluru-althide"],
    &[view-transition-name="stories-bonding-lonely-trees-lesser-mortals"],
    &[view-transition-name="stories-candle-lights-kindle-hopes"],
    &[view-transition-name="stories-cash-crunch"],
    &[view-transition-name="stories-covid"],
    &[view-transition-name="stories-fringes-of-civilization"],
    &[view-transition-name="stories-grateful-dead"],
    &[view-transition-name="stories-light-in-darkness"],
    &[view-transition-name="stories-metamorphosis"],
    &[view-transition-name="stories-model-beyond-gender"],
    &[view-transition-name="stories-namma-metro"],
    &[view-transition-name="stories-old-age-home"],
    &[view-transition-name="stories-ornate-jewellery-treasure-trove"],
    &[view-transition-name="stories-out-of-focus"],
    &[view-transition-name="stories-panorama-of-gomateshwara"],
    &[view-transition-name="stories-siddis"],
    &[view-transition-name="stories-sleep"],
    &[view-transition-name="stories-water-woes"],
    &[view-transition-name="stories-waves-of-woes"],
    &[view-transition-name="books-koovagam"],
    &[view-transition-name="calendars-transexual-calendar"] {
      background-image: none;
      background-color: var(--primary-background);
    }
  }
}

@media (prefers-color-scheme: dark) and (min-width: 900px) {
  body {
    background-image: url("../images/background-image-dark.avif");

    &[view-transition-name="portfolio"] {
      background-image: url("https://lh5.ggpht.com/5XEMBBoaf530Juqvw02XWh-Zx3rtK78EG2PkhsT2QCae-uhrRNX_hZ9mV0yFzwqjNAOm3NFu9iHQFm6TX140vpG56Hy6=s0");
    }

    &[view-transition-name="profile"] {
      background-image: url("https://lh3.googleusercontent.com/Hf-47K9HUkYPH9VIHkbTgYY7NPtc_h60cz8_uvQKZyMZ71yg9fsRK93WmauQlB4y0eo51WXkv33_6umFWdvEYOya54dA=s0");
    }

    &[view-transition-name="stories-8th-wonder-hampi"] {
      background-image: url("https://lh3.googleusercontent.com/tg1KpjzcEOr8IpjvDnAzwCoNJ-WkjfFb2d-1KMmAFNFqcMtwxEFqCynIwmtq9Fb_a-jI7fOcqbjd5pNPqrdULSp4G0Kf=s0");
    }

    &[view-transition-name="stories-beauty-beholder"] {
      background-image: url("https://lh3.googleusercontent.com/HxY2U0nl7PdrPdVvXsncTtiutoERJPRpnYECqfI_529B1-ckKfapwiyKu6hL7i_4zNNwIxF6w0PxySSNSENm1GHrfwHHgw=s0");
    }

    &[view-transition-name="stories-bengaluru-althide"] {
      background-image: url("https://lh3.googleusercontent.com/Tkl4XGFh_xypOzodP5VvJwoCgNylU0eawc_ZSmYiAshis4WkNd8aI4YcEayixf8UApTHuzz8nJ7O0KhImLLi0QzMfyf8sw=s0");
    }

    &[view-transition-name="stories-bonding-lonely-trees-lesser-mortals"] {
      background-image: url("https://lh3.googleusercontent.com/ch-a3_8yA2rP2MUfU8Q3JkzXXgo84BAkSwtevtEZ_MxbmjJg-DQY8y5yeoXqtl15gq62M6FQo2J57pDEdBHaaMxtI2sX=s0");
    }

    &[view-transition-name="stories-candle-lights-kindle-hopes"] {
      background-image: url("https://lh3.googleusercontent.com/rqZtKW2olZugMFU9cDJSTmn0Sofat8SMDfqLp1BZxE_ywe2CIfvfghTbBkdBGGwl7mlb3kmdEJzv6VEzfAYRsO_LAOQUmw=s0");
    }

    &[view-transition-name="stories-banyan-clan"] {
      background-image: url("https://lh3.googleusercontent.com/g9U1CFbdpJKM55pYzYJP-wq8vo-y2VONzPrXQX2tMQgxtS8A-ub3C6nZhL3EZQSiwqDDT-FivwwFXSAGfms2MwU3lNknVg=s0");
    }

    &[view-transition-name="stories-cash-crunch"] {
      background-image: url("https://lh3.googleusercontent.com/oAjBKbuhz3VPXTlOWBoqcEfsJRoPt00rHoF-0hA5Xd2loxBTw9g6V4jlCl4Oh6Uyk4247lCucbsCiClbi6KEgzO9Fg3G=s0");
    }

    &[view-transition-name="stories-covid"] {
      background-image: url('/stories/covid/images/DSC_0573.jpg');
    }

    &[view-transition-name="stories-fringes-of-civilization"] {
      background-image: url('https://lh3.googleusercontent.com/5rjQjJxpAL8mjE6c4VZf4frfjwQzcvYpbGV1ENZAxUaBB-Zqd9WR0N59wpySr-sjFmnI-soAnwGlIIz9Q2Pm3tj3vbALGg=s0');
    }

    &[view-transition-name="stories-grateful-dead"] {
      background-image: url('https://lh3.googleusercontent.com/GClaNEh8Lu8eWkjNOiPZFaFdVQfXT1X2-ATO_xp49mjju6jdCcA9VRqvN4Cx5s6lZNFePd9PaouqM7NMcybXMtD9_bgByZE=s0');
    }

    &[view-transition-name="stories-light-in-darkness"] {
      background-image: url('https://lh3.googleusercontent.com/bQgiqzqZKnd6eNfmMopPed81LgoZ0tXDbs2d2ZSHXWyjRSE56wQX6UoxvARGxlOANdOyLhM6Ry7kDrdmBbCrXPdAj9JZXA=s0');
    }

    &[view-transition-name="stories-metamorphosis"] {
      background-image: url('https://lh3.googleusercontent.com/_aBzsL4L6K5oTWr3gRVENHaRQpKDBGsN697zBZy3_u_JxYtwcmV2EOZjigFeqxX0O5H1su0BVew3Qof5Go-dHTO9FB_VFA=s0');
    }

    &[view-transition-name="stories-model-beyond-gender"] {
      background-image: url('https://lh3.googleusercontent.com/SU7VxFEdrVa3YwUmCT1kHcxkxE1cGXnICg8mgkzsOjyA9LkPuKbsxodTjyUewl3OnCefNtQjttD8lGyHiol0K80zEQ27Cg=s0');
    }

    &[view-transition-name="stories-namma-metro"] {
      background-image: url('https://lh3.googleusercontent.com/zAYiaF1pQW6eVFmFWWxR0IQQbLduf8UUT4Pykg_MLWFS1k6oyA0QX8QBsIUoyNxSnfWWipwBNKYXIQH_If5HryqRLBey4w=s0');
    }

    &[view-transition-name="stories-old-age-home"] {
      background-image: url('https://lh3.googleusercontent.com/e9TTxRnQraA0cxClrPi_uT1gT9Zw_m9mlp-re8U6lrWpn8CTlQsUsIhUb2O3P2nll-saPVb61srTTiAqsxaCIinCdL2ZoMI=s0');
    }

    &[view-transition-name="stories-ornate-jewellery-treasure-trove"] {
      background-image: url('https://lh3.googleusercontent.com/57Z7P_LVum1c3MLawDdStYd5RAuIgf-V4km7ajZ_GKafsQ4mxDa1PZjLk-AJaxuwWbUYMMQsypg9Mh09DjaQQZQ2v3EmOw=s0');
    }

    &[view-transition-name="stories-out-of-focus"] {
      background-image: url('https://lh3.googleusercontent.com/4JcaLlCkwU2lacL5Zhepk_2igqmq0HlgNe-LiCvuAEMaYcZabudZknKORJluuMOX25Nk9GktRrGrjxREYA8FVPsa6JmxeA=s0');
    }

    &[view-transition-name="stories-panorama-of-gomateshwara"] {
      background-image: url('https://lh3.googleusercontent.com/5ZOF-qA48HgyYPjkohNCXZLGcZU-eMW5t0q4_g30Hu0x_NbAOSBWOdfbU4bEZRgxGK7dc3GDNYKy4J7GT8UyNbIbRpFomw=s0');
    }

    &[view-transition-name="stories-siddis"] {
      background-image: url('https://lh3.googleusercontent.com/_e7IwnZWwCk5W2ji9S-T3ZexH_kFuVdXb6d4UvKBPs6_4-_85OlADkH0GXlg7BbcM5XKVN9vbyjeKZdAh3dtZ8mniFh1Gd8=s0');
    }

    &[view-transition-name="stories-sleep"] {
      background-image: url('../images/background-image-dark.avif');
    }

    &[view-transition-name="stories-water-woes"] {
      background-image: url('https://lh3.googleusercontent.com/ZXhev9OOue0IOgw9-cGGMD6k66Tw85GlPXlKVA3mfr5G0ZUKiBlIOjUclJoPzO6jiJ_-3w7OVP-9EDyRbowMrJd1pZiW1KE=s0');
    }

    &[view-transition-name="stories-waves-of-woes"] {
      background-image: url('https://lh3.googleusercontent.com/-DwFQgegGeUb9qRH_LBRhwRSb-rsn0gC_U-Dr6FMIIuEcUTR8KesHc3lekjdW323W2-2JjfC7ILSn827ZeGB4VSdhrKcJQ=s0');
    }

    &[view-transition-name="books-koovagam"] {
      background-image: url('https://lh3.googleusercontent.com/0OO1TWweiHBd1gcThlw65DGk86ovMyOPBj90kz0xxA4YrliSdKDKUiWIlffupukSOZFA6t04HqfUKRq3HY_PCNgrVZM9Ng=s0');
    }

    &[view-transition-name="calendars-transexual-calendar"] {
      background-image: url('https://lh3.googleusercontent.com/bkwfN5UeHnOOWEm1uesn-nCkd1ZYA5wbf-LAHyTd62Hcxg7CEfiZftgbudyQKuJmgsGafYRuZXiTI0yQoF84P6c1V2gnWA=s0');
    }
  }
}

main,
header {
  padding: var(--size-lg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font-family);
}

h2 {
  font-size: var(--size-xxxl);
}

h3 {
  font-size: var(--size-xxl);
}

h4 {
  font-size: var(--size-xl);
}

p {
  text-wrap: pretty;
  /* columns: 2; */
}

q {
  font-family: var(--heading-font-family), serif;
}

.hide {
  display: none;
}

.heading {
  font-family: var(--heading-font-family);
  font-size: var(--size-xxxl);
}

beyondfocus-logo {
  display: block;
  overflow: hidden;

  h1 {
    /* margin: 20px auto 30px;*/
    height: var(--size-xxxxl);
    /* padding-left: var(--size-xxxl); */
    /* padding-right: var(--size-xxxl); */
    /* margin-bottom: 0; */
    margin: 0;

    a {
      display: block;
      width: 100%;
      height: 100%;
      background: transparent no-repeat center top;
      text-indent: -99999px;
      background-size: contain;
      aspect-ratio: 467/174;
    }

    @media (prefers-color-scheme: light) {
      a {
        background-image: var(--logo-url-light);
      }
    }

    @media (prefers-color-scheme: dark) {
      a {
        background-image: var(--logo-url-dark);
      }
    }
  }
}

beyondfocus-page-title h2 {
  font-size: var(--size-lg);
  text-align: center;
}

beyondfocus-hero {
  section {
    /* display: block; */
    /* padding: var(--size-md); */
    /* padding-bottom: var(--size-sm); */
    font-family: Nohemi, "Noto Sans", sans-serif;
    font-size: var(--size-md);
    font-weight: 400;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;

    h2 {
      margin-bottom: 0;
      margin-top: 0;
      text-align: center;
    }

    em {
      font-family: var(--heading-font-family);
      /* text-decoration: underline; */
      font-weight: 900;
      /* text-decoration-style: wavy;
      text-decoration-color: var(--highlight-color); */
      /* background-size: var(--size-sm); */
      padding: 6px;
      text-wrap-mode: nowrap;
    }

    @media (prefers-color-scheme: light) {
      em {
        background:
          url("../images/focus-left-top-light.svg") no-repeat left top,
          url("../images/focus-right-top-light.svg") no-repeat right top,
          url("../images/focus-right-bottom-light.svg") no-repeat right bottom,
          url("../images/focus-left-bottom-light.svg") no-repeat left bottom;
        /* background-size: var(--size-sm); */
      }
    }

    @media (prefers-color-scheme: dark) {
      em {
        background:
          url("../images/focus-left-top-dark.svg") no-repeat left top,
          url("../images/focus-right-top-dark.svg") no-repeat right top,
          url("../images/focus-right-bottom-dark.svg") no-repeat right bottom,
          url("../images/focus-left-bottom-dark.svg") no-repeat left bottom;
        /* background-size: var(--size-sm); */
      }
    }

    a {
      text-decoration: none;
      color: var(--primary-color);
      font-size: var(--size-sm);
      height: var(--size-xxxxl);
      width: var(--size-xxxxl);
      border: 1px solid var(--primary-color);
      border-radius: 10%;
      padding-top: var(--size-base);
      display: inline-block;
      aspect-ratio: 1/1;
      text-align: center;
      line-height: var(--size-xxxxl);

      &[href="/portfolio"] {
        background-image: url("../images/camera-dslr-light.svg");
        background-repeat: no-repeat;
        background-position: center var(--size-sm);
        background-size: var(--size-lg);
      }

      &[href="/profile"] {
        background-image: url("../images/about-me-mono-light.svg");
        background-repeat: no-repeat;
        background-position: center var(--size-sm);
        background-size: var(--size-lg);
      }

      &.active {
        background-color: var(--highlight-color);
        color: var(--primary-background);
        border-color: var(--primary-background);
      }
    }
  }

  @media (min-width: 900px) {
    section {
      margin: 0 auto;
      max-width: 900px;
    }
  }
}

beyoundfocus-nav {
  display: block;
  padding-bottom: var(--size-md);
  padding-top: var(--size-md);
  /* margin: var(--size-xxxl) 0; */
  /* flex-direction: column; */

  h3 {
    /* margin-top: 0; */
    font-weight: 900;
    text-align: center;
  }

  nav {
    /* margin-bottom: var(--size-xxl); */

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      /* border-top: 1px solid var(--primary-color); */
      justify-content: center;
      gap: var(--size-md);
      align-items: center;
      font-family: Lekton, "Noto Sans Mono", serif;

      li {
        /* display: inline-block;
        margin: 0 25px; */
        margin: 0;
        padding: 0;

        a {
          text-decoration: none;
          background-color: var(--primary-color);
          color: var(--primary-background);
          font-size: var(--size-sm);
          height: var(--size-xxxxl);
          width: var(--size-xxxxl);
          border: 1px solid var(--primary-color-dark);
          border-radius: 10%;
          padding-top: var(--size-base);
          display: inline-block;
          aspect-ratio: 1/1;
          text-align: center;
          line-height: var(--size-xxxxl);
          background-color: var(--highlight-color);

          &[href="/profile"] {
            background-repeat: no-repeat;
            background-position: center var(--size-sm);
            background-size: var(--size-lg);
          }

          &[href="/portfolio"] {
            background-repeat: no-repeat;
            background-position: center calc(var(--size-sm) + 5px);
            background-size: var(--size-lg);
          }

          /* &.active {
              background-color: var(--highlight-color);
              color: var(--primary-background);
              border-color: var(--primary-background);
          } */
          @media (prefers-color-scheme: light) {
            &[href="/portfolio"] {
              background-image: url("../images/camera-dslr-light-fffef8.svg");
            }

            &[href="/profile"] {
              background-image: url("../images/award-light.svg");
            }
          }

          @media (prefers-color-scheme: dark) {
            &[href="/portfolio"] {
              background-image: url("../images/camera-dslr-dark.svg");
            }

            &[href="/profile"] {
              background-image: url("../images/award-dark.svg");
            }
          }
        }
      }
    }
  }
}

beyondfocus-contact {
  /* display: block; */
  /* overflow: hidden; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: var(--size-md); */
  flex-wrap: wrap;
  padding-top: var(--size-md);
  padding-bottom: var(--size-md);

  h4 {
    font-size: var(--size-xl);
    margin-bottom: 0;
    margin-top: 0;
  }

  address {
    font-style: normal;
  }

  ul {
    list-style: none;
    /* margin: 0; */
    padding: 0;

    li {
      a {
        text-decoration: none;
        color: var(--highlight-color);
        font-size: var(--size-base);
        font-family: Lekton, "Noto Sans Mono", serif;
        background-size: contain;
        padding-left: var(--size-xl);
        background: no-repeat left center;

        @media (prefers-color-scheme: light) {
          &[href^="mailto:"] {
            background-image: url("../images/email-light.svg");
            background-size: contain;
          }

          &[href^="tel:"] {
            background-image: url("../images/call-light.svg");
            background-size: contain;
          }

          &[href^="https://www.facebook.com"] {
            background-image: url("../images/facebook-light.svg");
            background-size: contain;
          }

          &[href^="https://www.x.com"] {
            background-image: url("../images/x-light.svg");
            background-size: contain;
          }
        }

        @media (prefers-color-scheme: dark) {
          &[href^="mailto:"] {
            background-image: url("../images/email-dark.svg");
            background-size: contain;
          }

          &[href^="tel:"] {
            background-image: url("../images/call-dark.svg");
            background-size: contain;
          }

          &[href^="https://www.facebook.com"] {
            background-image: url("../images/facebook-dark.svg");
            background-size: contain;
          }

          &[href^="https://www.x.com"] {
            background-image: url("../images/x-dark.svg");
            background-size: contain;
          }
        }
      }

      margin: 0;
    }
  }
}

@media (min-width: 700px) {
  beyondfocus-contact {
    gap: var(--size-md);
  }
}

beyondfocus-portfolio {
  h3 {
    text-align: center;
  }

  section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--size-md);

    figure {
      background-color: var(--primary-background);
      margin-bottom: var(--size-md);

      /* padding: var(--size-sm); */
      figcaption h4 {
        margin-top: 0;
      }

      img {
        width: 100%;
        /* border: 1px solid var(--highlight-color); */
        margin-bottom: var(--size-md);
        object-fit: cover;
        aspect-ratio: 3/2;
        /* visibility: hidden; */
      }

      a {
        background: var(--highlight-color);
        color: var(--primary-background);
        padding: var(--size-sm);
        text-decoration: none;
        display: inline-block;
        text-align: center;
        font-size: var(--size-sm);
        border-radius: var(--size-md);
        font-family: Lekton, "Noto Sans Mono", serif;
      }

      @media (min-width: 900px) {
        & {
          width: calc(50% - var(--size-md));
          background-color: var(--primary-background);
          padding: var(--size-md);
          margin-bottom: unset;
          /* background-image: url('https://lh5.ggpht.com/tg1KpjzcEOr8IpjvDnAzwCoNJ-WkjfFb2d-1KMmAFNFqcMtwxEFqCynIwmtq9Fb_a-jI7fOcqbjd5pNPqrdULSp4G0Kf=s0'); */
        }
      }

      /*  max-width: 25rem; */
    }
  }
}

/* beyondfocus-gallery-images {
  display: flex;
  gap: var(--size-md);
  flex-wrap: wrap;
  justify-content: space-between;

  section {
    display: flex;
    gap: var(--size-md);
    flex-wrap: wrap;
    justify-content: space-between;

    figure {
      width: calc(33% - var(--size-md));
      margin: unset;

      img {
        width: 100%;
      }
    }
  }
} */

beyondfocus-gallery-images {
  display: block;

  section {
    display: flex;
    gap: var(--size-md);
    flex-wrap: wrap;
    justify-content: space-between;

    figure {
      flex: 1 1 auto;
      /* Allow flexible sizing */
      margin: unset;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        /* Optional: Add rounded corners */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        /* Optional: Add shadow for depth */
        transition: transform 0.3s;

        /* Optional: Smooth scaling effect */
        &:hover {
          transform: scale(1.05);
        }
      }

      figcaption {
        text-align: center;
        display: none;
      }
    }

    /* Responsive adjustments */
    @media (max-width: 600px) {
      figure {
        flex: 1 1 100%;
        /* Full width on small screens */
      }
    }

    @media (min-width: 601px) and (max-width: 900px) {
      figure {
        flex: 1 1 calc(50% - var(--size-md));
        /* Two columns on medium screens */
      }
    }

    @media (min-width: 901px) {
      figure {
        flex: 1 1 calc(33.33% - var(--size-md));
        /* Three columns on larger screens */
      }
    }
  }
}

beyondfocus-gallery-story {
  padding-top: var(--size-md);
  display: block;
  overflow: hidden;
}

@media (min-width: 601px) and (max-width: 900px) {
  beyondfocus-gallery-story {
    columns: 2;
    column-gap: var(--size-md);
  }
}

@media (min-width: 901px) {
  beyondfocus-gallery-story {
    /* columns: 3; */
    column-gap: var(--size-md);
  }
}

beyondfocus-profile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  display: block;

  dt {
    font-size: var(--size-md);
    margin-bottom: var(--size-base);
  }

  dd {
    font-family: Lekton, "Noto Sans Mono", serif;
    font-size: var(--size-sm);
    margin-bottom: var(--size-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-sm);
  }

  @media (min-width: 728px) {
    dl {
      columns: 2;
    }
  }
}

html:has(dialog[open]) {
  overflow: hidden;
}

_beyondfocus-dialog {
  dialog {
    display: grid;
    /* background: var(--surface-2); */
    /* color: var(--text-1); */
    /* max-inline-size: min(90vw, var(--size-sm)); */
    /* max-block-size: min(80vh, 100%); */
    /* max-block-size: min(80dvb, 100%); */
    margin: auto;
    /* padding: 0; */
    /* position: fixed; */
    inset: 0;
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-6);
    /* z-index: var(--layer-important); */
    /* overflow: hidden; */
    transition: opacity .5s var(--ease-3);

    /* overflow: hidden; */
    /* width: 100%; */
    &:not([open]) {
      pointer-events: none;
      opacity: 0;
    }
  }
}

beyondfocus-dialog {
  display: block;

  dialog {
    transition: opacity .5s var(--ease-3);
    margin: auto;
    border: var(--highlight-color) 2px solid;
    img {
      min-inline-size: 100%;
    }
     
    form[method="dialog"] button {
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;
      /* background: url("../images/icon-close.svg") no-repeat center; */
      background-size: contain;
      width: var(--size-xl);
      height: var(--size-xl);
      font-family: var(--mono-font-family);
      background-color: var(--primary-background);
      border: none;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: var(--highlight-color);
      
      svg {
        fill: var(--highlight-color);
        width: 75px;
      }
    }

    &::backdrop {
      background-color: rgba(0, 0, 0, 0.8);
    }

    &:not([open]) {
      pointer-events: none;
      opacity: 0;
    }
    &[open] {
      min-inline-size: min(90vw, 100%);
      min-block-size: min(80vh, 100%);
    }
  }
}

footer {
  padding: var(--size-md);
  text-align: right;
  font-size: var(--size-sm);
  font-family: Lekton, "Noto Sans Mono", serif;
}