:root {
  --ink:   #0C0906;
  --coal:  #151009;
  --soot:  #1E170F;
  --bone:  #ECE3D1;
  --cream: #F6EEDB;
  --ember: #E0803B;
  --rust:  #B0532B;
  --moss:  #565041;
  --ash:   #8B8274;
}

/* -------- base -------- */
html, body { background: var(--ink); color: var(--bone); }
body {
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "ss02", "cv01";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  cursor: none;
}
@media (pointer: coarse) { body { cursor: auto; } #cursor, #cursor-ring, #cursor-label { display:none !important; } }

::selection { background: var(--ember); color: var(--ink); }

/* -------- grain + vignette overlays -------- */
.grain::after{
  content:"";
  position:fixed; inset:-50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.85  0 0 0 0 0.7  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:.08;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:90;
  animation: grain 5s steps(6) infinite;
}
@keyframes grain {
  0%,100%{ transform:translate(0,0); }
  10%{ transform:translate(-3%,-2%);}
  20%{ transform:translate(-5%,1%);}
  30%{ transform:translate(3%,-3%);}
  40%{ transform:translate(2%,5%);}
  50%{ transform:translate(-4%,2%);}
  60%{ transform:translate(-3%,-4%);}
  70%{ transform:translate(4%,3%);}
  80%{ transform:translate(-1%,-5%);}
  90%{ transform:translate(3%,2%);}
}

.vignette::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:80;
  background:
    radial-gradient(140% 90% at 50% 10%, transparent 40%, rgba(0,0,0,.55) 100%),
    radial-gradient(80% 50% at 50% 100%, transparent 50%, rgba(0,0,0,.35) 100%);
}

/* -------- custom cursor -------- */
#cursor, #cursor-ring {
  position: fixed; top:0; left:0; pointer-events:none; z-index:120;
  will-change: transform;
  mix-blend-mode: exclusion;
}
#cursor {
  width: 6px; height:6px; border-radius:50%;
  background: var(--cream);
  transform: translate(-50%,-50%);
  transition: width .25s cubic-bezier(.2,1,.2,1), height .25s cubic-bezier(.2,1,.2,1), opacity .25s;
}
#cursor-ring {
  width: 34px; height:34px; border-radius:50%;
  border:1px solid var(--bone);
  transform: translate(-50%,-50%);
  opacity:.55;
  transition: width .3s cubic-bezier(.2,1,.2,1), height .3s cubic-bezier(.2,1,.2,1), opacity .25s, border-color .25s;
}
body.hover-link #cursor        { width:0; height:0; }
body.hover-link #cursor-ring   { width:72px; height:72px; border-color: var(--ember); opacity:.8; }
#cursor-label{
  position:fixed; top:0; left:0; z-index:121; pointer-events:none;
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--ink); background: var(--ember);
  padding: 4px 8px; border-radius: 999px;
  transform: translate(12px,12px) scale(.8); opacity:0;
  transition: opacity .2s, transform .25s cubic-bezier(.2,1,.2,1);
}
body.hover-link #cursor-label { opacity:1; transform: translate(18px,18px) scale(1); }

/* -------- frame / editorial rules -------- */
.edge-rule{ border-color: rgba(236,227,209,.10); }
.corner-tick{
  position:absolute; width:14px; height:14px; border:1px solid rgba(236,227,209,.25);
}
.corner-tick.tl{ top:8px;  left:8px;  border-right:none; border-bottom:none;}
.corner-tick.tr{ top:8px;  right:8px; border-left:none;  border-bottom:none;}
.corner-tick.bl{ bottom:8px; left:8px;  border-right:none; border-top:none;}
.corner-tick.br{ bottom:8px; right:8px; border-left:none;  border-top:none;}

/* -------- display headline -------- */
.display {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.88;
}
.display em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  color: var(--cream);
}
.display .ampersand {
  font-style:italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--ember);
  display:inline-block;
}

/* reveal stagger */
.reveal-letter { display:inline-block; transform: translateY(110%); opacity:0; will-change: transform, opacity; }
.reveal-word   { display:inline-block; overflow:hidden; padding-bottom: .06em; }
.revealed .reveal-letter { animation: letterUp .9s cubic-bezier(.2,1,.2,1) forwards; }
@keyframes letterUp {
  0%   { transform: translateY(110%); opacity:0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0); opacity:1; }
}

.fade-word { display:inline-block; transform: translateY(60%); opacity:0; will-change: transform, opacity; }
.in-view .fade-word { animation: wordUp .8s cubic-bezier(.2,1,.2,1) forwards; }
@keyframes wordUp { to { transform: translateY(0); opacity:1; } }

/* -------- marquee -------- */
.marquee {
  display:flex; gap: 4rem;
  animation: scroll-x 42s linear infinite;
  will-change: transform;
}
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover { animation-play-state: paused; }

/* -------- magnetic buttons -------- */
.btn-primary, .btn-ghost {
  position:relative;
  display:inline-flex; align-items:center; gap:.6rem;
  padding: 1.05rem 1.6rem;
  border-radius: 999px;
  font-family:'Instrument Sans', sans-serif;
  font-weight:500; font-size: 15px; letter-spacing:.02em;
  transition: color .3s, background .3s, border-color .3s, transform .05s linear;
  will-change: transform;
  overflow:hidden;
}
.btn-primary {
  background: var(--ember);
  color: var(--ink);
  border: 1px solid var(--ember);
}
.btn-primary::before{
  content:""; position:absolute; inset:0; background: var(--cream);
  transform: translateY(100%); transition: transform .45s cubic-bezier(.2,1,.2,1); z-index:0;
}
.btn-primary:hover::before{ transform: translateY(0); }
.btn-primary span, .btn-primary svg { position:relative; z-index:1; }

.btn-ghost {
  background: transparent;
  color: var(--bone);
  border: 1px solid rgba(236,227,209,.25);
}
.btn-ghost:hover { border-color: var(--bone); color: var(--cream); }
.btn-primary:active, .btn-ghost:active { transform: scale(.97); }

/* -------- hover-reveal work list -------- */
.work-item {
  position: relative;
  display:block; width:100%;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(236,227,209,.10);
  transition: color .35s, padding .45s cubic-bezier(.2,1,.2,1);
}
.work-item:last-child { border-bottom: 1px solid rgba(236,227,209,.10); }

.work-item .wi-title {
  font-family:'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  transition: font-variation-settings .6s cubic-bezier(.2,1,.2,1), color .35s, transform .6s cubic-bezier(.2,1,.2,1);
  color: var(--bone);
  display:inline-block;
}
.work-item .wi-meta {
  font-family:'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ash);
}
.work-item:hover .wi-title {
  color: var(--cream);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  transform: translateX(1.2rem);
}
.work-item:hover { color: var(--cream); }
.work-item::after{
  content:""; position:absolute; right: 0; top:50%; transform: translateY(-50%) scale(0);
  width: 40px; height:40px; border-radius:50%;
  background: var(--ember);
  transition: transform .45s cubic-bezier(.2,1,.2,1);
}
.work-item:hover::after{ transform: translateY(-50%) scale(1); }

/* preview images that follow cursor */
#preview-layer {
  position: fixed; inset:0; pointer-events:none; z-index: 70;
}
.preview-card {
  position:absolute; top:0; left:0;
  width: 320px; height: 420px;
  border-radius: 6px;
  background-size: cover; background-position: center;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.9) rotate(var(--r, -3deg));
  transition: opacity .35s, transform .55s cubic-bezier(.2,1,.2,1);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 8px 22px -6px rgba(0,0,0,.5);
  will-change: transform, opacity;
}
.preview-card.active {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1) rotate(var(--r, -3deg));
}

/* -------- section numbers -------- */
.sec-num {
  font-family:'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing:.18em; color: var(--ash);
  text-transform: uppercase;
}

.qmark {
  font-family:'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--ember);
  font-weight: 300;
}

/* -------- ticker -------- */
.ticker-bar {
  font-family:'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: var(--ash);
}
.ticker-bar .dot {
  width:6px; height:6px; border-radius:50%; background: var(--ember);
  display:inline-block; box-shadow: 0 0 12px var(--ember);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity:.6; transform: scale(1);}
  50%     { opacity:1; transform: scale(1.3);}
}

/* -------- loader -------- */
#loader {
  position: fixed; inset:0; background: var(--ink);
  z-index: 200; display:flex; align-items:center; justify-content:center;
  transition: opacity .6s .2s, visibility .6s .2s;
}
#loader.done { opacity:0; visibility:hidden; }
#loader .mark {
  font-family:'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(4rem, 14vw, 10rem);
  color: var(--cream);
  letter-spacing: -0.04em;
  animation: markBreathe 1.6s cubic-bezier(.2,1,.2,1) forwards;
}
@keyframes markBreathe {
  0%   { opacity:0; transform: translateY(20px) scale(.96); letter-spacing: .2em;}
  40%  { opacity:1; }
  100% { opacity:1; transform: translateY(0) scale(1); letter-spacing: -0.04em;}
}

/* rotator */
.rotator {
  display:inline-flex; vertical-align: baseline;
  position: relative; overflow: hidden;
  height: 1em; line-height: 1;
}
.rotator .slot {
  display:inline-block; padding-right: .15em;
  animation: rotateSlot 10s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes rotateSlot {
  0%, 22%   { transform: translateY(0);     }
  25%, 47%  { transform: translateY(-100%); }
  50%, 72%  { transform: translateY(-200%); }
  75%, 97%  { transform: translateY(-300%); }
  100%      { transform: translateY(-400%); }
}

.diag-line {
  display:block; width:100%; height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(236,227,209,.2) 30%, rgba(236,227,209,.2) 70%, transparent 100%);
}

.u-link {
  position:relative; display:inline-block;
}
.u-link::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform .5s cubic-bezier(.2,1,.2,1);
}
.u-link:hover::after { transform-origin: left; transform: scaleX(0); animation: u-rein .8s cubic-bezier(.2,1,.2,1) .25s forwards; }
@keyframes u-rein { to { transform-origin:left; transform: scaleX(1);} }

.big-italic {
  font-family:'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* sparkle stars */
.spark {
  position:absolute;
  color: var(--ember);
  opacity:.8;
  animation: twirl 9s ease-in-out infinite;
}
@keyframes twirl {
  0%,100% { transform: rotate(0deg) scale(1);}
  50%     { transform: rotate(180deg) scale(1.15);}
}

/* slide loop for scroll hint */
@keyframes slideLoop {
  0%   { transform: translateX(-100%); }
  55%,100%  { transform: translateX(300%); }
}

/* nav current */
.nav-link.is-current { color: var(--ember); }

/* ambient canvas positioning */
#ambient { position:absolute; inset:0; width:100%; height:100%; z-index:0; }

/* page hero shared */
.page-hero {
  position: relative; overflow: hidden;
  padding-top: 132px;
}

/* tilt decks (for branding page logo tiles) */
.tile {
  position:relative;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(236,227,209,.10);
  background: var(--soot);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition: transform .5s cubic-bezier(.2,1,.2,1), border-color .35s, background .35s;
}
.tile:hover {
  transform: translateY(-6px);
  border-color: var(--ember);
  background: var(--coal);
}
.tile .tile-glow {
  position:absolute; inset:-20%;
  background: radial-gradient(closest-side, rgba(224,128,59,.25), transparent 70%);
  opacity:0; transition: opacity .35s;
  pointer-events:none;
}
.tile:hover .tile-glow { opacity:1; }
.tile-mark {
  font-family:'Fraunces', serif;
  font-style: italic;
  color: var(--cream);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  text-align:center;
  line-height: 1.05;
  padding: 0 1rem;
  font-size: clamp(1.2rem, 2.1vw, 1.8rem);
  transition: color .35s, transform .5s cubic-bezier(.2,1,.2,1);
  letter-spacing: -0.02em;
}
.tile:hover .tile-mark { color: var(--ember); transform: scale(1.03); }
.tile-meta {
  position:absolute; bottom:.6rem; left:.7rem;
  font-family:'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing:.14em; text-transform:uppercase; color: var(--ash);
}

/* responsive tightening */
@media (max-width: 740px){
  .display { letter-spacing: -0.035em; }
  .work-item:hover .wi-title { transform: none; }
  .preview-card { display:none; }
}

/* -------- mobile nav: hamburger + drawer -------- */
.nav-hamburger{
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(236,227,209,.25);
  border-radius: 999px;
  background: transparent;
  color: var(--bone);
  position: relative;
  cursor: none;
  transition: border-color .3s, background .3s;
}
.nav-hamburger:hover { border-color: var(--bone); }
.nav-hamburger span {
  position: absolute;
  left: 11px; right: 11px; height: 1px;
  background: currentColor;
  transition: transform .4s cubic-bezier(.2,1,.2,1), top .3s, opacity .3s;
}
.nav-hamburger span:nth-child(1) { top: 16px; }
.nav-hamburger span:nth-child(2) { top: 23px; }
body.menu-open .nav-hamburger span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
body.menu-open .nav-hamburger span:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0; z-index: 150;
  background: var(--ink);
  transform: translateY(-100%);
  transition: transform .55s cubic-bezier(.77,0,.18,1);
  display: flex; flex-direction: column;
  padding: 88px 24px 32px;
  overflow-y: auto;
  will-change: transform;
}
.mobile-menu::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 30% 30%, rgba(224,128,59,.10), transparent 60%),
    radial-gradient(50% 40% at 80% 80%, rgba(176,83,43,.10), transparent 60%);
}
body.menu-open .mobile-menu { transform: translateY(0); }
body.menu-open { overflow: hidden; }

.mobile-menu ol {
  list-style: none; margin: 0; padding: 0;
  position: relative; z-index: 1;
}
.mobile-menu li {
  border-bottom: 1px solid rgba(236,227,209,.10);
}
.mobile-menu a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 0;
  font-family:'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--bone);
  transition: color .3s, transform .5s cubic-bezier(.2,1,.2,1);
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0;
}
.mobile-menu a .mm-num {
  font-family:'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ash);
  font-variation-settings: normal;
  align-self: center;
}
.mobile-menu a:hover,
.mobile-menu a:focus-visible,
.mobile-menu a.is-current {
  color: var(--ember);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  transform: translateX(.5rem);
}
.mobile-menu .mm-footer {
  margin-top: auto; padding-top: 2rem;
  position: relative; z-index: 1;
  border-top: 1px solid rgba(236,227,209,.10);
  font-family:'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ash);
  display: flex; flex-direction: column; gap: .75rem;
}
.mobile-menu .mm-footer a { display:inline; font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:400; color: var(--bone); letter-spacing:.16em; text-transform:uppercase; padding:0; }
.mobile-menu .mm-footer a:hover { color: var(--ember); font-style:normal; transform:none; font-variation-settings: normal; }

.mobile-menu .mm-cta {
  margin-top: 2rem; margin-bottom: 1rem;
  position: relative; z-index: 1;
}

@media (max-width: 767px) {
  .nav-hamburger { display: inline-flex; }
  nav .btn-ghost { display: none; }        /* hide "Begin a project" pill on mobile */
  nav .nav-link-brand-sub { display:none; } /* if present */
  /* tighten ticker bar */
  .ticker-bar { font-size: 9.5px; letter-spacing: .14em; }
}

/* form inputs editorial style */
.ed-field {
  position: relative;
  padding: 1.4rem 0 .9rem 0;
  border-bottom: 1px solid rgba(236,227,209,.18);
  transition: border-color .4s;
}
.ed-field:focus-within { border-color: var(--ember); }
.ed-field label {
  position: absolute; top: 1.55rem; left: 0;
  font-family:'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ash);
  pointer-events: none;
  transition: transform .35s cubic-bezier(.2,1,.2,1), color .35s, top .35s;
}
.ed-field input,
.ed-field textarea,
.ed-field select {
  width: 100%; border: none; background: transparent;
  color: var(--cream);
  font-family:'Fraunces', serif;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-variation-settings: "opsz" 72, "SOFT" 50;
  letter-spacing: -0.015em;
  padding: 1.2rem 0 .3rem 0;
  outline: none;
  resize: vertical;
  font-style: italic;
}
.ed-field textarea { min-height: 110px; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5;}
.ed-field.filled label,
.ed-field:focus-within label {
  top: 0; transform: translateY(0);
  color: var(--ember);
}

.pill-check {
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .65rem 1rem;
  border: 1px solid rgba(236,227,209,.18);
  border-radius: 999px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13.5px;
  cursor: none;
  color: var(--bone);
  transition: all .35s;
  user-select: none;
}
.pill-check input { display:none; }
.pill-check:has(input:checked) {
  background: var(--ember); color: var(--ink); border-color: var(--ember);
}
.pill-check:hover { border-color: var(--bone); color: var(--cream); }
.pill-check:has(input:checked):hover { color: var(--ink); }