/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.25em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* ----------------------------------------------------------------------------
 * Fonts
 * --------------------------------------------------------------------------*/

@font-face {
font-family: 'TiemposText';
src: url('../fonts/tiempos-text-vf-roman.woff2') format('woff2');
font-style: normal;
font-weight: 400 700;
font-display: swap;
}

@font-face {
font-family: 'TiemposTextItalic';
src: url('../fonts/tiempos-text-vf-italic.woff2') format('woff2');
font-style: italic;
font-weight: 400 700;
font-display: swap;
}

@font-face {
font-family: 'Antartica';
src: url('../fonts/antarctica-vf.woff2') format('woff2');
font-style: normal;
font-weight: 100 900;
font-display: swap;
}

@view-transition {navigation: auto;}

:root {
  /* Color Scheme */
  color-scheme: light;

  /* Colors */
  --midnight-blue: rgba(7,8,15,1);
  --electric-yellow: rgba(246,255,1);
  --electric-red: rgba(255,23,78,1);
  --overexposed: rgba(243,241,238,1);
  --focus: rgba(10,80,230,1);

  --gray1: rgba(66,66,71,1);
  --gray2: rgba(58,59,63,1);
  --gray3: rgba(49,49,54,1);
  --gray4: rgba(33,34,39,1);
  --gray5: rgba(23,24,29,1);

  /* Fonts */
 	--font-sans: "Antarctica", Helvetica, Arial, sans-serif;
 	--font-serif: "TiemposText", Georgia, serif;
 	--font-serif-italic: "TiemposTextItalic", Georgia, serif;

  /* Type Sizing */
	--fs--2: clamp(0.6944rem, 0.6925rem + 0.0095vw, 0.7035rem);
	--fs--1: clamp(0.8333rem, 0.8114rem + 0.1099vw, 0.9377rem);
	--fs-0: clamp(1rem, 0.9474rem + 0.2632vw, 1.25rem);
	--fs-1: clamp(1.2rem, 1.1018rem + 0.4908vw, 1.6663rem);
	--fs-2: clamp(1.44rem, 1.2756rem + 0.8222vw, 2.2211rem);
	--fs-3: clamp(1.728rem, 1.4685rem + 1.2976vw, 2.9607rem);
	--fs-4: clamp(2.0736rem, 1.6793rem + 1.9717vw, 3.9467rem);
	--fs-5: clamp(2.4883rem, 1.9046rem + 2.9185vw, 5.2609rem);
	--fs-6: clamp(2.986rem, 2.1382rem + 4.2387vw, 7.0128rem);
	--fs-7: clamp(3.5832rem, 2.3695rem + 6.0683vw, 9.3481rem);

	/* Spacing */
	--sp-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
	--sp-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
	--sp-xs: clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);
	--sp-s: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
	--sp-m: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
	--sp-l: clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);
	--sp-xl: clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem);
	--sp-2xl: clamp(4rem, 3.6522rem + 1.7391vw, 5rem);
	--sp-3xl: clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem);
	--sp-4xl: clamp(8rem, 7.3043rem + 3.4783vw, 10rem);

	/* Spacing: One-up pairs */
	--sp-3xs-2xs: clamp(0.25rem, 0.1196rem + 0.6522vw, 0.625rem);
	--sp-2xs-xs: clamp(0.5rem, 0.3478rem + 0.7609vw, 0.9375rem);
	--sp-xs-s: clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem);
	--sp-s-m: clamp(1rem, 0.6957rem + 1.5217vw, 1.875rem);
	--sp-m-l: clamp(1.5rem, 1.1522rem + 1.7391vw, 2.5rem);
	--sp-l-xl: clamp(2rem, 1.3913rem + 3.0435vw, 3.75rem);
	--sp-xl-2xl: clamp(3rem, 2.3043rem + 3.4783vw, 5rem);
	--sp-2xl-3xl: clamp(4rem, 2.7826rem + 6.087vw, 7.5rem);
	--sp-3xl-4xl: clamp(6rem, 4.6087rem + 6.9565vw, 10rem);

  /* Site */
  --page-bg: var(--midnight-blue);
  --nav-bg: rgba(7,8,15,.25);
  --txt-primary: var(--overexposed);
  --txt-highlighter: var(--electric-yellow);
  --txt-meta: rgb(from var(--overexposed) r g b / 0.5);

  --link-normal: var(--overexposed);
  --link-action: var(--electric-yellow);
  --keyline: rgb(from var(--overexposed) r g b / 0.25);
}

*, *::before, *::after {box-sizing: border-box;}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--page-bg);
  color: var(--txt-primary);
  font-family: var(--font-sans);
  font-kerning: auto;
  font-size: var(--fs-0);
  font-weight: 340;
  line-height: 1.5;
	overflow-x: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

figure {
  margin: 0;
  padding: 0;
}

img {
	display: block;
  height: auto;
	margin: 0;
	max-width: 100%;
  vertical-align: top;
}

input,
textarea {hanging-punctuation: none;}

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 2rem 2rem 0 2rem;
}

.site-header {
  position: fixed;
  bottom: 2rem;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
}

.main-nav {
  width: min(auto, 34rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 2rem;
  background: var(--nav-bg);
  border-radius: 1.5rem;
  padding: 1rem 2rem;
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
}

.nav-link {
  color: var(--txt-primary);
  font-size: var(--fs--1);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-link:first-child {justify-self: end;}
.nav-link:last-child {justify-self: start;}

.nav-link:link,
.nav-link:visited {color: var(--link-normal);}

.nav-link:hover,
.nav-link:active,
.nav-link:focus-visible {color: var(--link-action);}

.logo-block:link,
.logo-block:visited {fill: var(--overexposed);}

.logo-block:hover,
.logo-block:active {fill: var(--link-action);}

.logo-block {
  width: 85px;
  height: 42px;
  display: block;
  justify-self: center;
}

.stack {position: relative;}

main,
main.hero {
  position: relative;
  display: grid;
}

main.normal,
aside.normal {
  margin: 0 auto;
  max-width: 90ch;
  place-items: unset;
}

.intro {
  position: relative;
  z-index: 5;
  width: min(100%, 64rem);
  text-align: center;
  display: grid;
  place-items: center;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ----------------------------------------------------------------------------
 * Hero Collage
 * --------------------------------------------------------------------------*/

.collage {
  margin: -4rem -2rem 0 -2rem;
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 680px;
  overflow-x: hidden;
  overflow-y: hidden;
  isolation: isolate;
}

.panel {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 20px 30px rgba(0,0,0,.25);
  animation-duration: 900ms;
  animation-timing-function: cubic-bezier(0.2, 0.84, 0.32, 1);
  animation-fill-mode: both;
}

.panel-one {
	background:
    linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),
    #fcfcfc url(/assets/img/context-window-intelligence.jpg) 50% 50% no-repeat;
	background-size: cover;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 80vw;
  aspect-ratio: 16 / 11;
  animation-name: slide-down-100;
}

.panel-two {
	background: #dda326 url(/assets/img/context-window-choices.jpg) 50% 50% no-repeat;
	background-size: cover;
  top: 34vh;
  left: 0;
  z-index: 3;
  width: min(68vw, 980px);
  aspect-ratio: 16 / 9;
  animation-name: slide-left-85;
  animation-delay: 90ms;
}

.panel-three {
	background: #9c9fa4 url(/assets/img/i-will-not-apologize.jpg) 50% 50% no-repeat;
	background-size: cover;
  top: 16vh;
  right: 0;
  z-index: 4;
  width: min(34vw, 430px);
  aspect-ratio: 4 / 5;
  animation-name: slide-right-85;
  animation-delay: 180ms;
}

.panel-four {
	background: #0b5b9c url(/assets/img/here-lies-data.jpg) 50% 50% no-repeat;
	background-size: cover;
  bottom: 18vh;
  left: 0vw;
  z-index: 5;
  width: min(28vw, 360px);
  aspect-ratio: 5 / 7;
  animation-name: slide-left-45;
  animation-delay: 360ms;
}

@keyframes slide-down-100 {
  from {transform: translate(-50%, -100%);}
  to {transform: translate(-50%, 0%);}
}

@keyframes slide-left-85 {
  from {transform: translateX(-100%);}
  to {transform: translateX(-15%);}
}

@keyframes slide-right-85 {
  from {transform: translateX(100%);}
  to {transform: translateX(15%);}
}

@keyframes slide-left-45 {
  from {transform: translateX(-100%);}
  to {transform: translateX(-10%);}
}

@keyframes title-slide-up {
  to {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel {animation: none;}
}

@media (max-width: 760px) {
  .collage {
    height: 75vh;
    min-height: 0;
  }

  .panel-one {width: 92vw;}

  .panel-two {
    top: 32vh;
    width: 88vw;
  }

  .panel-three {
    top: 24vh;
    width: 40vw;
  }

  .panel-four {
    bottom: 8vh;
    left: 10vw;
    width: 48vw;
  }
}

/* ----------------------------------------------------------------------------
 * Type
 * --------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  margin: 0;
}

b,
strong {
  font-weight: 550;
  font-feature-settings: "wdth" 55;
}

h1 {
  color: var(--txt-highlighter);
  margin: 0 auto;
  max-width: 20ch;
  font-size: var(--fs-6);
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-align: center;
	text-shadow: 0 5px 10px rgba(0,0,0,.5),
		0 2px 5px rgba(0,0,0,.25);
}

.normal h1 {margin-bottom: 6rem;}

h2 {font-size: var(--fs-3);}
h3 {font-size: var(--fs-2);}
h4 {font-size: var(--fs-1);}
h5 {font-size: var(--fs--1);}
h6 {font-size: var(--fs--1);}

header h2 {
  border-top: 1px solid var(--overexposed);
  border-bottom: 1px solid var(--overexposed);
  font-size: var(--fs-1);
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.25em;
  margin-bottom: 0;
  padding: 0 1rem;
  text-wrap: pretty;
}

.normal h2,
.normal h3 {
  margin-top: 2.5rem;
}

a {
  font-weight: 500;
  text-decoration: none;
  transition: all .3s cubic-bezier(.42, 0, .58, 1);
}

a:link,
a:visited {
  color: var(--link-action);
}

a:hover,
a:active {
  color: var(--link-normal);
}

p, li, dd {hanging-punctuation: first allow-end;}

ol li {margin-bottom: var(--sp-xs);}

ul,
ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.normal ul,
.normal ul li {
  list-style-type: square;
  margin: 0 1rem .8rem 1rem;
}

.normal ul li:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */

a.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  background: var(--overexposed);
  box-shadow: 0 18px 35px rgba(255,255,255, 0.1);
  color: var(--page-bg);
  font-size: 1.25rem;
  font-weight: 500;
  transition:
    transform 250ms ease-in-out,
    box-shadow 250ms ease-in-out,
    background-color 250ms ease-in-out;
}

a.hero-button:link,
a.hero-button:visited {
  color: var(--page-bg);
}

a.hero-button:hover,
a.hero-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 22px 40px rgba(255,255,255, 0.2);
}

a.hero-button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 4px;
}

/* ----------------------------------------------------------------------------
 * Structure
 * --------------------------------------------------------------------------*/

header.label {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
}

.about {
  background: var(--site-b);
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 4rem 0;
  margin: 0;
}

.about h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  font-weight: 600;
  line-height: 1.25;
  max-width: 52ch;
}

/* ----------------------------------------------------------------------------
 * Products
 * --------------------------------------------------------------------------*/

.products {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
}

.products header {
  padding: 7.2rem 0 2rem 0;
}

.grid-items {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2rem;
}

.products .grid-items {
  margin-bottom: var(--sp-l);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2rem;
}

.product-card {
  display: grid;
  gap: 1rem;
  position: relative;
}

.product-image:link,
.product-image:visited {
  outline: 1px solid transparent;
}

.product-image:focus {
  outline: 4px solid var(--focus);
}

.product-image:hover,
.product-image:active {
  outline: 4px solid var(--electric-yellow);
}

.product-image {
  display: block;
  aspect-ratio: 1/1;
  border-radius: .5rem;
  overflow: hidden;
}

.product-image img {max-width: 100%;}

.status-soldout .product-image img {filter: grayscale(100%);}

.status-soldout:before,
.status-featured:before,
.status-soon:before {
  font-size: var(--fs--1);
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  align-content: center;
  border-radius: 1rem;
  padding: .2rem .8rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
}

.item-status:before {
  border-radius: 1rem;
  font-weight: 500;
  padding: 2px 8px;
  position: relative;
}

.status-featured:before {
  background: var(--electric-yellow);
  content: "★";
  color: var(--page-bg);
  padding: .2rem .45rem;
}

.status-soldout:before {
  background: var(--electric-red);
  content: 'Sold Out';
  color: var(--overexposed);
}

.status-soon:before {
  background: var(--page-bg);
  content: 'Coming Soon';
  color: var(--overexposed);
}

.product-meta {
  display: grid;
  gap: .5rem;
}

.product-meta h3,
.product-meta p {
  font-size: var(--fs--1);
  line-height: 1;
  margin: 0;
}

.product-meta h3 {
  color: var(--txt-highlighter);
  font-weight: 600;
  line-height: 1.25;
}

.product-meta p {color: var(--txt-primary);}

.meta {color: var(--txt-meta);}

aside {
  border-top: 1px solid var(--keyline);
  padding-top: var(--sp-l);
}

/* ----------------------------------------------------------------------------
 * Site Footer
 * --------------------------------------------------------------------------*/

p.no-header::before {
  display: block;
  content: ' ';
  height: var(--fs-0);
  margin: .28rem;
}

.site-footer {
  background: var(--gray5);
  margin-top: 4rem;
  margin-left: -2rem;
  margin-right: -2rem;
  padding: 4rem 2rem 8rem 2rem;
  border-top: 1px solid var(--keyline);
  display: grid;
  gap: 1rem;
}

.site-footer a:link,
.site-footer a:visited {color: rgb(from var(--txt-primary) r g b / 0.5);}

.site-footer a:hover,
.site-footer a:active {color: var(--txt-highlighter);}

.site-footer svg {fill: var(--txt-highlighter);}

.site-footer .col {
  grid-column: span 2;
}

.col h4 {
  font-size: var(--fs-0);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.01rem;
}

.col p,
.col ul {
  color: rgb(from var(--txt-primary) r g b / 0.5);
  font-size: var(--fs--1);
  margin: 0;
}

.details-inks h3 {
  margin-bottom: 1rem;
}

.swatch__tints {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.swatch__tints > div {
  padding: 4px 8px;
}

.swatch__tints div:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.swatch__tints div:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.normal .swatch__info ul,
.normal .swatch__info li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.swatch__info {
  font-size: var(--fs--1);
}

/* ----------------------------------------------------------------------------
 * Skip Navigation Link
 * --------------------------------------------------------------------------*/

a#skip {
	background: var(--txt-primary);
	color: var(--page-bg);
	display: block;
	font-size: var(--fs--1);
	padding: .4rem;
	position: relative;
	top: 0;
	transform: translateY(-100%);
	transition: transform 0.3s;
	width: 100%;
	z-index: 10;
}

a#skip:focus {transform: translateY(0%);}


/* ----------------------------------------------------------------------------
 * Homepage Animation
 * --------------------------------------------------------------------------*/

@keyframes hero-lift-fade {
  0% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-10rem);
    filter: blur(8px);
  }
}

/* ----------------------------------------------------------------------------
 * Media Queries
 * Using range syntax (baseline: 2023)
 * ------------------------------------------------------------------------- */

@media (641px <= width <= 1360px) {
  .grid-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (width <= 1024px) {
  .grid-items,
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid .col {
    grid-column: span 1;
  }
}

@media (width <= 640px) {
  .main-nav {gap: 1rem;}
  .logo-block {
    width: 60px;
    height: 30px;
  }

  .hero {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }

  .intro {padding-top: 4rem;}

  .secondary-info h2 {
    max-width: 100%;
  }

  .grid-items,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid .col {
    grid-column: span 1;
  }

}

/* ----------------------------------------------------------------------------
 * Reduced Motion Overrides
 * --------------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
  h1 {animation: none;}

  .intro,
  .collage-block {
    animation: none;
  }

  .nav-link,
  .hero-button {
    transition: none;
  }
}