:root{
  --bg: #0b0b0b;
  --fg: #FCF3E3;
  --muted: rgba(242,242,242,.70);
  --hair: rgba(242,242,242,.14);
  --soft: rgba(242,242,242,.08);
  --accent: #3F2B1E;
  --accmuted: #7a6151;
  --approach-highlight: #6a60d6;

  --paper: #FCF3E3;
  --ink: #0b0b0b;
  --inkMuted: rgba(11,11,11,.70);
  --inkHair: rgba(11,11,11,.14);
  --inkSoft: rgba(11,11,11,.08);

  --radius: 24px;
  --pad: 18px;
  --railW: 260px;
  --topH: 0px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-dongle: "Dongle";
  --font-hope-sans: "Hope Sans";
  --font-geist-mono: "Geist Mono";
  --font-logo: "MuseoModerno", "Museo Moderno", "Museo Modern", var(--sans);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  overflow: hidden; /* we scroll inside the stack */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: auto;
}
body::-webkit-scrollbar{ width: 0; height: 0; }
body.cursor-ready,
body.cursor-ready *{
  cursor: none;
}

.customCursor{
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.18s ease, height 0.18s ease, border 0.18s ease, background 0.18s ease, opacity 0.2s ease;
}
.customCursor.is-pointer{
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1.5px solid #fff;
}
.customCursor.is-hidden{
  opacity: 0;
}
@media (pointer: coarse){
  body{ cursor: auto; }
  .customCursor{ display: none; }
}

/* Frame */
.frame{
  position: fixed;
  inset: var(--topH) 0 0 0;
  display: grid;
  grid-template-columns: 1fr var(--railW); /* RIGHT rail */
}

/* Scroll stack */
.stack{
  height: calc(100vh - var(--topH));
  overflow-y: auto;
  padding: 14px;
  padding-right: 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.stack::-webkit-scrollbar{ width: 0; height: 0; }

/* Panels (full viewport, with big rounded UI look) */
.panel{
  height: calc(100vh - var(--topH) - 28px);
  border-radius: calc(var(--radius) / 2);
  border: 1.5px solid var(--fg);
  background: var(
    --panel-bg,
    linear-gradient(180deg, rgba(242,242,242,.07), rgba(242,242,242,.04))
  );
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

.panel.isLight{
  background: var(--panel-bg, var(--paper));
  color: var(--ink);
  border: 1px solid var(--fg);
}

/* Per-panel background colors */
#intro{ --panel-bg: var(--bg); }
#approach{
  --panel-bg: transparent;
}
#approach.panel{
  border: 0;
  color: var(--fg);
  transition: height 380ms ease;
  overflow: hidden;
}
#approach.panel.is-collapsed{
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  margin-bottom: 0;
}
#approach .panelInner{
  padding: 0;
  gap: 22px;
}
#approach.panel.is-collapsed .panelInner{
  padding: 0;
  height: auto;
  grid-template-rows: auto;
  gap: 0;
}
#approach .panelIndex,
#approach .panelLabel{
  color: #f6efe6;
}
#work{ --panel-bg: #FCF3E3; }
#services{ --panel-bg: #0b0b0b; }
#resources{ --panel-bg: #FCF3E3; }
#contact{ --panel-bg: #FCF3E3; }
#work{
  --work-card-height: 40vh;
}

/* Let Selected Works panel fit its content to avoid excess empty space */
#work.panel{
  height: auto;
  min-height: 0;
}

#work .panelInner{
  height: auto;
}

#intro.panel.isLight{
  color: var(--fg);
  border-color: var(--fg);
  border-width: 1.5px;
}
#intro.panel.isLight .lead{ color: var(--muted); }
#intro.panel.isLight .miniCard{
  border-color: var(--fg);
  background: color-mix(in srgb, var(--soft) 70%, transparent);
}
#intro.panel.isLight .miniK{ color: var(--muted); }

.panelInner{
  height: 100%;
  padding: clamp(18px, 3vw, 40px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
}

/* Panel top */
.panelTop{
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.panelTop.approachToggle{
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease-in-out;
  will-change: transform;
}
body.cursor-ready .panelTop.approachToggle{
  cursor: none;
}
.panelTop.approachToggle::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: inherit;
  transform: translateY(102%);
  transition: transform 0.6s ease;
  z-index: 0;
}
.panelTop.approachToggle:hover::after{
  transform: translateY(0);
}
.panelTop.approachToggle:hover{
  transform: translateY(-1px);
}
.panelTop.approachToggle:focus-visible{
  outline: 2px solid rgba(252,243,227,.6);
  outline-offset: 4px;
  border-radius: 999px;
}
#approach .panelTop.approachToggle{
  background: var(--accmuted);
  border-radius: 999px;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
}
#approach.panel.is-collapsed .panelTop.approachToggle{
  margin: 6px 0 8px;
  width: 100%;
}
#approach .panelTop.approachToggle .panelIndex,
#approach .panelTop.approachToggle .panelLabel{
  opacity: 1;
  position: relative;
  z-index: 1;
}
.panelIndex{
  font-family: var(--mono);
  letter-spacing: .08em;
  font-size: 12px;
  opacity: .8;
}
.panelLabel{
  font-family: var(--mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .85;
}

/* Hero-ish type */
.bigTitle{
  margin: 0;
  align-self: center;
  font-size: clamp(44px, 5.4vw, 78px);
  letter-spacing: 0;
  line-height: 1;
  font-family: var(--font-geist-mono), var(--mono);
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0;
  display: grid;
  gap: 0;
}
.outline{
  color: transparent;
  -webkit-text-stroke: 1px var(--outline-color, currentColor);
  text-stroke: 1px var(--outline-color, currentColor);
}
.titleRow{
  display: block;
  line-height: .8;
  white-space: nowrap;
}
.titleFill{
  color: var(--accent);
  font-weight: 700;
}
.titleThin{
  color: var(--fg);
  font-weight: 100;
}

.lead{
  margin: 0;
  max-width: 65ch;
  font-size: 16px;
  color: rgba(242,242,242,.75);
}
.panel.isLight .lead{ color: var(--inkMuted); }

.miniRow{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-self: end;
  max-width: 920px;
}
.miniCard{
  border: 0.5px solid var(--fg);
  background: color-mix(in srgb, var(--soft) 70%, transparent);
  border-radius: 12px;
  padding: 12px;
}
.panel.isLight .miniCard{
  border-color: var(--fg);
  background: color-mix(in srgb, var(--inkSoft) 60%, transparent);
}
.miniK{
  font-family: var(--mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: .75;
}
.miniV{
  margin-top: 8px;
  font-size: 14px;
}

.introAccord{
  display: grid;
  gap: 12px;
  align-self: end;
  max-width: 1040px;
}
.introPanel{
  border: 0;
  background: transparent;
  border-radius: 18px;
  padding: 0 18px;
  display: grid;
  gap: 12px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 260ms ease, opacity 200ms ease, padding 200ms ease;
}
.introPanel.is-open{
  padding: 16px 18px;
  max-height: 2000px;
  opacity: 1;
}
.introPanel--approach{
  padding: 0;
}
.introPanel--approach.is-open{
  padding: 0;
}
.introPanel--definition{
  font-family: var(--mono);
  background: #141414;
}
.definitionGrid{
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.defWord{
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: .02em;
  align-self: center;
}
.defDivider{
  width: 1px;
  background: color-mix(in srgb, var(--fg) 70%, transparent);
}
.defBody{
  display: grid;
  gap: 12px;
}
.defRow{
  display: grid;
  gap: 6px;
}
.defLabel{
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--muted);
}
.defText{
  font-size: 14px;
  color: var(--fg);
}
.introCopy{
  display: grid;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  font-family: var(--mono);
}
.introCopy p{
  margin: 0;
}
.introCopy--approach{
  color: rgba(252,243,227,.78);
  max-width: 72ch;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .06em;
  text-transform: lowercase;
  font-variant-caps: all-small-caps;
  font-feature-settings: "c2sc" 1, "smcp" 1, "kern" 1;
}
.approachBody{
  display: grid;
  gap: 16px;
  align-self: end;
  width: 100%;
  max-width: none;
}
.approachBody--cards{
  gap: 18px;
  align-self: start;
}
#approach .approachBody{
  transition: opacity 240ms ease, transform 240ms ease;
}
#approach.panel.is-collapsed .approachBody{
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.approachCard{
  width: 100%;
  border: 1px solid rgba(122,97,81,.7);
  border-radius: 28px;
  padding: 22px 24px 26px;
  background: linear-gradient(180deg, rgba(18,14,12,.9), rgba(10,9,8,.95));
  box-shadow: 0 24px 44px rgba(0,0,0,.45);
}
.approachCard__index{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(106,96,214,.7);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--approach-highlight);
}
.approachCard__lines{
  margin-top: 14px;
  display: grid;
  gap: 10px;
  font-family: var(--font-geist-mono), var(--mono);
  font-size: clamp(18px, 2.1vw, 26px);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.approachLine{
  color: rgba(252,243,227,.92);
}
.approachRule{
  height: 1px;
  background: rgba(122,97,81,.6);
}
.approachHighlight{
  color: var(--approach-highlight);
}

/* Giant word section */
.giantWord{
  font-size: clamp(72px, 10vw, 170px);
  letter-spacing: -0.05em;
  line-height: .95;
  opacity: .95;
  align-self: center;
}

.split{
  display: grid;
  gap: 16px;
  grid-template-columns: 1.1fr .9fr;
  align-self: end;
  max-width: 980px;
}
.rules{
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}
.rule{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 12px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
}
.rule span{
  width: 28px;
  opacity: .7;
}
.rule:last-child{ border-bottom: 0; }

/* Work grid */
.workFan{
  height: 100%;
  display: grid;
  place-items: center;
  padding: 18px 0 34px;
}
.workRow{
  display: flex;
  gap: 36px;
  align-items: center;
  padding: 8px 16px 20px;
  min-width: max-content;
}
.workItem{
  flex: 0 0 clamp(260px, 36vw, 520px);
  max-width: 100%;
  display: grid;
  gap: 10px;
  justify-items: stretch;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  scroll-margin-top: 18px;
  padding: 0;
  position: relative;
  --cap-radius: 22px;
}
.workHeader{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 0;
  width: 100%;
  margin: 0;
  font-family: var(--font-geist-mono), var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.4vw, 16px);
  color: var(--ink);
  background: transparent;
  --outline-color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.workHeader{
  position: relative;
  z-index: 2;
  margin-bottom: 6px;
}
.workItem::before{
  display: none;
}
.workGallery{
  width: 100%;
  display: none;
  gap: 12px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms ease, opacity 240ms ease, margin-top 240ms ease;
  margin-top: 0;
}
.workGallery img{
  width: 100%;
  height: auto;
  border-radius: 0;
  display: block;
  object-fit: cover;
}
.workItem.is-open .workGallery{
  max-height: 4000px;
  opacity: 1;
  margin-top: 12px;
}
.workTitle,
.workMeta{
  line-height: 1;
}
#work .fanStack,
#work .fanStack--hero,
#work .fanStack--tile{
  --w: 100%;
  --h: clamp(220px, 36vw, 420px);
  --radius: 0;
  --fanY: 0px;
  --fanX: 0px;
  --fanRot: 0deg;
  --liftTop: 0px;
}
.fanStack{
  --w: min(820px, 86vw);
  --h: clamp(120px, 13vw, 170px);
  --radius: 26px;

  --fanY: 10px;
  --fanX: 0px;
  --fanRot: 0deg;
  --liftTop: -2px;

  position: relative;
  width: var(--w);
  height: calc(var(--h) + (var(--cards) * var(--fanY)));
}
.fanStack--hero{
  --w: clamp(220px, 22vw, 280px);
  --h: clamp(140px, 18vw, 200px);
  --radius: 18px;
  --fanY: 8px;
}
.fanStack--tile{
  --w: clamp(220px, 22vw, 280px);
  --h: clamp(140px, 18vw, 200px);
  --radius: 18px;
  --fanY: 8px;
}
.tile.tile--fan{
  flex: 0 0 auto;
  padding: 0;
}
.tile.tile--fan .fanStack__content{
  padding: 14px;
}
.tile.tile--fan .fanStack__title{
  font-size: clamp(15px, 1.5vw, 19px);
}
.tile.tile--fan .fanStack__subtitle{
  font-size: clamp(11px, 1.1vw, 13px);
}
.fanStack__card{
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;

  transform: translateY(0) translateX(0) rotate(0deg);
  transform-origin: 50% 0%;
  transition:
    transform 420ms cubic-bezier(.2,.9,.2,1),
    filter 420ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;

  background-image: var(--img);
  background-size: cover;
  background-position: center;

  border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
  box-shadow:
    none;
  filter: saturate(1) contrast(1.05);
}
.fanStack__card:not(.is-top){
  opacity: 0;
  pointer-events: none;
}
.fanStack__card::before{
  content:"";
  position:absolute;
  inset: 0;
  background: none;
  opacity: 0;
}
.fanStack__card:not(.is-top)::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 14px;
  background:
    linear-gradient(90deg,var(--fg));
  opacity: .95;
}
.fanStack__card:not(.is-top){
  filter: brightness(.82) contrast(1.05);
}
.fanStack:hover .fanStack__card{
  transform: translateY(0) translateX(0) rotate(0deg);
}
.fanStack:hover .fanStack__card.is-top{
  transform: translateY(0);
}
.workItem.is-open .fanStack:hover .fanStack__card{
  transform: translateY(0) translateX(0) rotate(0deg);
}
.workItem.is-open .fanStack:hover .fanStack__card.is-top{
  transform: translateY(0);
}
.fanStack__content{
  position: absolute;
  inset: 0;
  padding: clamp(14px, 2.2vw, 22px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
  color: #fff;
  z-index: 2;
}
.fanStack__title{
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: .2px;
}
.fanStack__subtitle{
  font-size: clamp(11px, 1.2vw, 14px);
  opacity: .7;
  margin-top: 4px;
}
.fanStack__label{
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  z-index: 2;
}
.fanStack__labelTitle{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
}
.fanStack__labelMeta{
  margin-top: 2px;
  font-size: 11px;
  opacity: .7;
}

#work .fanStack::after{
  content: "+";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: rgba(0,0,0,.8);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 26px;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
#work .workItem:hover .fanStack::after{
  opacity: 1;
  transform: scale(1);
}

.workScroller{
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  padding: 10px 8px 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 55%, transparent) transparent;
  scroll-snap-type: none;
  scroll-padding: 0;
  scroll-snap-stop: normal;
}

#work .workCarousel{
  margin-top: 6px;
  min-width: 0;
}

#work .workCarousel__track{
  display: flex;
  gap: 28px;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 12px 8px 20px;
  width: 100%;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  min-width: 0;
}

#work .workProject{
  flex: 0 0 auto;
  display: block;
}

#work .workCarousel__track::-webkit-scrollbar{
  height: 0;
}

#work .workCarousel__detail{
  margin-top: 18px;
  display: none;
}

#work .workCarousel__detail.is-open{
  display: block;
}

#work .workCarousel__track--detail{
  padding-top: 8px;
}

#work .workScrollbar{
  position: relative;
  height: 2px;
  margin: 8px 8px 0;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 999px;
  opacity: 1;
  display: block;
  z-index: 2;
}

#work .workScrollbar__dot{
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(0, -50%);
  touch-action: none;
}

body.cursor-ready #work .workScrollbar__dot,
body.cursor-ready #work .workScrollbar__dot.is-dragging{
  cursor: none;
}

#work .workCard{
  flex: 0 0 auto;
  height: var(--work-card-height);
  width: auto;
  max-width: none;
  max-height: none;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: var(--soft);
  object-fit: contain;
  display: block;
}

#work .workCarousel__track picture,
#work .workCarousel__track--detail picture{
  flex: 0 0 auto;
  display: block;
}

#work .workCarousel__track--detail > *{
  flex: 0 0 auto;
}

body.cursor-ready #work .workCard--main{
  cursor: none;
}

#work .workDetailCard{
  flex: 0 0 auto;
  height: var(--work-card-height);
  width: auto;
  max-width: none;
  max-height: none;
  border-radius: 0;
  background: var(--soft);
  object-fit: contain;
}

#work .workDetailTextCard{
  width: min(32rem, 72vw);
  height: var(--work-card-height);
  min-height: 0;
  padding: clamp(22px, 3vw, 34px);
  display: grid;
  align-content: space-between;
  gap: 18px;
  border: 1px solid rgba(11,11,11,.14);
  background:
    linear-gradient(180deg, rgba(63,43,30,.08), rgba(252,243,227,.96)),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 31px,
      rgba(11,11,11,.05) 31px,
      rgba(11,11,11,.05) 32px
    );
  color: var(--ink);
}

#work .workDetailTextCard__eyebrow{
  margin: 0;
  font-family: var(--font-geist-mono), var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .72;
}

#work .workDetailTextCard__title{
  margin: 0;
  font-family: var(--font-logo);
  font-size: clamp(28px, 3vw, 44px);
  line-height: .92;
  letter-spacing: .02em;
  text-wrap: balance;
}

#work .workDetailTextCard__body{
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-geist-mono), var(--mono);
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.7;
  opacity: .84;
}
.workScroller::before,
.workScroller::after{
  content: "";
  position: sticky;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 2;
  background: rgba(252,243,227,.35);
  backdrop-filter: blur(10px) saturate(1.15);
}
.workScroller::before{
  left: 0;
}
.workScroller::after{
  right: 0;
}
.workScroller::-webkit-scrollbar{
  height: 12px;
}
.workScroller::-webkit-scrollbar-track{
  background: transparent;
}
.workScroller--detail::before,
.workScroller--detail::after{
  display: none;
}

.workDetail{
  margin-top: 14px;
  display: none;
}
#work.is-detail .workDetail{
  display: block;
}
.workDetailHeader{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 16px 8px;
  font-family: var(--font-geist-mono), var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.4vw, 16px);
  color: var(--ink);
}
.workDetailHint{
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--inkMuted);
}
.workDetailScroller{
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 8px 16px 18px;
  scroll-snap-type: none;
  scroll-padding: 0;
}
.workDetailScroller img{
  height: clamp(220px, 38vw, 480px);
  width: auto;
  display: block;
  object-fit: cover;
  flex: 0 0 auto;
  scroll-snap-align: none;
}
.workScroller::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  border-radius: 999px;
}
.workScroller::-webkit-scrollbar-button{
  width: 0;
  height: 0;
  background: var(--fg);
  color: var(--fg);
}
.workScroller::-webkit-scrollbar-button:single-button{
  width: 0;
  height: 0;
  background: var(--fg);
  color: var(--fg);
}
.workScroller::-webkit-scrollbar-button:horizontal:decrement,
.workScroller::-webkit-scrollbar-button:horizontal:increment,
.workScroller::-webkit-scrollbar-button:vertical:decrement,
.workScroller::-webkit-scrollbar-button:vertical:increment{
  width: 0;
  height: 0;
  background: var(--fg);
  color: var(--fg);
}
.workScroller::-webkit-scrollbar-corner{
  background: transparent;
}
.grid{
  display: flex;
  gap: 12px;
  align-self: center;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  align-items: flex-start;
}
.tile{
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 0;
  display: grid;
  gap: 0;
  flex: 0 0 clamp(240px, 28vw, 340px);
  scroll-snap-align: start;
  cursor: pointer;
  overflow: visible;
  position: relative;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.tile:hover,
.tile:active,
.tile:focus-within{
  border-color: var(--accmuted);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accmuted) 65%, transparent);
}
.tile::after{
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accmuted) 12%, transparent);
  opacity: 0;
  transition: opacity 160ms ease-out;
  pointer-events: none;
}
.tile:hover::after,
.tile:active::after,
.tile:focus-within::after{
  opacity: 1;
}
.tileMedia{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--inkSoft);
  border-radius: 12px;
}
.tileMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tilePreview{
  position: relative;
  height: 0;
  overflow: hidden;
  padding: 0 10px;
  margin-top: 0;
  pointer-events: none;
  opacity: 0;
  transform-origin: top center;
  transition: height 260ms ease, opacity 200ms ease, margin-top 200ms ease;
}
.tilePreview img{
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  width: calc(100% - 20px);
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(0);
  transition: transform 260ms ease;
}
.tile.hasPreview .tilePreview img:nth-child(1){ z-index: 4; }
.tile.hasPreview .tilePreview img:nth-child(2){ z-index: 3; }
.tile.hasPreview .tilePreview img:nth-child(3){ z-index: 2; }
.tile.hasPreview .tilePreview img:nth-child(4){ z-index: 1; }
.tile.hasPreview:hover .tilePreview,
.tile.hasPreview:focus-within .tilePreview{
  height: 102px;
  opacity: 1;
  margin-top: 8px;
}
.tile.hasPreview:hover .tilePreview img:nth-child(2),
.tile.hasPreview:focus-within .tilePreview img:nth-child(2){
  transform: translateY(10px);
}
.tile.hasPreview:hover .tilePreview img:nth-child(3),
.tile.hasPreview:focus-within .tilePreview img:nth-child(3){
  transform: translateY(20px);
}
.tile.hasPreview:hover .tilePreview img:nth-child(4),
.tile.hasPreview:focus-within .tilePreview img:nth-child(4){
  transform: translateY(30px);
}
.tileSummary{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  padding: 8px 0 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.32));
  z-index: 1;
}
.tileTitle{
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  font-size: 18px;
}
.tileToggle{
  border: 0;
  background: transparent;
  color: var(--paper);
  width: auto;
  height: auto;
  border-radius: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 6px;
  transition: transform 160ms ease-out, color 160ms ease-out;
}
.tileToggle:hover{
  transform: translateY(-1px);
}
.tileArrow{
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
  transition: transform 160ms ease-out;
}
.tileDetails{
  padding: 0 14px;
  background: var(--fg);
  display: grid;
  gap: 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  position: relative;
  z-index: 1;
  transition: max-height 240ms ease, opacity 200ms ease, transform 200ms ease, background 160ms ease-out, color 160ms ease-out;
}
.tile.is-open .tileDetails{
  max-height: var(--details-h, 420px);
  opacity: 1;
  transform: translateY(0);
}
.tilePara{
  margin: 0;
  color: var(--inkMuted);
  line-height: 1.5;
}
.tileMeta{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--inkMuted);
}
.tileCopy{
  margin: 0;
  color: var(--inkMuted);
}
.tileGallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.tileGallery img{
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.tile:hover .tileSummary,
.tile:active .tileSummary,
.tile:focus-within .tileSummary{
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.45));
}
.tile:hover .tileToggle,
.tile:active .tileToggle,
.tile:focus-within .tileToggle{
  color: var(--paper);
  background: transparent;
}

.hint{
  align-self: end;
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--inkMuted);
}

/* Services */
.services{
  align-self: center;
  max-width: 980px;
  display: grid;
  gap: 10px;
}
.service{
  border: 0.5px solid var(--fg);
  background: color-mix(in srgb, var(--soft) 65%, transparent);
  border-radius: 12px;
  padding: 14px 16px;
}
.serviceName{
  font-family: var(--mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
}
.serviceDesc{
  margin-top: 10px;
  color: rgba(242,242,242,.78);
}

/* Resources */
#resources.panel{
  height: auto;
  min-height: 0;
}
#resources .panelInner{
  grid-template-rows: auto auto;
}
.resourcesGrid{
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.resourceLink{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 10px 18px;
  border: 1px solid var(--inkHair);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(63,43,30,.08), rgba(63,43,30,.02)),
    color-mix(in srgb, var(--paper) 92%, #fff 8%);
  color: var(--accent);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.resourceLink:hover{
  transform: translateY(-3px);
  border-color: rgba(63,43,30,.32);
  box-shadow: 0 18px 32px rgba(63,43,30,.12);
  background:
    linear-gradient(180deg, rgba(63,43,30,.14), rgba(63,43,30,.04)),
    color-mix(in srgb, var(--paper) 95%, #fff 5%);
}

/* Contact */
.contactCard--solo{
  align-self: end;
  max-width: 100%;
  width: 100%;
}
#contact.panel{
  height: auto;
  min-height: 0;
}
#contact .panelInner{
  grid-template-rows: auto auto;
}
.contactSplit{
  align-self: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 1.1fr .9fr;
  max-width: 980px;
}

.form{
  border: 1.5px solid var(--bg);
  background: transparent;
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 12px;
}
label{
  display: grid;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--inkMuted);
}
input, textarea{
  width: 100%;
  border-radius: 12px;
  border: 1.5px solid var(--bg);
  padding: 12px;
  outline: none;
  font-family: var(--sans);
  background: transparent;
  color: var(--ink);
}
input:focus, textarea:focus{
  border-color: var(--fg);
}
.btn{
  border: 5px double var(--bg);
  border-radius: 999px;
  padding: 10px 14px;
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  background: transparent;
  color: var(--bg);
  cursor: pointer;
}
.btn:hover{
  background: var(--bg);
  color: #fff;
  transform: translateY(-1px);
}

.note{
  margin: 0;
  color: var(--inkMuted);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--sans);
}

.contactCard{
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 12px 0 16px;
  display: grid;
  gap: 12px 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.contactCard::before{
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: var(--inkHair);
  margin-bottom: 6px;
}
.contactLine{
  display: grid;
  gap: 8px;
  align-content: start;
}
.contactLine .k{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--inkMuted);
  margin-bottom: 6px;
}
.contactLine .v{ color: var(--inkMuted); }

.contactLink{
  position: relative;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  width: fit-content;
  padding-bottom: 6px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 260px 10px;
}
.contactLink:hover{
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsbGluaz0iaHR0cDovL3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjM5MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCAzOTAgNTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDM5MCA1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzkwOTQ5NiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTAsNDcuNTg1YzAsMCw5Ny41LDAsMTMwLDAKIGMxMy43NSwwLDI4Ljc0LTM4Ljc3OCw0Ni4xNjgtMTkuNDE2QzE5Mi42NjksNDYuNSwyNDMuNjAzLDQ3LjU4NSwyNjAsNDcuNTg1YzMxLjgyMSwwLDEzMCwwLDEzMCwwIi8+Cjwvc3ZnPgo=");
  animation: contact-wave 1s linear;
}
@keyframes contact-wave{
  0%{ background-position-x: 260px; }
}

.footerTiny{
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--inkHair);
  font-family: var(--mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--inkMuted);
  grid-column: 1 / -1;
}

/* RIGHT rail */
.rail{
  border-left: 0;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  padding: 14px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  min-height: 0;
}

.railTop{
  display: grid;
  gap: 10px;
  padding-left: 18px;
}
.logoBox{
  border: 0.5px transparent var(--fg);
  border-radius: 12px;
  background: var(--accent);
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 4px;
  overflow: hidden;
}
.logo{
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(90px, 8.6vw, 150px);
  line-height: .75;
  letter-spacing: -0.055em;
  text-transform: lowercase;
  color: var(--paper);
  display: block;
  position: relative;
  top: 48px;
}
.logoFill{
  color: var(--fg);
  font-weight: 100;
}
.logoThin{
  color: var(--fg);
  font-weight: 100;
}
.logo--centered{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: none;
}
.railBtn{
  border: 1px solid var(--hair);
  background: transparent;
  border-radius: 999px;
  padding: 10px 12px;
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.railBtn:hover{ opacity: .9; }

.railNav{
  display: grid;
  gap: 8px;
  align-content: start;
  height: 100%;
  overflow: visible;
  position: relative;
  padding-left: 18px;
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.railNav::-webkit-scrollbar{ width: 0; height: 0; }

.navLogo{
  display: none;
  border: 1px solid var(--hair);
  background: var(--accent);
  border-radius: 12px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: var(--font-logo);
  font-weight: 700;
  text-transform: lowercase;
  cursor: pointer;
}
.navLogoText{
  display: block;
  line-height: 1;
  letter-spacing: -0.04em;
}

.railIndicator{
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  border-radius: 999px;
  pointer-events: none;
}
.railDot{
  position: absolute;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--fg);
  transform: translateY(0);
  transition: transform 160ms ease-out;
}

/* Nav items like the screenshot blocks */
.navItem{
  border: 0.5px solid var(--fg);
  border-radius: 12px;
  background: color-mix(in srgb, var(--soft) 55%, transparent);
  padding: 10px 12px;
  min-height: 64px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 6px;
  position: relative;
}
body.cursor-ready .navItem{
  cursor: none;
}

.navItem .nTop{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.navItem .nNum{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .10em;
  opacity: .8;
}
.navItem .nDot{
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--fg);
  opacity: 0;
}
.navItem .nLabel{
  font-family: var(--mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted);
  align-self: end;
}

/* Active nav state */
.navItem.isActive{
  background: var(--fg);
  color: var(--bg);
}
.navItem.isActive .nLabel{ color: color-mix(in srgb, var(--bg) 80%, transparent); }
.navItem.isActive .nDot{ opacity: 1; background: var(--bg); }

/* Bottom rail */
.railBottom{
  border-top: 0;
  padding-top: 12px;
}
.railHelp{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Responsive tweaks */
@media (max-width: 980px){
  :root{ --railW: 210px; }
  .logo{
    font-size: clamp(72px, 12vw, 120px);
    top: 32px;
  }
  .grid{ scroll-snap-type: x mandatory; }
  .split{ grid-template-columns: 1fr; }
  .miniRow{ grid-template-columns: 1fr; }
  .introAccord{ grid-template-columns: 1fr; }
  .definitionGrid{ grid-template-columns: 1fr; }
  .defDivider{ display: none; }
  .resourcesGrid{ grid-template-columns: 1fr; }
  .contactSplit{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  body{ overflow: auto; }
  .logo{
    font-size: clamp(64px, 14vw, 104px);
    top: 24px;
  }
  .frame{
    position: static;
    display: block;
  }
  .rail{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    border-left: 0;
    border-top: 0;
    grid-template-rows: 1fr;
    height: 9vh;
    padding: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg) 100%, transparent);
    border-top: 1px solid var(--hair);
  }
  .railTop{ display: none; }
  .railBottom{ display: none; }
  .stack{
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 10vh;
  }
  .panel{
    height: auto;
    min-height: 70vh;
    border: 0;
  }

  /* Compact bottom nav */
  .railNav{
    display: flex;
    gap: 6px;
    padding: 0 6px 0 calc(var(--navItemH) + 12px);
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    height: 100%;
    --navItemH: 44px;
    scroll-padding-left: calc(var(--navItemH) + 12px);
  }
  .navLogo{
    display: grid;
    width: var(--navItemH);
    height: var(--navItemH);
    min-height: var(--navItemH);
    border: 0;
    flex: 0 0 auto;
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    box-shadow: none;
  }
  .navLogoText{
    font-size: 20px;
  }
  .navItem{
    background: transparent;
    border-color: var(--fg);
    border-width: 1.5px;
    color: var(--muted);
  }
  .navItem .nNum,
  .navItem .nLabel{
    color: var(--muted);
  }
  .navItem .nDot{
    background: var(--muted);
    opacity: 1;
  }
  .navItem.isActive{
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
  }
  .navItem.isActive .nNum,
  .navItem.isActive .nLabel{
    color: var(--bg);
  }
  .navItem.isActive .nDot{
    background: var(--bg);
  }
  .navItem{
    min-width: 360px;
    min-height: var(--navItemH);
    padding: 4px 8px;
  }
  .railIndicator{
    left: 6px;
    right: 6px;
    top: auto;
    bottom: 4px;
    height: 2px;
    width: auto;
    display: none;
  }
  .railDot{
    left: 0;
    top: -3px;
    transform: translateX(0);
  }
  .workItem{
    flex-basis: 80%;
    max-width: 80%;
  }
  .workHeader{
    letter-spacing: .12em;
    font-size: 12px;
  }
  #work .workCarousel__track picture,
  #work .workCarousel__track--detail picture{
    width: 100%;
  }
  #work .workCard,
  #work .workDetailCard{
    width: 100%;
    height: var(--work-card-height);
    object-fit: contain;
  }
  #work .workDetailTextCard{
    width: 100%;
  }
}