@import url("https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&family=Hope+Sans:ital,wght@0,300..700;1,300..700&family=Geist+Mono:wght@100;700&display=swap");

: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;

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

  --radius: 16px;
  --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";
}

*{ 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;
}
body::-webkit-scrollbar{ width: 0; height: 0; }

/* 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: var(--radius);
  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;
}

.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: var(--accent); }
#approach.panel{
  border-color: transparent;
}
#work{ --panel-bg: #FCF3E3; }
#services{ --panel-bg: #0b0b0b; }
#contact{ --panel-bg: #FCF3E3; }

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

#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;
}
.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 color-mix(in srgb, currentColor 60%, transparent);
  text-stroke: 1px color-mix(in srgb, currentColor 60%, transparent);
}
.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;
}

/* 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: 18px;
  align-items: center;
  padding: 8px 4px 14px;
  min-width: max-content;
}
.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: var(--radius);
  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;

  box-shadow:
    none;
  filter: saturate(1) contrast(1.05);
}
.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(calc((var(--cards) - 1 - var(--i)) * var(--fanY)))
    translateX(calc((var(--cards) - 1 - var(--i)) * var(--fanX) * -1))
    rotate(calc((var(--cards) - 1 - var(--i)) * var(--fanRot) * -1));
}
.fanStack:hover .fanStack__card.is-top{
  transform: translateY(var(--liftTop));
}
.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;
}

.workScroller{
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  -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;
}
.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::-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);
}

/* Contact */
.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: 1.5px solid var(--bg);
  background: transparent;
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 14px;
}
.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); }

.link{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.link:hover{ opacity: .85; }

.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);
}

/* 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);
  height: 92px;
  display: grid;
  place-items: center;
  width: 100%;
}
.logo{
  font-family: var(--font-geist-mono), var(--mono);
  font-weight: 100;
  font-size: clamp(56px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.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; }

.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;
  cursor: pointer;
  position: relative;
}

.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; }
  .grid{ scroll-snap-type: x mandatory; }
  .split{ grid-template-columns: 1fr; }
  .miniRow{ grid-template-columns: 1fr; }
  .contactSplit{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  body{ overflow: auto; }
  .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;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    height: 100%;
  }
  .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: 40px;
    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);
  }
}