/* 4hmad — one family (Latin Modern), black, ivory, and one cool grey for the lines. */

@font-face{font-family:"LM Display";src:url("../fonts/lm17.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"LM Text";src:url("../fonts/lm10.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"LM Text";src:url("../fonts/lm10i.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"LM Sym";src:url("../fonts/lmsym.woff") format("woff");font-display:swap;unicode-range:U+3B4,U+3A3}

:root{
  --void:#000;
  --ivory:#ece6d8;
  --ash:#8e897e;
  --rule:rgba(236,230,216,.14);
  --rule-strong:rgba(236,230,216,.5);

  --display:"LM Display","LM Text","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --text:"LM Text","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --ease-reveal:cubic-bezier(.16,1,.3,1);
  --ease-settle:cubic-bezier(.65,0,.35,1);
  --ease-drift:cubic-bezier(.45,0,.55,1);
}

*,*::before,*::after{box-sizing:border-box}
html{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  scroll-padding-top:env(safe-area-inset-top,0px);
  background:var(--void);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--void);
  color:var(--ivory);
  font-family:var(--text);
  font-size:clamp(1.0625rem,.98rem + .35vw,1.25rem);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-radius:0}
:focus-visible{outline:1px solid var(--ivory);outline-offset:6px}
::selection{background:var(--ivory);color:var(--void)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
html.locked{overflow:hidden}

/* Fixed layers */
#field{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none}
.fragments{position:fixed;inset:0;height:100vh;height:100lvh;z-index:0;overflow:hidden;pointer-events:none}
.grain{
  position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .85 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,.foot{position:relative;z-index:1}

/* Fragments */
.frag{position:absolute;aspect-ratio:4/5;translate:-50% -50%;will-change:transform,opacity}
.frag i{
  display:block;width:100%;height:100%;opacity:0;
  filter:blur(var(--blur,3px));
  background:center/cover no-repeat;
  animation:drift var(--dur,10s) var(--ease-drift) var(--delay,0s) infinite alternate;
}
.frag canvas{display:block;width:100%;height:100%;transition:opacity 1.2s var(--ease-settle)}
.frag.has-img canvas{opacity:0}
@keyframes drift{to{transform:translate(var(--dx,8px),var(--dy,-10px))}}

/* Mast */
.mast{
  position:fixed;top:0;left:0;right:0;z-index:6;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:calc(env(safe-area-inset-top,0px) + 1.35rem) var(--gutter) 2.25rem;
  font-size:.9375rem;
  background:linear-gradient(#000 0%,rgba(0,0,0,.82) 42%,rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.mast>*{pointer-events:auto}
.mast-mark{font-family:var(--display);font-size:1.25rem;letter-spacing:.01em}
.mast-access{font-style:italic;color:var(--ash);transition:color .5s var(--ease-reveal)}
.mast-access:hover{color:var(--ivory)}

/* 1. Hook */
.hook{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:grid;place-items:center;
  padding:6rem var(--gutter);
}
.thesis{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,1rem + 5.1vw,6.25rem);
  line-height:1.05;letter-spacing:-.018em;
  text-align:center;text-wrap:balance;
  will-change:transform,opacity;
}
.line{display:block;overflow:hidden;padding:.06em 0 .12em}
.line>span{display:block}
.hook-foot{
  position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 2rem);
  text-align:center;font-style:italic;font-size:.9375rem;color:var(--ash);
}

/* 2. Descent: empty on purpose, the lines own this space */
.descent{height:clamp(20rem,62vh,44rem)}

/* 3. Dimensions: the small scale is set small, the large scale large */
.dimensions{
  display:grid;grid-template-columns:5fr 8fr;align-items:start;
  gap:clamp(1.5rem,5vw,6rem);
  max-width:76rem;margin:0 auto clamp(9rem,26vh,16rem);padding-inline:var(--gutter);
}
.dim{
  border:1px solid var(--rule);
  background:rgba(236,230,216,.016);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  padding:clamp(1.5rem,3.2vw,3.25rem);
}
.dim-macro{margin-top:clamp(3rem,9vw,8rem)}
.dim-sym{display:block;font-family:"LM Sym",var(--display);line-height:1;color:var(--ivory)}
.dim-micro .dim-sym{font-size:clamp(2.25rem,4vw,3.5rem)}
.dim-macro .dim-sym{font-size:clamp(3.75rem,8.5vw,7.5rem)}
.dim h2{font-family:var(--display);font-weight:400;line-height:1.1;letter-spacing:-.01em;margin-top:clamp(2rem,5vw,4.5rem)}
.dim-micro h2{font-size:clamp(1.5rem,2.3vw,2rem)}
.dim-macro h2{font-size:clamp(1.9rem,3.6vw,3.25rem)}
.dim p{color:var(--ash);max-width:34ch;margin-top:.9rem}

/* 4. Evolution feed */
.feed{display:flex;flex-direction:column;justify-content:center}
.feed-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding-inline:var(--gutter);margin-bottom:clamp(2rem,5vh,3.5rem);
}
.feed-head h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.01em;line-height:1.1}
.feed-note{font-style:italic;color:var(--ash);font-size:.9375rem;text-align:right}
.feed-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch}
.feed-viewport::-webkit-scrollbar{display:none}
.feed-track{display:flex;gap:clamp(1.25rem,3vw,3.5rem);width:max-content;padding-inline:var(--gutter);will-change:transform}
.entry{flex:none;width:min(clamp(15rem,24vw,23rem),40vh);min-width:13.5rem;scroll-snap-align:start}
.entry-fig{aspect-ratio:4/5;overflow:hidden;background:#050505}
.entry-fig img,.entry-fig canvas{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.8);
  transition:filter 1.2s var(--ease-reveal);
}
.entry:hover .entry-fig img,.entry:hover .entry-fig canvas{filter:grayscale(1) contrast(1.08) brightness(1)}
.entry time{display:block;margin-top:1.1rem;font-style:italic;font-size:.875rem;color:var(--ash);font-variant-numeric:oldstyle-nums}
.entry p{font-family:var(--display);font-size:clamp(1.2rem,1.55vw,1.55rem);line-height:1.24;margin-top:.45rem;text-wrap:pretty}
.feed-empty{color:var(--ash);font-style:italic;padding-block:4rem}
.feed.is-pinned{height:100vh;overflow:hidden}
.feed.is-pinned .feed-viewport{overflow:visible}

/* 5. Nexus */
.nexus{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:8rem var(--gutter)}
.nexus-line{font-family:var(--display);font-size:clamp(1.7rem,3.7vw,3.5rem);line-height:1.12;letter-spacing:-.012em;max-width:19ch;margin-inline:auto;text-wrap:balance}
.access-btn{
  display:inline-flex;align-items:center;gap:.9em;
  margin-top:clamp(2.5rem,6vh,4.5rem);padding:1rem .5rem;
  font-size:.875rem;letter-spacing:.22em;
}
.access-btn .br{font-family:var(--display);font-size:1.6em;line-height:1;letter-spacing:0;color:var(--ash);transition:transform .7s var(--ease-reveal),color .7s var(--ease-reveal)}
.access-label{padding-left:.22em}
.access-btn:hover .br,.access-btn:focus-visible .br{color:var(--ivory)}
.access-btn:hover .br:first-child,.access-btn:focus-visible .br:first-child{transform:translateX(-.5em)}
.access-btn:hover .br:last-child,.access-btn:focus-visible .br:last-child{transform:translateX(.5em)}

.foot{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem var(--gutter) calc(env(safe-area-inset-bottom,0px) + 1.75rem);font-size:.875rem;color:var(--ash)}
.foot a{font-style:italic;transition:color .5s var(--ease-reveal)}
.foot a:hover{color:var(--ivory)}

/* The gate: one question at a time */
.gate{
  position:fixed;inset:0;z-index:20;background:var(--void);
  display:grid;grid-template-rows:auto 1fr;
  padding:calc(env(safe-area-inset-top,0px) + 1.35rem) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 1.5rem);
  overflow-y:auto;
  opacity:0;transition:opacity .6s var(--ease-settle);
}
.gate[hidden]{display:none}
.gate.open{opacity:1}
.gate-bar{position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule)}
.gate-bar i{display:block;height:100%;background:var(--ivory);transform-origin:0 50%;transform:scaleX(0);transition:transform .9s var(--ease-reveal)}
.gate-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;font-size:.9375rem;color:var(--ash)}
.gate-name{font-style:italic}
.gate-count{font-variant-numeric:oldstyle-nums}
.gate-close{justify-self:end;font-style:italic;color:var(--ash);transition:color .4s var(--ease-reveal)}
.gate-close:hover{color:var(--ivory)}
.gate-body{width:100%;max-width:46rem;margin:auto;padding-block:3rem;display:flex;flex-direction:column;gap:clamp(2rem,6vh,3.5rem)}
.gate-step{opacity:0;transform:translateY(.75rem)}
.gate-step.in{opacity:1;transform:none;transition:opacity .8s var(--ease-reveal),transform .8s var(--ease-reveal)}
.gate-q{display:block;font-family:var(--display);font-size:clamp(1.7rem,4.2vw,3.1rem);line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
.gate-slot{margin-top:clamp(1.5rem,4vh,2.5rem)}
.gate-slot input,.gate-slot textarea{
  display:block;width:100%;
  font:inherit;font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.5;color:var(--ivory);
  background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  padding:.6rem 0 .75rem;outline:0;resize:none;
  transition:border-color .5s var(--ease-reveal);
}
.gate-slot textarea{min-height:7.5rem}
.gate-slot input:focus,.gate-slot textarea:focus{border-bottom-color:var(--ivory)}
.gate-slot ::placeholder{color:var(--ash);opacity:.7;font-style:italic}
.gate-done{color:var(--ash);font-size:clamp(1.125rem,1.6vw,1.375rem);max-width:30ch}
.gate-hint{margin-top:.8rem;font-size:.875rem;font-style:italic;color:var(--ash);min-height:1.4em}
.gate-err{margin-top:.2rem;font-size:.9375rem;color:var(--ivory);min-height:1.5em}
.gate-trap{position:absolute;left:-200vw;width:1px;height:1px;overflow:hidden}
.gate-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.gate-back{font-style:italic;color:var(--ash);padding:.75rem 0;transition:color .4s var(--ease-reveal)}
.gate-back:hover{color:var(--ivory)}
.gate-back[hidden]{display:block;visibility:hidden}
.gate-next{
  margin-left:auto;padding:.85rem 1.6rem;border:1px solid var(--rule-strong);
  transition:background-color .5s var(--ease-reveal),color .5s var(--ease-reveal),border-color .5s var(--ease-reveal);
}
.gate-next:hover,.gate-next:focus-visible{background:var(--ivory);color:var(--void);border-color:var(--ivory)}
.gate-next:disabled{opacity:.5;cursor:default}

/* Motion states. Only applied once scripts are running. */
html.js .line>span{transform:translateY(105%)}
html.js .mast,html.js .hook-foot{opacity:0;transition:opacity 1.6s var(--ease-settle)}
html.js.ready .mast{opacity:1;transition-delay:1.5s}
html.js.ready .hook-foot{opacity:1;transition-delay:2.1s}
html.js.ready.scrolled .hook-foot{opacity:0;transition-delay:0s;transition-duration:.5s}
html.js .dim{opacity:0;transition:opacity 1.6s var(--ease-reveal)}
html.js .dim.lit{opacity:1;animation:ignite 2.6s var(--ease-reveal) both}
@keyframes ignite{from{border-color:var(--rule-strong)}to{border-color:var(--rule)}}

/* If the motion library never arrives, show the page as it stands. */
html.static .line>span{transform:none}
html.static .frag i{opacity:var(--o,.5)}
html.static .dim{opacity:1}
html.static .mast,html.static .hook-foot{opacity:1}
html.static .fragments{transition:opacity .8s var(--ease-settle)}
html.static.scrolled .fragments{opacity:0}

/* Small screens */
@media (max-width:47.5rem){
  .dimensions{grid-template-columns:1fr;gap:2.5rem}
  .dim-micro{width:76%}
  .dim-macro{margin-top:0}
  .feed-note{display:none}
  .foot{flex-direction:column;gap:.35rem}
}

@media (prefers-reduced-motion:reduce){
  .frag i{animation:none}
  .gate,.gate-step.in,.gate-bar i,.dim{transition-duration:.01s!important}
  html.js .dim.lit{animation:none}
}