@font-face {
  font-family: Manrope;
  src: url("Manrope-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --bone: #f7f3e8;
  --black: #0d0d0d;
  --aqua: #00ffe0;
  --pink: #ff2da6;
  --lime: #d6ff00;
  --gutter: clamp(20px, 3vw, 48px);
  color: var(--black);
  background: var(--bone);
  font-family: Manrope, sans-serif;
  font-synthesis: none;
  scrollbar-color: var(--black) var(--bone);
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
svg { width: 16px; height: 16px; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.75; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
::selection { color: var(--bone); background: var(--black); }
.msx ::selection, .in-progress ::selection { color: var(--black); background: var(--aqua); }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 2; padding: 16px 24px; color: var(--black); background: var(--lime); }
.skip-link:focus { top: 16px; }
.masthead { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px var(--gutter); border-bottom: 2px solid; font-size: 12px; font-weight: 800; }
.company-name { text-decoration: none; }
.masthead nav { display: flex; flex-wrap: wrap; gap: 28px; }
.masthead nav a { padding-block: 8px; }
.introduction { padding: 16px var(--gutter) 42px; }
h1 { font-size: clamp(80px, 15.5vw, 260px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.intro-copy { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; margin-top: 24px; }
.statement { font-size: clamp(26px, 3.2vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; }
.intro-detail { display: flex; gap: 32px; align-items: end; }
.intro-detail p { max-width: 42ch; font-size: 14px; line-height: 1.6; }
.intro-detail a { flex: 0 0 auto; font-size: 13px; font-weight: 800; }
.wall-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px var(--gutter); border-block: 2px solid; background: var(--aqua); }
.wall-heading h2 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.wall-heading p { font-size: 12px; font-weight: 700; }
.rack { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 22px var(--gutter) 0; gap: 0 18px; }
.venture { grid-column: span 3; display: flex; flex-direction: column; min-width: 0; min-height: 480px; margin-bottom: 24px; padding: 28px 22px 22px; border: 2px solid var(--black); border-bottom-width: 12px; }
.venture h3 { margin-bottom: 26px; font-size: clamp(32px, 3.2vw, 52px); letter-spacing: -.04em; line-height: 1; overflow-wrap: anywhere; }
.description { max-width: 45ch; font-size: 14px; line-height: 1.65; }
.venture-foot { margin-top: auto; padding-top: 28px; }
.stage { padding-top: 12px; margin-bottom: 12px; border-top: 1px solid currentColor; font-size: 12px; line-height: 1.5; font-weight: 800; }
.venture a { display: inline-block; font-size: 12px; font-weight: 800; }
.qualification, .external-note, .name-note { font-size: 12px; line-height: 1.65; }
.external-note { margin-top: 12px; max-width: 30ch; }
.lovegasm { grid-column: span 5; background: var(--pink); }
.lovegasm h3 { font-size: clamp(48px, 6.2vw, 100px); font-weight: 650; }
.lovegasm .description { max-width: 28ch; font-size: 21px; line-height: 1.45; letter-spacing: -.02em; }
.msx { grid-column: span 4; background: var(--black); color: var(--aqua); }
.msx h3 { font-weight: 800; }
.msx h3 span { display: block; }
.msx-name { font-size: clamp(72px, 8.3vw, 130px); font-style: italic; font-synthesis: style; line-height: .9; margin: 0 0 12px -3px; }
.storefront { grid-column: span 3; background: var(--bone); }
.storefront h3 { font-size: clamp(28px, 2.65vw, 44px); font-weight: 500; line-height: 1.15; margin-bottom: 8px; }
.storefront .name-note { margin-bottom: 26px; }
.pantry { background: var(--lime); }
.pantry h3 { font-size: clamp(42px, 4.4vw, 70px); font-weight: 800; line-height: .98; }
.axiolint { background: var(--bone); }
.axiolint h3 { font-weight: 450; padding-block: 12px; border-block: 2px solid; }
.axiolint > .qualification { margin-top: 14px; }
.cats { background: var(--pink); }
.cats h3 { font-size: clamp(52px, 5vw, 80px); font-style: italic; font-synthesis: style; text-transform: uppercase; font-weight: 800; line-height: .88; }
.glotterfly { background: var(--aqua); }
.glotterfly h3 { font-size: clamp(32px, 3vw, 48px); font-weight: 650; padding-top: 54px; }
.in-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 72px var(--gutter); color: var(--bone); background: var(--black); }
.progress-heading h2 { color: var(--lime); font-size: clamp(42px, 5vw, 80px); line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.progress-heading p { margin-top: 32px; font-size: 14px; line-height: 1.7; }
.progress-notes { max-width: 60ch; }
.progress-notes > div { border-top: 1px solid var(--bone); padding-top: 20px; }
.progress-notes > div + div { margin-top: 40px; }
.progress-notes h3 { font-size: 20px; margin-bottom: 14px; }
.progress-notes p { font-size: 14px; line-height: 1.8; }
.people { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: 72px var(--gutter) 88px; }
.people-heading h2 { font-size: 42px; line-height: 1.1; letter-spacing: -.04em; }
.people-heading p { margin-top: 16px; font-size: 14px; }
.person { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-block: 24px; border-top: 2px solid; }
.person h3 { font-size: clamp(26px, 3vw, 44px); font-weight: 550; letter-spacing: -.04em; }
.person a { font-size: 12px; font-weight: 800; }
.footer { padding: 32px var(--gutter); border-top: 2px solid; background: var(--aqua); }
.footer-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 20px; font-size: 13px; font-weight: 800; }
.company-details { display: grid; grid-template-columns: 1fr 1fr auto; align-items: start; gap: 32px; margin-top: 40px; font-size: 12px; line-height: 1.7; }
.detail-label { font-size: 12px; font-weight: 800; margin-bottom: 10px; }
address { font-style: normal; }
.copyright { margin-top: 40px; font-size: 12px; }
@media (min-width: 1700px) { .rack { gap: 0 24px; } .venture { padding: 32px; } }
@media (max-width: 1100px) {
  .intro-detail { display: block; }
  .intro-detail a { display: inline-block; margin-top: 16px; }
  .rack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .venture { grid-column: span 1; min-height: 420px; }
  .venture h3 { font-size: 48px; }
  .lovegasm h3 { font-size: clamp(44px, 7vw, 76px); }
  .msx-name { font-size: 100px; }
  .pantry h3, .cats h3 { font-size: 64px; }
  .glotterfly { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; min-height: 280px; }
  .glotterfly h3 { padding-top: 0; grid-row: span 2; font-size: clamp(42px, 6vw, 64px); }
  .glotterfly .venture-foot { padding-top: 24px; }
  .in-progress { gap: 40px; }
}
@media (max-width: 650px) {
  .masthead { align-items: start; flex-direction: column; gap: 10px; padding-block: 16px; }
  .masthead nav { gap: 28px; }
  .introduction { padding-top: 24px; padding-bottom: 32px; }
  h1 { font-size: 20vw; }
  .intro-copy { grid-template-columns: 1fr; gap: 22px; margin-top: 24px; }
  .statement { font-size: 32px; }
  .intro-detail p { max-width: 42ch; }
  .wall-heading { align-items: start; flex-direction: column; gap: 8px; }
  .rack { display: block; padding-top: 20px; }
  .venture { min-height: 0; margin-bottom: 20px; padding: 28px 24px 24px; }
  .venture h3 { font-size: 44px; }
  .lovegasm h3 { font-size: clamp(40px, 12vw, 68px); }
  .lovegasm .description { font-size: 20px; }
  .msx-name { font-size: 96px; }
  .pantry h3 { font-size: 64px; }
  .cats h3 { font-size: 72px; }
  .glotterfly { display: flex; }
  .glotterfly h3 { font-size: clamp(36px, 10vw, 52px); }
  .in-progress, .people { grid-template-columns: 1fr; gap: 36px; padding-block: 48px; }
  .progress-heading h2 { font-size: 48px; }
  .progress-heading p { margin-top: 24px; }
  .people-heading h2 { font-size: 36px; }
  .person h3 { font-size: 28px; }
  .company-details { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }