@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/variable/PPNeueMontreal-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  /* ital is 100 - 900 */
}

/* YES -- this is a bit of a mess. I promise / that when I'm not rushing out a goofy one-off website for a personalize job application -- it'll be a lot cleaner ;) */

/* quick and dirty reset */
* {
  box-sizing: border-box;
  margin: 0;
}

inner-column, mast-head, smart-svg, insignia-heading {
  display: block;
}

/* font-variation-settings: "wght" 540,"ital" 0; */

body {
  /* on a bigger project, there would be primatives to pull from */
  --color: #094bb2;

  --paper: #fff;
  --ink: rgb(0 0 0 / 0.8);
  --ink-light: rgb(0 0 0 / 0.75);
  --ink-link: color-mix(in srgb, var(--color) 80%, black);

  --border-radius: 18px;

  --display-font: 'PP Neue Montreal', system-ui, sans-serif;

  --calm-voice-size: 1rem;
  --calm-voice-weight: 430;
  --calm-voice-slant: 100;
  --calm-voice-line-height: 1.5;

  --attention-voice-size: 1.4rem;
  --attention-voice-weight: 600;
  --attention-voice-slant: 100;
  --attention-voice-line-height: 1.3;

  --loud-voice-size: 1rem;
  --loud-voice-weight: 700;
  --loud-voice-slant: 100;
  --loud-voice-line-height: 1.5;

  --video-background: var(--color);

  --cta-border-width: 1px;
  --cta-border-style: solid;
  --cta-border-color: rgb(0 0 0 / 0.1);
  --cta-padding: 2em;
  --cta-corners: var(--border-radius);
  --cta-fill: rgb(0 0 0 / 0.01);
  --cta-ink: var(--ink);
  --cta-ink-light: var(--ink-light);
  
  --video-order: initial;
  --video-width: 100%;
}

body * {
  transition: 0.3s;
}

@media (pointer: coarse) {
  body * {
    transition: 0s;
  }
}

@media (width > 700px) {

}

/* Exclude slider thumbs from global transition */
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-ms-thumb {
  transition: none;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  p {
    color: var(--ink-light);
  }
}

.calm-voice, p {
  font-family: inherit;
  font-size: var(--calm-voice-size);
  font-variation-settings: "wght" var(--calm-voice-weight),"ital" var(--calm-voice-slant);
  line-height: var(--calm-voice-line-height);
  text-wrap: pretty;
}

.attention-voice {
  font-family: inherit;
  font-size: var(--attention-voice-size);
  font-variation-settings: "wght" var(--attention-voice-weight),"ital" var(--attention-voice-slant);
  line-height: var(--attention-voice-line-height);
  text-wrap: balance;
}

.loud-voice {
  font-family: inherit;
  font-size: var(--loud-voice-size);
  font-variation-settings: "wght" var(--loud-voice-weight),"ital" var(--loud-voice-slant);
  line-height: var(--loud-voice-line-height);
  text-wrap: balance;
}

h1,
h2 {
  margin: 0;
  font-size: initial;
  font-weight: initial;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h3, h2 {
  text-wrap: balance;
  max-width: 50ch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h3 + p {
  margin-top: 1em;
}

.match-list {
  margin-top: 0em;
  ul {
    margin: 0;
    padding: 0;
    padding-left: 1.1em;
    margin-top: 1em;
    display: grid;
    gap: 0.8em;
  }
}


.cta {
  background-color: var(--cta-fill);
  border: var(--cta-border-width) var(--cta-border-style) var(--cta-border-color);
  
  border-radius: var(--border-radius);
  margin-block: 1em;
  max-width: 80ch;
  padding: var(--cta-padding);

  h2, h3 {
    color: var(--cta-ink);
  }
  p {
    color: var(--cta-ink-light);
    text-wrap: pretty;
    a {
      color: var(--cta-link);
    }
  }
}

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

smart-svg,
inner-column {
  /* custom elements are inline by browser default */
  display: block;
}

svg {
  display: block;
  width: 100%;
}


/* structure */
body {
  display: grid;

}

inner-column {
  width: 98%;
  max-width: 900px;
  margin-inline: auto;
  padding: 1rem;
  @media (width >= 1100px) {
  	margin-inline: 10% auto;
  }
}

.site-header {
  inner-column {
    padding: 1rem;
  }

  mast-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }
}

article {
  display: grid;
  gap: 40px;

  p {
    max-width: 76ch;
  }

  :is(p + p) {
    margin-top: 1em;
  }

  :is(p + h2) {
    margin-top: 2.3em;
  }

  :is(h1 + p, h2 + p, h2 + ol, h3 + p) {
    margin-top: 1.3rem;
    /* should this be em? */
  }

  :is(h3 + p) {
    margin-top: 0.8rem;
  }

  :is(ol + p) {
    margin-top: 1em;
  }

  ol {
    padding: 0;
    padding-left: 1.2em;
    li {
      margin-top: 1em;
    }
  }

  strong {
    font-weight: 700;
  }
}

/* theme */
body {
  font-family: var(--display-font);
  padding-top: 20px;
  padding-bottom: 15vh;
}

insignia-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  .logo {
    max-width: 54px;
    flex-shrink: 0;
  }
  .company-name {
    font-size: 1.2;
    line-height: 1.3;
    letter-spacing: 0.02em;
  }
}

a {
  color: var(--ink-link);
}

.action-menu {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    transform: translateX(-0.5em);
    margin-top: 4em;
  }

  a {
    padding: 1em 0.5em;
  }
}


@media (min-width: 375px) {
  .company-name {
    font-size: 1.5rem;
  }
}

.video-embed {
  background-color: var(--video-background);
  border-radius: var(--border-radius, 8px);
  overflow: hidden;
  order: var(--video-order);
  transition: 0.5s;
  
  iframe {
    transform: scale(1.01);
  }

  @media (width > 700px) {
    max-width: var(--video-width);
  }
}

.easter-egg {
  margin-top: 26px;
}



/* themes */
body.home {
  .logo {
    --color: pink;
    --ink: #ff0066;
  }
}

body[class^="anthropic"] {
  --ink: #1a1a1a;
  --paper: #faf9f5;
  --paper: #f0eee6;
  --color: #141413;
  --video-background: #d97757;

  .logo {
    --color: pink;
    --ink: #ff0066;
  }

  font-family: sserif;

  h1, h2, h3 {
    font-family: var(--display-font);
  }

  h3 {
    font-variation-settings: "wght" 660,"ital" 0;
  }

  p {
    color: rgb(0 0 0 / 0.75);
  }

  a {
    color: var(--color);
    text-decoration: underline;
    text-decoration-color: rgb(0 0 0 / 0.2);
    text-underline-offset: 0.15em;

    &:hover {
      text-decoration-color: var(--color);
    }
  }

  .cta {
    background-color: white;
    border-width: 0;
  }

  iframe {
    
  }

  .easter-egg {
    iframe {
      filter: grayscale(0.8);
    }
  }
}

/* Figma page theme - playful and colorful */
body.figma {
  --figma-purple: #7B61FF;
  --figma-pink: #FF00FF;
  --figma-blue: #0D99FF;
  --ink: #1a1a1a;
  --paper: #ffffff;
  --color: #0D99FF;

  --video-background: #222;

  /* Smooth transitions for theme changes */
/*  transition:
    font-size 1s,
    background-color 0.4s ease,
    color 0.4s ease;*/

  h3 {
    font-variation-settings: "wght" 600,"ital" 0;
  }

  * {
/*    transition:
    color 0.4s ease,
    background-color 0.4s ease,
    font-size 0.4s,
    border-radius 1.5s,
    border-color 0.4s ease;*/
    /*transition: all 0.3s;*/
  }
}

/* Theme slider component */
.theme-slider-container {
  z-index: 100;
  padding: 0.5em 0;
  opacity: 0.6;
  /*transition: opacity 0.3s ease;*/

  transform: translateY(-5%);

  width: 60%;
  max-width: 300px;
  position: relative;
}


.theme-slider-container:hover,
.theme-slider-container:focus-within {
  opacity: 1;
}

.theme-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*margin-bottom: 0.5em;*/
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.7;

  .theme-number {
    color: var(--color);
  }
}

.theme-slider {
  --ink: var(--ink-light);
  --thickness: 1px;
  --glow: var(--color);
  --glow-distance: 3px;
  


  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
}

.theme-slider:focus {
  outline: none;
}

/* Track styles - must be separate selectors */
.theme-slider::-webkit-slider-runnable-track {
  height: 6px;
  width: 100%;
  cursor: pointer;
  background: transparent;
  border: var(--thickness) solid var(--ink);
  border-radius: 3px;
}

.theme-slider::-moz-range-track {
  height: 6px;
  width: 100%;
  cursor: pointer;
  background: transparent;
  border: var(--thickness) solid var(--ink);
  border-radius: 3px;
}

.theme-slider::-ms-track {
  height: 6px;
  width: 100%;
  cursor: pointer;
  color: transparent;
  background: transparent;
  border: var(--thickness) solid var(--ink);
  border-radius: 3px;
}

.theme-slider::-ms-fill-lower {
  background: transparent;
}

/* Thumb styles - must be separate selectors */
.theme-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--color);
  cursor: pointer;
  margin-top: -7px;
  box-shadow: 0 0 0 0 rgba(13, 153, 255, 0.5);
  -webkit-animation: thumb-pulse 1.5s ease-in-out infinite;
  animation: thumb-pulse 1.5s ease-in-out infinite;
}

.theme-slider::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--color);
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(13, 153, 255, 0.5);
  animation: thumb-pulse 1.5s ease-in-out infinite;
}

.theme-slider::-ms-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--color);
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(13, 153, 255, 0.5);
  animation: thumb-pulse 1.5s ease-in-out infinite;
}

.theme-slider:hover::-webkit-slider-thumb,
.theme-slider:focus::-webkit-slider-thumb {
  -webkit-animation: none;
  animation: none;
}

.theme-slider:hover::-moz-range-thumb,
.theme-slider:focus::-moz-range-thumb {
  animation: none;
}

.theme-slider:hover::-ms-thumb,
.theme-slider:focus::-ms-thumb {
  animation: none;
}

@-webkit-keyframes thumb-pulse {
  50% {
    box-shadow: 0 0 0 10px rgba(13, 153, 255, 0);
  }
}

@keyframes thumb-pulse {
  60% {
    box-shadow: 0 0 0 10px rgba(13, 153, 255, 0);
  }

  61% {
    box-shadow: 0 0 0 0 rgba(13, 153, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(13, 153, 255, 0);
  }
}

/* Focus states - must be separate selectors */
.theme-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--glow-distance) color-mix(in srgb, var(--glow) 20%, transparent);
}

.theme-slider:focus::-moz-range-thumb {
  box-shadow: 0 0 0 var(--glow-distance) color-mix(in srgb, var(--glow) 20%, transparent);
}

.theme-slider:focus::-ms-thumb {
  box-shadow: 0 0 0 var(--glow-distance) color-mix(in srgb, var(--glow) 20%, transparent);
}


  .logo {
/*    --color: pink;
    --ink: #ff0066;*/
  }

/* Theme variations */
body.figma[data-theme="1"] {
  .logo {
    --color: pink;
    --ink: #ff0066;
  }

  --cta-border-width: 1px;
  --cta-border-style: solid;
  --cta-border-color: rgb(0 0 0 / 0.1);
  --cta-padding: 2em;
  --cta-fill: rgb(0 0 0 / 0.01);
  --cta-corners: var(--border-radius);
}

body.figma[data-theme="2"] {
  --cta-ink: white;

  --color: #7B61FF;
  --paper: #f5f3ff;
  --ink: #2d1b69;
  --ink-light: #2d1b69;

  --attention-voice-size: 1.5rem;
  --attention-voice-weight: 600;
  --attention-voice-slant: 900;
  --attention-voice-line-height: 1.3;

  --calm-voice-slant: 900;

  --border-radius: 8px;

  --cta-border-width: 0;
/*  --cta-border-style: solid;
  --cta-border-color: rgb(0 0 0 / 0.1);*/
  --cta-padding: 2em;
  --cta-fill: var(--color);
  --cta-ink: white;
  --cta-ink-light: rgb(255 255 255 / 0.8);
  --cta-corners: var(--border-radius);

  --video-width: 88%;

  .video-embed {
    /*filter: grayscale(0.9);*/
    /*mix-blend-mode: color-burn;*/
  }

  .easter-egg {
    iframe {
      filter: grayscale(0.8);
    }
  }
}

/* dark */
body.figma[data-theme="3"] {
  --color: #7B61FF;
  --paper: rgb(0 0 0 / 0.9);
  --ink: white;
  --ink-light: rgb(255 255 255 / 0.75);

  --attention-voice-size: 1.5rem;
  --attention-voice-weight: 580;
  --attention-voice-slant: 900;
  --attention-voice-line-height: 1.3;

  --calm-voice-size: 1.1rem;
  --calm-voice-weight: 306;
  --calm-voice-slant: initial;

  --border-radius: 10px;

  --glow: red;

  --video-order: -1;
  .video-embed {
    border: 1px solid #333333;
  }

  --cta-ink: var(--color);
  --cta-border-color: var(--color);

  .video-embed {
    /*filter: grayscale(0.7);*/
  }
}

body.figma[data-theme="4"] {
  --color: #00D4AA;
  --paper: #f0fffc;
  --ink: #004d3d;

  --video-width: 600px;

  .video-embed {
    /*filter: hue-rotate(133deg);*/
  }
}

body.figma[data-theme="5"] {
  --color: #FF6B6B;
  --paper: #fff5f5;
  --ink: #4d1a1a;

  --video-order: -1;
  --video-width: 400px;

  --cta-fill: white;
  --border-radius: 8px;
  .video-embed {
    /*filter: saturate(0.6);*/

  }
}

body.figma[data-theme="6"] {
  --color: #ff61b5;
  --paper: black;
  --ink: white;
  --ink-light: rgb(255 255 255 / 0.75);

  --attention-voice-size: 1.5rem;
  --attention-voice-weight: 300;
  --attention-voice-slant: 900;
  --attention-voice-line-height: 1.3;

  --calm-voice-size: 1.1rem;
  --calm-voice-weight: 356;
  --calm-voice-slant: 700;

  --border-radius: 8px;

  --cta-border-color: var(--color);
}

/* Cash App theme - bold, approachable, green */
body.cashapp {
  --cashapp-green: #00D64B;
  --cashapp-dark: #0a0a0a;
  --ink: #0a0a0a;
  --paper: #f8fdf9;
  --color: #00D64B;
  --video-background: #00D64B;

  --border-radius: 12px;

  .logo {
    --color: var(--cashapp-green);
    --ink: var(--cashapp-green);
  }

  a {
    color: var(--cashapp-dark);
    text-decoration-color: var(--cashapp-green);
    text-decoration-thickness: 2px;

    &:hover {
      color: var(--cashapp-green);
    }
  }

  h1, h2, h3 {
    font-variation-settings: "wght" 700, "ital" 0;
  }

  h2 {
    color: var(--cashapp-dark);
  }

  .cta {
    background-color: var(--cashapp-green);
    border: 0;
    color: white;
    font-weight: 600;

    &:hover {
      background-color: color-mix(in srgb, var(--cashapp-green) 90%, black);
    }

    a {
      color: white;
      text-decoration-color: white;

      &:hover {
        color: white;
      }
    }
  }

  .video-embed {
    border-radius: var(--border-radius);
    border: 1px solid rgb(0 214 75 / 0.2);
  }
}

/* Netflix theme - bold, cinematic, dark */
body[class^="netflix"] {
  --netflix-red: #E50914;
  --netflix-black: #141414;
  --ink: #ffffff;
  --ink-light: rgb(255 255 255 / 0.85);
  --paper: var(--netflix-black);
  --color: var(--netflix-red);
  --video-background: var(--netflix-red);

  --border-radius: 12px;
  --calm-voice-weight: 405;

  --ink-link: var(--netflix-red);

  .logo {
    --color: var(--netflix-red);
    --ink: #ffffffd9;
  }

  a {
    color: var(--netflix-red);
    text-decoration: underline;
    text-decoration-color: rgb(229 9 20 / 0.4);
    text-underline-offset: 0.15em;

    &:hover {
      text-decoration-color: var(--netflix-red);
    }
  }

  h1, h2, h3 {
    font-variation-settings: "wght" 650, "ital" 0;
    color: white;
  }

  p {
    color: var(--ink-light);
  }

  .cta {
    background-color: var(--netflix-black);
    border: 1px solid var(--netflix-red);

    h2, h3 {
      color: white;
    }

    p {
      color: var(--ink-light);
    }
  }

  .video-embed {
    border-radius: var(--border-radius);
    border: 1px solid var(--netflix-black);
    --video-background: var(--netflix-black);
  }

  .match-list {
    ul {
      color: var(--ink-light);
    }
  }
}

/* Getty theme - scholarly, warm, art-focused */
body[class^="getty"] {
  --getty-brown: #8B4513;
  --getty-cream: #FAF8F5;
  --ink: #2C2C2C;
  --ink-light: rgb(44 44 44 / 0.8);
  --paper: var(--getty-cream);
  --color: var(--getty-brown);
  --video-background: var(--getty-brown);

  --border-radius: 8px;
  --calm-voice-weight: 420;

  --ink-link: var(--getty-brown);

  a {
    color: var(--getty-brown);
    text-decoration: underline;
    text-decoration-color: rgb(139 69 19 / 0.4);
    text-underline-offset: 0.15em;

    &:hover {
      text-decoration-color: var(--getty-brown);
    }
  }

  h1, h2, h3 {
    font-variation-settings: "wght" 580, "ital" 0;
    color: var(--ink);
  }

  .cta {
    background-color: rgb(139 69 19 / 0.04);
    border: 1px solid rgb(139 69 19 / 0.15);
  }

  .video-embed {
    border-radius: var(--border-radius);
    border: 1px solid rgb(139 69 19 / 0.2);
  }
}