@font-face {
  font-family:Geist;
  src:url('../assets/fonts/geist.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Geist;
  src:url('../assets/fonts/geist.woff2') format('woff2');
  font-style:normal;
  font-weight:500;
  font-display:swap
}
@font-face {
  font-family:Geist;
  src:url('../assets/fonts/geist.woff2') format('woff2');
  font-style:normal;
  font-weight:700;
  font-display:swap
}
@font-face {
  font-family:Pixel;
  src:url('../assets/fonts/geist-pixel.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:PixelCustom;
  src:url('../assets/fonts/geist-pixel-custom.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap
}
:root {
  --black:#000;
  --panel:#0c0c0c;
  --nav:#1f1f1f;
  --red:#cd2b1d;
  --paper:#f4f1eb;
  --line:#1f1f1f;
  --muted:#7e7c79;
  --page-padding:30px;
  --section-padding:200px;
  --max-width:1440px;
  color-scheme:dark
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:auto;
  background:var(--black)
}
body {
  margin:0;
  background:var(--black);
  color:var(--paper);
  font-family:Geist,Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.2;
  letter-spacing:-.02em
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:400
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
button,a,article {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,article:focus-visible {
  outline:1px solid var(--paper);
  outline-offset:6px
}
button {
  color:inherit
}
::selection {
  color:var(--paper);
  background:var(--red)
}
.container {
  width:100%;
  max-width:var(--max-width);
  margin-inline:auto
}
.section {
  padding:var(--section-padding) var(--page-padding)
}
.accent {
  color:var(--red)
}
.muted {
  color:var(--muted)
}
.section-label {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--red);
  font-size:14px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.02em
}
.section-heading {
  font-family:Pixel,PixelCustom,monospace;
  font-size:40px;
  line-height:1.1;
  letter-spacing:-.05em;
  font-weight:400
}
.body-copy {
  max-width:450px;
  color:#b5b3af
}
.brand-logo {
  display:block;
  width:auto;
  height:29px
}
.site-header {
  position:fixed;
  left:50%;
  top:24px;
  transform:translateX(-50%);
  z-index:50;
  width:267px
}
.navigation {
  background:var(--nav);
  padding:15px;
  width:100%;
  overflow:hidden
}
.nav-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:29px
}
.menu-toggle {
  border:0;
  background:none;
  display:grid;
  grid-template-columns:repeat(3,4px);
  gap:5px;
  padding:0;
  cursor:pointer;
  width:22px;
  height:22px;
  align-content:center
}
.menu-toggle i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--paper);
  opacity:.3;
  transition:opacity .25s,transform .35s
}
.menu-toggle i:nth-child(3n+2) {
  opacity:1
}
.menu-toggle:hover i,.is-open .menu-toggle i {
  opacity:1
}
.is-open .menu-toggle i:nth-child(2n) {
  opacity:.25;
  transform:scale(.6)
}
.menu-links {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  height:0;
  visibility:hidden;
  opacity:0;
  transition:height .45s cubic-bezier(.22,1,.36,1),opacity .3s,margin .45s;
  margin-top:0
}
.is-open .menu-links {
  height:150px;
  visibility:visible;
  opacity:1;
  margin-top:30px
}
.rolling-link {
  font-family:Pixel,monospace;
  position:relative;
  display:block;
  overflow:hidden;
  line-height:1.1;
  height:1.1em;
  font-size:20px
}
.rolling-link>span {
  display:block;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  white-space:pre
}
.rolling-link>span+span {
  color:var(--red)
}
.rolling-link:hover>span,.rolling-link:focus-visible>span {
  transform:translateY(-100%)
}
#loading-screen {
  position:fixed;
  inset:0;
  z-index:1000;
  background:var(--red);
  transform-origin:top;
  transition:transform .85s cubic-bezier(.76,0,.24,1);
  pointer-events:none
}
.loaded #loading-screen {
  transform:translateY(-100%)
}
.hero {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:150px 30px 100px;
  overflow:hidden
}
.hero-content {
  position:relative;
  width:100%;
  max-width:1440px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:25px;
  text-align:center;
  opacity:0;
  transform:translateY(100px);
  transition:transform 1.2s cubic-bezier(.22,1,.36,1) .2s,opacity 1.2s .2s
}
.loaded .hero-content {
  opacity:1;
  transform:none
}
.hero-title {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:0
}
.location {
  font-size:14px;
  line-height:1.2
}
.hero h1 {
  white-space:pre-wrap;
  font-family:PixelCustom,Pixel,monospace;
  font-size:100px;
  line-height:.95;
  letter-spacing:-.06em
}
.hero-subtitle {
  font-size:16px;
  line-height:1.2
}
.primary-button {
  width:160px;
  min-height:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:var(--red);
  font-size:16px;
  font-weight:500;
  overflow:hidden;
  transition:color .3s,background .3s
}
.primary-button:hover,.primary-button:focus-visible {
  background:var(--paper);
  color:var(--red)
}
.button-corner {
  position:absolute;
  right:10px;
  top:7px;
  opacity:0;
  transform:translate(-5px,5px);
  transition:.3s
}
.primary-button:hover .button-corner {
  opacity:1;
  transform:none
}
.motion-background {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:#000
}
.motion-background video,.motion-background canvas {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0
}
.motion-background canvas {
  opacity:0
}
.motion-background.is-rendering canvas {
  opacity:1
}
.motion-background.is-rendering video {
  visibility:hidden
}
.hero .motion-background {
  transform:scale(1.2);
  transition:transform 1.8s cubic-bezier(.22,1,.36,1)
}
.loaded .hero .motion-background {
  transform:scale(1)
}
.charter-layout {
  display:flex;
  gap:70px;
  align-items:stretch
}
.charter-film {
  position:relative;
  flex:1;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line)
}
.charter-film video {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover;
  inset:0
}
.red-overlay {
  position:absolute;
  inset:1px;
  mix-blend-mode:color;
  background:var(--red);
  pointer-events:none
}
.charter-copy {
  flex:1.5;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:50px
}
.charter-intro {
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%
}
.charter-copy .section-heading {
  max-width:868px
}
.charter-copy hr {
  width:100%
}
hr {
  height:1px;
  background:#f4f1eb26;
  border:0;
  margin:0
}
.charter-copy .body-copy {
  font-size:16px;
  line-height:1.2
}
.slogan {
  height:400vh;
  position:relative
}
.slogan-sticky {
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--black);
  transition:background .65s
}
.slogan.is-red .slogan-sticky {
  background:var(--red)
}
.slogan-rings {
  width:95vh;
  height:95vh;
  max-width:96vw;
  max-height:96vw;
  position:absolute
}
.slogan-rings i {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid #f4f1eb26
}
.slogan-rings i:nth-child(2) {
  inset:8%;
  animation-delay:-3s
}
.slogan-rings i:nth-child(3) {
  inset:16%;
  animation-delay:-6s
}
.slogan-rings i:after {
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:50%;
  background:conic-gradient(transparent 20%,var(--red) 35%,transparent 50%);
  mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));
  animation:ring-turn 14s linear infinite
}
.slogan.is-red .slogan-rings i:after {
  background:conic-gradient(transparent 10%,var(--paper) 35%,transparent 60%)
}
.slogan-words {
  position:relative;
  text-align:center;
  font:100px/.95 PixelCustom,monospace;
  letter-spacing:-.06em;
  width:100%
}
.slogan-line {
  height:.95em;
  overflow:hidden;
  position:relative
}
.slogan-line>span {
  display:block;
  position:absolute;
  inset:0;
  transform:translateY(var(--first-y,0%));
  opacity:var(--first-opacity,1)
}
.slogan-line>span+span {
  transform:translateY(var(--second-y,100%));
  opacity:var(--second-opacity,0)
}
.slogan-line b {
  font-weight:400
}
.craft-layout {
  display:flex;
  align-items:flex-start;
  gap:70px
}
.craft-heading {
  flex:1;
  min-width:0;
  position:sticky;
  top:140px;
  display:flex;
  flex-direction:column;
  gap:20px
}
.craft-heading h2 {
  max-width:330px
}
.craft-grid {
  flex:2.5;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.craft-card {
  aspect-ratio:1.68407;
  position:relative;
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--panel);
  border:1px solid var(--line);
  overflow:hidden
}
.craft-icon {
  color:var(--red);
  width:32px;
  height:32px;
  position:relative;
  z-index:1
}
.card-copy {
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  z-index:1;
  width:100%
}
.card-copy h3 {
  font-size:24px;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.02em
}
.card-copy p {
  font-size:16px;
  line-height:1.2
}
.craft-background {
  position:absolute;
  inset:0;
  background:url('../assets/images/craft-dither.png') center/cover;
  opacity:0;
  transform:scale(1.1);
  transition:opacity .4s,transform .7s
}
.craft-card:hover .craft-background,.craft-card:focus .craft-background {
  opacity:1;
  transform:scale(1)
}
.corner-marks {
  position:absolute;
  inset:10px;
  opacity:0;
  transition:opacity .3s
}
.craft-card:hover .corner-marks,.craft-card:focus .corner-marks {
  opacity:.7
}
.corner-marks i {
  position:absolute;
  width:12px;
  height:12px;
  border-top:1px solid var(--paper);
  border-left:1px solid var(--paper)
}
.corner-marks i:nth-child(1) {
  top:0;
  left:0
}
.corner-marks i:nth-child(2) {
  top:0;
  right:0;
  transform:rotate(90deg)
}
.corner-marks i:nth-child(3) {
  bottom:0;
  left:0;
  transform:rotate(-90deg)
}
.corner-marks i:nth-child(4) {
  bottom:0;
  right:0;
  transform:rotate(180deg)
}
.spotlight {
  position:relative;
  height:300vh
}
.spotlight-sticky {
  height:100vh;
  position:sticky;
  top:0;
  background:var(--panel);
  padding:150px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  overflow:hidden
}
.spotlight .motion-background {
  background:var(--panel)
}
.spotlight-title {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:center
}
.spotlight-film {
  z-index:2;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:30vw;
  height:30vh;
  overflow:hidden;
  will-change:width,height
}
.spotlight-film video {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}
.spotlight-caption {
  position:relative;
  text-align:center;
  max-width:600px
}
.workshop-layout,.artisans-layout {
  display:flex;
  flex-direction:column;
  gap:50px
}
.workshop-heading,.artisans-heading {
  display:flex;
  flex-direction:column;
  gap:20px
}
.workshop-heading h2 {
  max-width:470px
}
.workshop-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.workshop-card {
  background:var(--panel);
  border:1px solid var(--line);
  padding:50px;
  display:flex;
  flex-direction:column;
  gap:50px;
  overflow:hidden
}
.phone-stage,.orbit-stage {
  height:555px;
  width:100%;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center
}
.phone {
  height:555px;
  width:100%;
  max-width:420px;
  position:relative;
  background:linear-gradient(#1f1f1f,#0c0c0c);
  border-radius:50px 50px 0 0;
  box-shadow:0 -2px 0 1px #f4f1eb26;
  mask:linear-gradient(#000 48%,transparent 100%);
  overflow:hidden
}
.dynamic-island {
  width:84px;
  height:26px;
  border-radius:50px;
  background:#000;
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:3
}
.conversation {
  position:absolute;
  inset:16px 16px 100px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:12px;
  overflow:hidden;
  padding:16px
}
.message-list {
  display:flex;
  flex-direction:column;
  gap:12px
}
.message {
  align-self:flex-start;
  max-width:85%;
  padding:12px 15px;
  background:#303030;
  color:var(--paper);
  font-size:14px;
  line-height:1.3;
  border-radius:12px;
  animation:bubble-in .45s cubic-bezier(.22,1,.36,1) both
}
.message.sent {
  align-self:flex-end;
  background:var(--red)
}
.typing {
  display:flex;
  gap:4px;
  background:#303030;
  padding:10px 14px;
  border-radius:20px;
  width:max-content
}
.typing i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#aaa;
  animation:typing 1s ease infinite
}
.typing i:nth-child(2) {
  animation-delay:.15s
}
.typing i:nth-child(3) {
  animation-delay:.3s
}
.orbit {
  position:absolute;
  top:50%;
  left:50%;
  aspect-ratio:1;
  transform:translate(-50%,-50%)
}
.orbit-1 {
  width:90%
}
.orbit-2 {
  width:65%
}
.orbit-3 {
  width:40%
}
.orbit-stroke {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid #333
}
.orbit-stroke:after {
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:50%;
  background:conic-gradient(transparent 15%,var(--red) 28%,transparent 48%);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  animation:ring-turn 15s linear infinite
}
.orbit-2 .orbit-stroke:after {
  animation-direction:reverse;
  animation-duration:12s
}
.orbit-3 .orbit-stroke:after {
  animation-duration:9s
}
.orbit-icon {
  position:absolute;
  width:50px;
  height:50px;
  object-fit:contain;
  transform:translate(-50%,-50%);
  animation:orbit-float 5s ease-in-out infinite
}
.orbit-2 .orbit-icon {
  animation-delay:-1s
}
.orbit-3 .orbit-icon {
  animation-delay:-3s
}
.orbit-core {
  width:80px;
  height:80px;
  object-fit:contain;
  position:relative
}
.artisans {
  padding:0 var(--page-padding)
}
.artisans-heading h2 {
  max-width:350px
}
.people-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px
}
.person {
  aspect-ratio:1.07307;
  position:relative;
  overflow:hidden;
  background:var(--red)
}
.portrait {
  position:absolute;
  inset:0;
  width:100%;
  height:105%;
  object-fit:cover;
  transition:opacity .55s,transform .7s
}
.portrait.color {
  opacity:0
}
.person:hover .portrait.color,.person:focus .portrait.color {
  opacity:1
}
.person:hover .portrait,.person:focus .portrait {
  transform:scale(1.015)
}
.person-info {
  position:absolute;
  left:12px;
  right:12px;
  bottom:-100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#000;
  padding:18px;
  transition:bottom .45s cubic-bezier(.22,1,.36,1);
  z-index:2
}
.person:hover .person-info,.person:focus .person-info {
  bottom:12px
}
.person-info h3 {
  font-size:20px;
  line-height:1.2;
  letter-spacing:-.04em
}
.person-info p {
  color:var(--red);
  font-size:16px;
  margin-top:3px
}
.social-reference {
  font-size:32px;
  line-height:40px;
  width:40px;
  height:40px;
  border-radius:3px;
  text-align:center;
  color:#000;
  background:#fff;
  user-select:none
}
.footer {
  padding-top:200px;
  overflow:hidden
}
.footer-inner {
  padding-inline:30px;
  max-width:1500px
}
.footer-top {
  display:flex;
  align-items:flex-start
}
.footer-navigation,.footer-contact,.footer-brand {
  flex:1;
  min-width:0
}
.footer-navigation {
  display:flex;
  flex-direction:column;
  gap:20px
}
.footer-navigation>div {
  display:flex;
  flex-direction:column;
  gap:10px
}
.footer-navigation .rolling-link {
  font-size:40px;
  letter-spacing:-.05em
}
.footer-contact {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:10px
}
.footer-email {
  font:40px/1.1 Pixel,monospace;
  letter-spacing:-.05em;
  color:var(--red);
  white-space:nowrap;
  transition:color .3s
}
.footer-email:hover {
  color:var(--paper)
}
.footer-brand {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:20px
}
.footer-brand .brand-logo {
  height:42px
}
.footer-brand>p {
  font-size:12px;
  width:205px;
  line-height:1.3
}
.footer-legal {
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:20px 0
}
.legal-links {
  display:flex;
  gap:60px;
  justify-content:flex-end;
  font-size:14px
}
.copyright {
  display:flex;
  justify-content:space-between;
  gap:60px;
  font-size:16px
}
.footer-marquee {
  aspect-ratio:2.66667;
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  pointer-events:none
}
.footer-marquee .motion-background {
  height:140%
}
.marquee-track {
  position:relative;
  display:flex;
  gap:100px;
  width:max-content;
  animation:marquee 22s linear infinite
}
.marquee-track .brand-logo {
  height:auto;
  width:100vw;
  max-width:none;
  flex:none
}
.reveal-word {
  display:inline-block;
  white-space:nowrap
}
.reveal-char {
  display:inline-block;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s,transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--char-index)*.012s)
}
.is-visible .reveal-char {
  opacity:1;
  transform:none
}
.scroll-char {
  opacity:var(--letter-opacity,.15);
  transition:opacity .1s
}
.scroll-word {
  display:inline-block;
  white-space:nowrap
}
@keyframes ring-turn {
  to {
    transform:rotate(360deg)
  }
}
@keyframes marquee {
  to {
    transform:translateX(calc(-100vw - 100px))
  }
}
@keyframes bubble-in {
  from {
    opacity:0;
    transform:translateY(14px) scale(.97)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes typing {
  50% {
    opacity:.3;
    transform:translateY(-2px)
  }
}
@keyframes orbit-float {
  50% {
    transform:translate(-50%,calc(-50% - 3px))
  }
}
@media(min-width:810px) and (max-width:1199px) {
  :root {
    --section-padding:120px
  }
  .hero h1 {
    font-size:80px
  }
  .hero-content {
    gap:20px
  }
  .section-heading {
    font-size:32px
  }
  .charter-layout,.charter-copy {
    gap:30px
  }
  .craft-layout {
    flex-direction:column;
    gap:50px
  }
  .craft-heading {
    position:relative;
    top:auto;
    flex:none;
    width:100%
  }
  .craft-grid {
    flex:none;
    width:100%
  }
  .workshop-grid {
    grid-template-columns:1fr
  }
  .people-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .workshop-layout,.artisans-layout {
    gap:30px
  }
  .card-copy h3 {
    font-size:20px
  }
  .spotlight-sticky {
    padding:120px 0
  }
  .footer {
    padding-top:120px
  }
}
@media(max-width:809px) {
  :root {
    --section-padding:70px;
    --page-padding:14px
  }
  .hero {
    padding:160px 30px 70px;
    align-items:flex-start
  }
  .hero-content {
    gap:30px
  }
  .hero-title {
    gap:10px
  }
  .hero h1 {
    font-size:60px
  }
  .section-heading {
    font-size:26px
  }
  .charter-layout {
    flex-direction:column;
    gap:30px
  }
  .charter-film {
    flex:none;
    aspect-ratio:.804444;
    width:100%
  }
  .charter-copy {
    flex:none;
    gap:20px
  }
  .charter-intro {
    gap:20px
  }
  .craft-layout {
    flex-direction:column;
    gap:30px
  }
  .craft-heading {
    position:relative;
    top:auto;
    gap:14px;
    width:100%;
    flex:none
  }
  .craft-grid {
    width:100%;
    flex:none;
    grid-template-columns:1fr;
    gap:14px
  }
  .card-copy h3 {
    font-size:20px
  }
  .spotlight-sticky {
    padding:70px 14px
  }
  .spotlight-title {
    gap:14px
  }
  .spotlight-caption {
    max-width:362px
  }
  .desktop-break {
    display:none
  }
  .workshop-layout,.artisans-layout {
    gap:30px
  }
  .workshop-heading,.artisans-heading {
    gap:20px
  }
  .workshop-grid {
    grid-template-columns:1fr
  }
  .workshop-card {
    padding:20px;
    gap:20px
  }
  .phone-stage,.phone,.orbit-stage {
    height:450px
  }
  .orbit-core {
    width:40px;
    height:40px
  }
  .people-grid {
    grid-template-columns:1fr
  }
  .person-info {
    bottom:12px
  }
  .person .portrait.color {
    display:none
  }
  .footer {
    padding-top:70px
  }
  .footer-inner {
    padding-inline:14px
  }
  .footer-top {
    display:flex;
    flex-direction:column;
    gap:40px
  }
  .footer-brand {
    order:0;
    align-items:flex-start;
    flex:none;
    width:100%
  }
  .footer-contact {
    order:1;
    flex:none;
    width:100%
  }
  .footer-navigation {
    order:2;
    flex:none;
    width:100%
  }
  .footer-brand .brand-logo {
    height:42px
  }
  .footer-navigation .rolling-link {
    font-size:32px
  }
  .footer-email {
    font-size:26px
  }
  .footer-legal {
    padding-top:40px
  }
  .legal-links,.copyright {
    flex-direction:column;
    align-items:flex-start;
    gap:14px
  }
  .footer-marquee {
    min-height:160px
  }
  .marquee-track {
    gap:50px;
    animation-name:marquee-phone
  }
  .marquee-track .brand-logo {
    width:620px
  }
  .slogan-words {
    font-size:clamp(38px,9vw,60px)
  }
  .slogan-rings {
    width:95vw;
    height:95vw
  }
  .is-open .menu-links {
    height:150px
  }
}
@keyframes marquee-phone {
  to {
    transform:translateX(-670px)
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important
  }
  .hero-content {
    opacity:1;
    transform:none
  }
  .reveal-char {
    opacity:1;
    transform:none
  }
  .scroll-char {
    opacity:1
  }
  #loading-screen {
    display:none
  }
}
/* Canvas uses the reference bitmap underneath and reveals colour through a Bayer mask. */
.portrait-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:105%;
  pointer-events:none;
  z-index:1
}
.person:has(.portrait-canvas) .portrait.color {
  opacity:0!important
}
.person:has(.portrait-canvas):hover .portrait,.person:has(.portrait-canvas):focus .portrait {
  transform:none
}

/* SHOP.GRIFT: supplied brand/artifacts fitted to the retained layout. */
.brand-logo{display:inline-flex;align-items:center;gap:7px;height:29px;white-space:nowrap;font:24px/1 Geist,Arial,sans-serif;letter-spacing:-.055em}
.star-mark{display:inline-block;position:relative;width:29px;height:29px;overflow:hidden;flex:none;vertical-align:middle}
.star-mark img{position:absolute;max-width:none;width:145%;height:145%;left:-22.5%;top:-22.5%;mix-blend-mode:screen;object-fit:contain}
.footer-brand .brand-logo{height:42px;font-size:29px;gap:9px}
.footer-brand .star-mark{width:42px;height:42px}
.footer-brand>p{width:230px;max-width:100%}
.footer-message{font:32px/1.1 Pixel,monospace;letter-spacing:-.05em;color:var(--red);text-align:center;max-width:340px}
.primary-button[aria-disabled="true"]{cursor:default}
.primary-button[aria-disabled="true"]:hover{background:var(--red);color:var(--paper)}
.spotlight-film img{width:100%;height:100%;display:block;object-fit:cover}
.motion-background{background:#000 url('../assets/images/craft-dither.png') center/cover}
.motion--hero,.motion--footer-background{background-blend-mode:soft-light;background-color:#090000}
.archive-card{padding:26px;gap:0}
.archive-stage{height:688px;display:grid;grid-template-columns:1fr 1.02fr;gap:18px;min-width:0}
.archive-stage figure{margin:0;min-width:0}
.archive-stage img{display:block;width:100%;min-width:0;border:1px solid #3b2623;object-fit:cover}
.archive-photo{display:flex;flex-direction:column;gap:16px}
.archive-photo img{height:calc(100% - 46px)}
.archive-stage figcaption{font-size:14px;line-height:1.35}
.lore-panel{padding-top:18px;display:flex;flex-direction:column;gap:28px;min-width:0}
.lore-panel .storyboard{aspect-ratio:1;object-fit:contain;background:#080808}
.lore-panel .card-copy h3{font-size:22px}
.lore-panel .card-copy p{color:#b5b3af;font-size:14px}
.archive-index{color:var(--red);font-size:12px;line-height:1.8}
.lore-panel>.archive-index{border-top:1px solid #682b24;padding-top:14px;margin-top:10px}
.signal-stage{grid-template-columns:.63fr 1fr}
.signal-sign{height:100%}
.signal-film{display:flex;flex-direction:column;gap:10px}
.signal-film>img{height:calc(100% - 54px);object-fit:cover}
.artisans-heading h2{max-width:470px}
.artisans-heading h2>.accent{display:block}
.person .portrait{height:100%}
.portrait-canvas{height:100%}
.marquee-track{gap:0;animation:shop-marquee 54s linear infinite}
.marquee-group{display:flex;align-items:center;gap:5vw;padding-right:5vw;flex:none;font:700 19vw/.78 Geist,Arial,sans-serif;letter-spacing:-.065em;white-space:nowrap}
.marquee-group>.star-mark{width:18vw;height:18vw}
.footer-marquee{align-items:flex-end;padding-bottom:1vw}
.disclaimer{font-size:12px;line-height:1.5;color:#8f8c87;text-align:center;padding:18px 14px 22px}
@keyframes shop-marquee{to{transform:translateX(-50%)}}
@media(max-width:1199px) and (min-width:810px){.archive-stage{height:610px}.archive-card{padding:30px}}
@media(max-width:809px){
 .archive-card{padding:20px}.archive-stage{height:450px;gap:12px;grid-template-columns:1fr 1fr}
 .signal-stage{grid-template-columns:.63fr 1fr}.lore-panel{gap:18px;padding-top:8px}.lore-panel .card-copy h3{font-size:15px}.lore-panel .card-copy p{font-size:11px}.archive-stage figcaption{font-size:11px}.archive-index{font-size:10px}
 .lore-panel>.archive-index{margin-top:0;padding-top:8px}.footer-message{font-size:26px}.footer-brand .brand-logo{height:42px}
 .marquee-track{gap:0;animation-name:shop-marquee}.marquee-group{font-size:120px;gap:26px;padding-right:26px}.marquee-group>.star-mark{width:112px;height:112px}
 .footer-marquee{padding-bottom:10px}.disclaimer{font-size:11px}
}

/* Keep headings clear of the retained fixed menu when following anchors. */
#culture,#workshop,#artisans,#footer{scroll-margin-top:100px}

@media(max-width:809px){.portrait-canvas{display:none}}

/* V3: restore the original runtime beneath the unchanged hero content. */
.hero{isolation:isolate}
.original-particles{background:#000;z-index:0;pointer-events:none}
.original-particles canvas{opacity:1;pointer-events:none}
.hero-content{z-index:1}
.navigation.is-open .menu-links{height:var(--menu-height,214px);max-height:calc(100dvh - 130px);overflow-y:auto}
.contract-hero{min-height:100svh;padding:120px 30px 90px}
.contract-content{gap:40px;max-width:1440px}
.contract-hero .contract-heading{max-width:100%;font-size:100px;line-height:1.05;overflow-wrap:anywhere;word-break:normal}
.contract-hero .contract-heading.has-ca{font-size:clamp(30px,4.3vw,70px)}
@media(max-width:809px){.contract-hero{padding:120px 30px 90px;align-items:center}.contract-hero .contract-heading{font-size:60px}.contract-hero .contract-heading.has-ca{font-size:clamp(25px,6vw,40px)}.contract-content{gap:30px}}

.menu-links>.rolling-link{flex-shrink:0}

/* Only the homepage CTA uses the recovered pixel-button reveal. */
.primary-button[data-enter-grift],.primary-button[data-enter-grift]:hover,.primary-button[data-enter-grift]:focus-visible{background:var(--red);color:var(--paper);cursor:pointer;touch-action:manipulation;user-select:none}
[data-enter-grift] .grift-pixel-surface{position:absolute;inset:0;display:grid;gap:0;pointer-events:none;z-index:0}
[data-enter-grift] .grift-pixel-surface i{display:block;background:var(--paper);box-shadow:0 0 0 1px var(--paper);opacity:0;transform:scale(.6);transform-origin:center;pointer-events:none}
[data-enter-grift] .grift-button-label{position:relative;z-index:1;pointer-events:none}