:root{
  --bg:#f4f1e9;
  --ink:#171714;
  --muted:#78756d;
  --line:rgba(23,23,20,.13);
  --line-strong:rgba(23,23,20,.22);
  --soft:rgba(255,255,255,.54);
  --soft-strong:rgba(255,255,255,.78);
  --dark:#2a2924;
  --accent:#ff6730;
  --accent-soft:rgba(255,103,48,.12);
  --grid-dot:#cbc6b8;
  --nav-bg:rgba(244,241,233,.78);
  --fluid-nav-bg:rgba(244,241,233,.52);
  --nav-safe-left:var(--ds-space-9);
  --max:1420px;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SFMono-Regular",Consolas,ui-monospace,monospace;
}

html[data-theme="dark"]{
  --bg:#12120f;
  --ink:#efede5;
  --muted:#a5a093;
  --line:rgba(239,237,229,.11);
  --line-strong:rgba(239,237,229,.22);
  --soft:rgba(255,255,255,.038);
  --soft-strong:rgba(255,255,255,.07);
  --dark:#e5e1d7;
  --accent:#ff7442;
  --accent-soft:rgba(255,116,66,.13);
  --grid-dot:#383833;
  --nav-bg:rgba(18,18,15,.78);
  --fluid-nav-bg:rgba(18,18,15,.50);
}

*{box-sizing:border-box}
html{
  background:var(--bg);
  scroll-behavior:smooth;
}
body{
  margin:0;
  min-width:320px;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}

.wrap{
  position:relative;
  z-index:2;
}

.page{
  position:relative;
  z-index:1;
  isolation:isolate;
}

main,
footer{
  padding-left:var(--nav-safe-left);
}

#dot-grid{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  display:block;
}

.grid-layer{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  overflow:hidden;
}

#page-grid{
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

.grid-photo,
.grid-tech{
  pointer-events:none;
}

.grid-tech-line,
.grid-tech-line-soft,
.grid-tech-line-accent{
  fill:none;
  vector-effect:non-scaling-stroke;
}

.grid-tech-node,
.grid-tech-node-accent{
  vector-effect:non-scaling-stroke;
}

.brand{
  position:fixed;
  top:var(--ds-space-5);
  left:var(--ds-space-5);
  z-index:50;
}

.theme-toggle{
  position:fixed;
  top:var(--ds-space-4);
  right:var(--ds-space-4);
  z-index:50;
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--nav-bg);
  backdrop-filter:blur(12px);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:
    transform var(--ds-motion-default) var(--ds-ease-standard),
    border-color var(--ds-motion-default) var(--ds-ease-standard);
}
.theme-toggle:hover{
  transform:rotate(10deg);
  border-color:var(--line-strong);
}
.theme-toggle::before{
  content:"";
  width:14px;
  height:14px;
  border:1.5px solid currentColor;
  border-radius:50%;
  display:block;
}
.theme-toggle::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--bg);
  transform:translate(5px,-5px);
}

/* Fluid stage navigation */
.fluid-nav{
  position:fixed;
  left:var(--ds-space-3);
  top:50%;
  transform:translateY(-50%);
  width:40px;
  z-index:70;
  user-select:none;
}
.fluid-wrap{
  position:relative;
  width:100%;
  height:min(500px,72vh);
  min-height:360px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--fluid-nav-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 54px rgba(0,0,0,.075);
}
.fluid-track{
  position:absolute;
  top:26px;
  bottom:26px;
  left:17px;
  width:1px;
  border-radius:999px;
  background:var(--line-strong);
  pointer-events:none;
}
.fluid-fill{
  position:absolute;
  top:26px;
  left:17px;
  width:1px;
  height:0;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 16px var(--accent-soft);
  pointer-events:none;
}
.fluid-points{
  position:absolute;
  inset:0;
}
.fluid-point{
  position:absolute;
  left:13px;
  width:14px;
  height:22px;
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
  color:var(--muted);
  outline:none;
}
.fluid-point .pin{
  position:absolute;
  left:0;
  top:50%;
  width:8px;
  height:8px;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--muted);
  border:2px solid var(--bg);
  transition:
    opacity var(--ds-motion-fast) var(--ds-ease-standard),
    transform var(--ds-motion-fast) var(--ds-ease-standard),
    box-shadow var(--ds-motion-fast) var(--ds-ease-standard),
    background var(--ds-motion-fast) var(--ds-ease-standard);
}
.fluid-point .label{display:none;}
.fluid-point:hover,
.fluid-point:focus-visible{
  color:var(--ink);
}
.fluid-point.active{
  color:var(--ink);
}
.fluid-point.active .pin{
  opacity:0;
  transform:translateY(-50%) scale(.55);
}
.fluid-point.drag-hover:not(.active) .pin{
  background:var(--accent);
  box-shadow:0 0 0 6px var(--accent-soft);
}
.fluid-blob{
  position:absolute;
  left:5px;
  top:0;
  width:24px;
  height:24px;
  transform:translate3d(0,0,0);
  pointer-events:auto;
  touch-action:none;
  cursor:grab;
  outline:none;
}
.fluid-blob:active{cursor:grabbing}
.fluid-blob:focus-visible{
  filter:drop-shadow(0 0 .25rem var(--accent-soft));
}
.fluid-core{
  position:absolute;
  inset:0;
  background:var(--accent);
  box-shadow:0 0 14px var(--accent-soft);
  transform-origin:center;
  transition:
    clip-path var(--ds-motion-fast) var(--ds-ease-standard),
    filter var(--ds-motion-fast) var(--ds-ease-standard);
  clip-path:var(--inner-shape,polygon(18% 2%,73% 0%,100% 24%,92% 79%,66% 100%,21% 94%,0% 61%,4% 20%));
}
.fluid-core::after{
  content:"";
  position:absolute;
  inset:7px;
  background:var(--bg);
  clip-path:var(--inner-shape,polygon(18% 2%,73% 0%,100% 24%,92% 79%,66% 100%,21% 94%,0% 61%,4% 20%));
  opacity:.96;
}
.fluid-tail{
  position:absolute;
  left:12px;
  top:12px;
  width:1px;
  height:10px;
  transform-origin:center;
  pointer-events:none;
  opacity:.14;
}
.fluid-tail i{
  position:absolute;
  left:0;
  top:0;
  border-radius:50%;
  background:var(--accent);
  transform:translate(-50%,-50%);
}
.fluid-tail i:nth-child(1){width:7px;height:7px;top:5px;opacity:.24}
.fluid-tail i:nth-child(2){width:5px;height:5px;top:12px;opacity:.16}
.fluid-tail i:nth-child(3){width:3px;height:3px;top:18px;opacity:.10}
.fluid-blob.dragging .fluid-core{filter:brightness(1.07)}

.sr{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

main > section{
  position:relative;
  min-height:100svh;
}

.hero{
  display:grid;
  align-items:center;
}
.hero-grid{
  display:grid;
  align-items:center;
}
.hero-copy{
  padding-left:clamp(0px,3vw,var(--ds-space-7));
}
.text-link{
  display:inline-flex;
  align-items:center;
}

.intro-block{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  align-items:end;
}

.project-flow{
  display:grid;
}
.project{
  display:grid;
  grid-template-columns:minmax(0,.58fr) minmax(0,.42fr);
  align-items:center;
}
.project.right{
  grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
}
.project.right .project-copy{
  justify-self:end;
  text-align:left;
}
.project-tags{
  display:flex;
  flex-wrap:wrap;
}

.about{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
  align-items:center;
}

.contact{
  display:grid;
  align-items:center;
}
.contact-inner{
  margin-inline:auto;
}

.footer-row{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}

/* Grid svg structure */
.grid-outline{
  fill:none;
  stroke:var(--line);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.grid-fill-soft{
  fill:var(--soft);
  stroke:none;
}
.grid-fill-strong{
  fill:var(--soft-strong);
  stroke:none;
}
.grid-fill-dark{
  fill:var(--dark);
  stroke:none;
}
.grid-fill-accent{
  fill:var(--accent);
  stroke:none;
}

/* Legal page structure */
body.legal-page main,
body.legal-page footer{
  padding-left:0;
}
.legal-shell{
  display:grid;
  align-items:center;
}
.legal-content{
  width:min(760px,100%);
}
.legal-block{
  border-top:1px solid var(--line);
}
.legal-content address{
  font-style:normal;
}
.legal-content a{
  border-bottom:1px solid var(--line-strong);
  transition:
    border-color var(--ds-motion-default) var(--ds-ease-standard),
    color var(--ds-motion-default) var(--ds-ease-standard);
}
.legal-content a:hover,
.legal-content a:focus-visible{
  color:var(--accent);
  border-color:var(--accent);
}
.legal-back{
  display:inline-flex;
}

@media (max-width:980px){
  .hero-grid,
  .intro-block,
  .project,
  .project.right,
  .about{
    grid-template-columns:1fr;
  }
  .project.left .project-copy,
  .project.right .project-copy{
    justify-self:start;
  }
}

@media (max-width:680px){
  .brand{
    top:var(--ds-space-4);
    left:var(--ds-space-4);
  }
  .theme-toggle{
    top:var(--ds-space-3);
    right:var(--ds-space-4);
    width:38px;
    height:38px;
  }
  .fluid-nav{
    left:6px;
    width:36px;
  }
  .fluid-wrap{
    width:36px;
    height:min(310px,52vh);
    min-height:260px;
    border-radius:17px;
  }
  .fluid-track,
  .fluid-fill{
    left:15px;
  }
  .fluid-point{
    left:11px;
    width:14px;
  }
  .fluid-point .label{
    display:none;
  }
  .fluid-blob{
    left:3px;
  }
}