/* EINHAR — one sculptural object, editorial readings, and a quiet ending. */
:root{color-scheme:dark}
html{scroll-behavior:smooth;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
html body.page-home{margin:0;min-width:320px;min-height:100%;overflow-x:clip;background:#030404;color:#eaeae6;font-family:"Instrument Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body.page-home #main{width:100%;height:auto!important;min-height:100svh;margin:0!important;padding:0!important;background:#030404!important}
body.page-home .site-footer{display:none!important}
body.page-home .skip{position:absolute;top:-100px;left:18px;z-index:1000;padding:12px 16px;background:#fff;color:#111;text-decoration:none;font:500 14px/1.4 "Instrument Sans",sans-serif}
body.page-home .skip:focus{top:12px}
body.page-home a{color:inherit}
body.page-home a:focus-visible,body.page-home button:focus-visible{outline:2px solid #f6f6f2;outline-offset:6px}
body.page-home button{font:inherit}
body.page-home .einhar-world{position:relative;isolation:isolate;overflow:clip;background:#030404;color:#eaeae6}
body.page-home .einhar-world::before{position:fixed;inset:0;z-index:90;pointer-events:none;content:"";background-image:url("assets/pixel-texture.9ea05d251302.webp");background-size:560px;opacity:.006;mix-blend-mode:screen}

/* The mark is the only visual system; no labels or free-floating decoration. */
.world-stage{position:relative;height:358svh;min-height:2800px;isolation:isolate}
.world-fixed{position:sticky;top:0;left:0;z-index:1;width:100%;height:100svh;overflow:hidden;pointer-events:none}
.world-object{--field-x:0px;--field-y:0px;--field-scale:1;position:absolute;left:53%;top:49%;width:min(57vw,770px);aspect-ratio:1;transform:translate(calc(-50% + var(--field-x)),calc(-50% + var(--field-y))) scale(var(--field-scale));transform-origin:center center;will-change:transform;pointer-events:none}
.world-object-media{position:relative;width:100%;height:100%;isolation:isolate}
.world-object video,.world-core-still,.world-object-drawing{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
.world-object video,.world-core-still{-webkit-mask-image:radial-gradient(circle closest-side,#000 65%,transparent 99%);mask-image:radial-gradient(circle closest-side,#000 65%,transparent 99%);transition:opacity .9s cubic-bezier(.2,.75,.24,1),filter .8s ease}
.world-core-still{display:none}
.world-object-drawing{opacity:0;transform:rotate(-2deg) scale(.91);transition:opacity .75s ease,transform 1.15s cubic-bezier(.19,1,.22,1)}
.world-object-drawing .drawing-main{stroke:#e8e7e2;stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1060;stroke-dashoffset:1060;transition:stroke-dashoffset 2.2s cubic-bezier(.22,.7,.22,1)}
.world-object-drawing .drawing-shadow{stroke:#727672;stroke-width:.65;transform:translate(3px,-2px);opacity:.54;vector-effect:non-scaling-stroke}
.world-object-drawing .drawing-measure{stroke:#d6d5d0;stroke-width:.7;stroke-linecap:round;opacity:.5;vector-effect:non-scaling-stroke}
.world-object[data-material="drawing"] video,.world-object[data-material="drawing"] .world-core-still{opacity:0;filter:blur(12px) brightness(.6)}
.world-object[data-material="drawing"] .world-object-drawing{opacity:1;transform:rotate(-2deg) scale(1)}
.world-object[data-material="drawing"] .drawing-main{stroke-dashoffset:0}
.world-material-toggle{position:absolute;right:6%;bottom:8%;display:flex;align-items:center;gap:9px;padding:10px 0;border:0;background:transparent;color:#b8b9b2;cursor:pointer;pointer-events:auto;font:450 11px/1.5 "Instrument Sans",sans-serif;letter-spacing:.012em;transition:color .25s}
.world-material-toggle:hover{color:#f1f1ec}
.material-indicator{display:block;width:6px;height:6px;border:1px solid #b8b9b2;border-radius:50%;transition:background .25s}
.world-material-toggle[aria-pressed="true"] .material-indicator{background:#deded9}

/* The readings: smaller type, deliberate measure, unequal placement. */
.world-note{position:absolute;z-index:2;max-width:445px;pointer-events:auto}
.world-note-index{display:block;margin:0 0 22px!important;color:#8c8e89;font:480 10px/1.45 "Instrument Sans",sans-serif;letter-spacing:.045em;text-transform:none}
.world-note h1,.world-note h2{margin:0!important;color:#f0f0ec;font:470 clamp(29px,2.8vw,43px)/1.15 "Instrument Sans",sans-serif;letter-spacing:-.056em}
.world-note em{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:normal;letter-spacing:-.046em}
.world-note-intro{top:23svh;left:10.7%;width:min(31vw,400px)}
.world-note-structure{top:139svh;left:63%;width:min(29vw,420px);scroll-margin-top:23svh}
.world-note-horizon{top:250svh;left:12%;width:min(31vw,430px);scroll-margin-top:23svh}
#world-title{scroll-margin-top:110px}
.world-reading{width:100%;margin-top:33px}
.world-reading p{max-width:345px;margin:0!important;color:#c1c1bc;font:420 clamp(13px,.93vw,15.3px)/1.72 "Instrument Sans",sans-serif;letter-spacing:-.009em}
.world-reading p+p{margin-top:21px!important;color:#a4a5a0}
.world-note-structure .world-reading p+p{margin-left:13px!important}
.world-note-horizon .world-reading p+p{margin-left:18px!important}

/* Published writing is a continuation of the text, not an extra card section. */
.world-notes{position:relative;max-width:1560px;min-height:83svh;margin:0 auto;padding:21svh 10.2% 15svh;display:grid;grid-template-columns:.85fr 1.15fr;align-items:start;gap:17%;background:transparent;scroll-margin-top:65px}
.world-notes .notes-intro{padding-top:3vh}
.world-notes h2{margin:0;color:#e8e8e2;font:470 clamp(30px,3vw,49px)/1.12 "Instrument Sans",sans-serif;letter-spacing:-.06em}
.world-notes h2 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.055em}
.notes-feed{padding-top:2vh}
.world-notes .recent-entries{display:flex;flex-direction:column;gap:0;width:100%;margin:0;padding:0}
.world-notes .recent-card{display:block;width:100%;padding:0 0 28px;margin:0 0 28px;text-decoration:none;border-bottom:1px solid rgba(235,235,229,.12);background:transparent;transition:transform .35s cubic-bezier(.22,.7,.25,1)}
.world-notes .recent-card:hover{transform:translateX(6px)}
.world-notes .recent-metadata{display:block;margin:0 0 12px;font:460 10px/1.5 "Instrument Sans",sans-serif;letter-spacing:.02em;color:#898b85}
.world-notes .recent-card-title{display:block;font:450 clamp(18px,1.6vw,26px)/1.25 "Instrument Sans",sans-serif;letter-spacing:-.035em;color:#deded9}
.world-underline-link{position:relative;display:inline-block;width:max-content;padding:6px 0 8px;color:#bfbfb9;text-decoration:none;font:460 12px/1.4 "Instrument Sans",sans-serif;letter-spacing:-.005em}
.world-underline-link::after{position:absolute;left:0;bottom:2px;width:100%;height:1px;background:currentColor;content:"";transform-origin:left center;transition:transform .3s}
.world-underline-link:hover::after{transform:scaleX(.55)}

/* The conclusion belongs to the reading, with destinations in the margin. */
.world-ending{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(680px,84svh,980px);padding:21svh max(7.6%,48px) 9svh;background:#030404}
.world-ending-thought{max-width:970px;margin:0 0 100px;color:#ededeb;font:450 clamp(32px,3.2vw,53px)/1.15 "Instrument Sans",sans-serif;letter-spacing:-.062em;text-wrap:pretty}
.world-ending-thought em{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:normal;letter-spacing:-.049em}
.world-ending-details{display:flex;justify-content:space-between;align-items:flex-end;gap:50px}
.world-ending-paths{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.world-ending-paths a{display:inline-block;padding:8px 0;color:#c4c5c0;text-decoration:none;font:440 clamp(18px,1.55vw,24px)/1.3 "Instrument Sans",sans-serif;letter-spacing:-.037em;transition:color .25s ease,translate .25s ease}
.world-ending-paths a:hover{color:#fff;translate:7px 0}
.world-ending-legal{display:flex;align-items:center;gap:25px;padding-bottom:4px}
.world-ending-legal a{display:inline-block;padding:10px 1px;color:#898a86;text-decoration:none;font:450 11px/1.6 "Instrument Sans",sans-serif;transition:color .25s}
.world-ending-legal a:hover{color:#eee}

/* Narrow desktop: preserve the separation between reading and object. */
@media(max-width:1080px){
 .world-object{width:min(66vw,690px)}
 .world-note-intro{left:8.5%;width:35vw}
 .world-note-structure{left:61%;width:34vw}
 .world-note-horizon{left:9%;width:37vw}
 .world-note h1,.world-note h2{font-size:clamp(28px,3.3vw,40px)}
 .world-reading p{font-size:14px}
 .world-notes{padding-left:8%;padding-right:8%;gap:11%}
 .world-ending{padding-inline:8%}
}
@media(max-width:760px){
 html{scroll-behavior:smooth}
 .world-stage{height:auto;min-height:0;display:flex;flex-direction:column}
 .world-fixed{position:relative;top:auto;width:100%;height:65svh;min-height:435px;overflow:hidden;order:0}
 .world-object{left:50%;top:44%;width:min(98vw,565px);transform:translate(-50%,-50%)!important;will-change:auto}
 .world-material-toggle{right:8%;bottom:7.5%;font-size:10px}
 .world-note{position:relative;top:auto;left:auto;right:auto;z-index:2;order:1;width:100%;max-width:none;margin:0;padding:0 9% 14svh}
 .world-note h1,.world-note h2{max-width:640px;font-size:clamp(30px,5.5vw,39px);line-height:1.17}
 .world-note-intro{min-height:69svh;padding-top:8svh}
 .world-note-structure{order:2;min-height:81svh;padding-top:17svh;padding-left:15%;padding-right:10%;scroll-margin-top:18px}
 .world-note-horizon{order:3;min-height:86svh;padding-top:18svh;scroll-margin-top:18px}
 .world-reading{max-width:510px;margin-top:27px}
 .world-reading p{max-width:510px;font-size:14px;line-height:1.74}
 .world-reading p+p{margin-top:21px!important}
 .world-note-structure .world-reading p+p,.world-note-horizon .world-reading p+p{margin-left:0!important}
 .world-notes{display:block;min-height:0;padding:15svh 9% 17svh}
 .world-notes .notes-intro{padding-top:0}
 .world-notes h2{font-size:clamp(32px,6vw,43px)}
 .notes-feed{padding-top:60px}
 .world-notes .recent-card{padding-bottom:25px;margin-bottom:27px}
 .world-notes .recent-card-title{font-size:clamp(19px,3.6vw,24px)}
 .world-ending{min-height:clamp(600px,80svh,820px);padding:19svh 9% 8svh}
 .world-ending-thought{font-size:clamp(30px,5vw,46px);max-width:550px}
 .world-ending-paths a{font-size:19px}
}
@media(max-width:480px){
 .world-fixed{height:61svh;min-height:410px}
 .world-object{top:43%;left:50%;width:100vw}
 .world-note{padding-left:8%;padding-right:8%;padding-bottom:15svh}
 .world-note-intro{min-height:74svh;padding-top:9svh}
 .world-note-structure{min-height:88svh;padding-top:17svh;padding-left:13%}
 .world-note-horizon{min-height:91svh;padding-top:19svh}
 .world-note h1,.world-note h2{font-size:clamp(29px,7.5vw,36px)}
 .world-note-index{font-size:10px;margin-bottom:22px!important}
 .world-reading{margin-top:27px}
 .world-reading p{font-size:13.6px;line-height:1.75}
 .world-notes{padding:16svh 8% 18svh}
 .world-notes h2{font-size:clamp(29px,7vw,36px)}
 .notes-feed{padding-top:45px}
 .world-ending{min-height:clamp(580px,82svh,750px);padding:18svh 8% 7svh}
 .world-ending-thought{font-size:clamp(29px,7.3vw,37px);margin-bottom:65px}
 .world-ending-details{align-items:flex-end;gap:30px}
 .world-ending-paths{gap:0px}
 .world-ending-paths a{font-size:17.5px}
 .world-ending-legal{gap:15px;align-self:flex-end;flex-wrap:wrap;justify-content:flex-end}
 .world-ending-legal a{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .world-object video{display:none}
 .world-core-still{display:block}
 .world-object{transform:translate(-50%,-50%)!important}
}
@keyframes field-enter{from{opacity:.72;translate:0 12px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){
 .world-note.has-entered,.notes-intro.has-entered,.notes-feed.has-entered{animation:field-enter .82s cubic-bezier(.2,.77,.25,1) both}
}


/* Presence / material — the visual system is attached only to the mark.
   A delayed pool of light tracks the visitor; the actual mark is the only
   shape revealed. No ambient strokes, icons, panels, or additional copy. */
.world-fixed::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(
    ellipse 31vw 37vw at var(--presence-x,54%) var(--presence-y,46%),
    rgba(165,183,170,.082) 0%,
    rgba(121,137,125,.034) 31%,
    transparent 74%
  );
  opacity:var(--presence-opacity,.36);
  transition:opacity 1.25s cubic-bezier(.2,.7,.2,1);
}
.world-object {
  --probe-x:50%;
  --probe-y:50%;
  --probe-size:clamp(90px,10.5vw,155px);
  --aura-opacity:.38;
  z-index:1;
}
.world-object::before {
  content:"";
  position:absolute;
  inset:8%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(
    circle closest-side,
    rgba(194,205,192,.13),
    rgba(145,165,150,.06) 38%,
    transparent 75%
  );
  transform:scale(1.45);
  filter:blur(50px);
  opacity:var(--aura-opacity);
  transition:opacity .85s ease;
  pointer-events:none;
}
.world-probe-shadow {
  position:absolute;
  z-index:2;
  inset:0;
  display:block;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(
    circle var(--probe-size) at var(--probe-x) var(--probe-y),
    rgba(5,9,7,.22) 0%,
    rgba(5,9,7,.15) 43%,
    rgba(5,9,7,.04) 72%,
    transparent 100%
  );
  transition:opacity .42s ease;
}
.world-object-drawing {z-index:3;}
.world-object[data-probing="true"][data-material="solid"] .world-probe-shadow {opacity:.72;}
.world-object[data-probing="true"][data-material="solid"] .world-object-drawing {
  opacity:.88;
  transform:rotate(-2deg) scale(1);
  -webkit-mask-image:radial-gradient(
    circle var(--probe-size) at var(--probe-x) var(--probe-y),
    #000 10%,#000 52%,transparent 100%
  );
  mask-image:radial-gradient(
    circle var(--probe-size) at var(--probe-x) var(--probe-y),
    #000 10%,#000 52%,transparent 100%
  );
}
.world-object[data-probing="true"][data-material="solid"] .drawing-main {
  stroke-dashoffset:0;
  stroke:#152820;
  stroke-width:1.7;
}
.world-object-drawing .drawing-detail{
  stroke:#e2e4dd;
  stroke-width:.7;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  opacity:0;
  transition:opacity .5s ease;
}
.world-object[data-probing="true"][data-material="solid"] .drawing-detail{
  stroke:#17251f;
  stroke-width:1.2;
  opacity:.9;
}
.world-object[data-material="drawing"] .drawing-detail{opacity:.2;}
.world-object[data-material="drawing"] .world-probe-shadow {opacity:0;}
.world-object[data-material="drawing"] .world-object-drawing {
  -webkit-mask-image:none;
  mask-image:none;
}
/* The moment of entry is slow, like an object acquiring light.
   CSS animations are decorative: the fallback image stays usable. */
@keyframes material-emergence {
  from{opacity:.48;filter:brightness(.49) blur(5px);}
  55%{opacity:.85;filter:brightness(.76) blur(0);}
  to{opacity:1;filter:brightness(1) blur(0);}
}
@keyframes breathing-light {
  0%,100%{filter:brightness(.94) contrast(1.03);}
  50%{filter:brightness(1.045) contrast(1.02);}
}
@media(prefers-reduced-motion:no-preference){
  .page-home .world-object-media{
    animation:material-emergence 2.7s cubic-bezier(.19,.85,.25,1) 1 both;
  }
  .page-home .world-object-media > video{
    animation:breathing-light 12s ease-in-out 2.7s infinite;
  }
}
@media(max-width:760px){
  .world-fixed::before{
    background:radial-gradient(ellipse 70vw 72vw at 52% 41%,
      rgba(170,181,171,.058),transparent 74%);
    opacity:.7;
  }
  .world-object{--aura-opacity:.24;}
  .world-object::before{filter:blur(32px);}
  .world-probe-shadow{display:none;}
  .world-object[data-probing="true"][data-material="solid"] .world-object-drawing{opacity:0;-webkit-mask-image:none;mask-image:none;}
}
@media(prefers-reduced-motion:reduce){
  .world-fixed::before{opacity:.16!important;transition:none!important;}
  .world-object::before{opacity:.1!important;filter:none!important;transition:none!important;}
  .world-probe-shadow{display:none!important;}
  .world-object[data-probing="true"][data-material="solid"] .world-object-drawing{opacity:0!important;}
}
