:root{
  --paper:#f8f8f6;
  --ink:#222220;
  --graphite:#5c5c58;
  --pencil:#9b9b96;
  --fig:min(54vw,92vh);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(1.25rem,4vw,4rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:10}
.skip:focus{left:var(--pad);top:.5rem}

/* top bar */
.bar{position:fixed;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:baseline;padding:1.1rem var(--pad);background:linear-gradient(var(--paper) 60%,transparent)}
.mark{font:400 1.5rem/1 var(--serif);text-decoration:none;letter-spacing:-.02em}
.bar nav{display:flex;gap:1.75rem;font-size:.95rem}
.bar nav a{text-decoration:none;color:var(--graphite);transition:color .2s}
.bar nav a:hover{color:var(--ink)}

/* hero */
.hero{padding:5rem var(--pad) 0}
.stage{position:relative;display:grid;grid-template-columns:1fr var(--fig);max-width:1600px;margin:0 auto}
.hero-top,.hero-bottom{grid-column:1;padding-right:clamp(1rem,3vw,3rem)}
.hero-top{grid-row:1;align-self:end;padding-bottom:clamp(1rem,3vh,2.5rem)}
.hero-bottom{grid-row:2;align-self:start;padding-top:clamp(2rem,4.5vh,3.25rem)}
.portrait{grid-column:2;grid-row:1/3;margin:0;position:relative;width:var(--fig);aspect-ratio:1}
.portrait img{display:block;width:100%;height:100%;mix-blend-mode:multiply;filter:brightness(1.07) contrast(1.12);animation:fade 1.2s ease both}
.construct{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.construct circle,.construct path{fill:none;stroke:var(--pencil);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke;animation:draw 2.2s .5s ease-out both}
.construct path{animation-delay:1.1s}

h1{margin:0;font:300 clamp(5rem,15vw,13rem)/.82 var(--serif);letter-spacing:-.05em;font-variation-settings:"opsz" 144}
.slogan{margin:0 0 1.5rem;max-width:15em;font:300 italic clamp(1.4rem,2.5vw,2.2rem)/1.2 var(--serif);letter-spacing:-.01em}
.intro{margin:0;max-width:30em;color:var(--graphite);font-size:1.0625rem}

/* horizon: continues the horizon of the drawing across the page */
.stage::before{content:"";position:absolute;left:calc(50% - 50vw);right:var(--fig);top:calc(var(--fig) * .5104);height:1px;background:var(--ink);opacity:.8;transform-origin:left;animation:line 1.4s ease-out both}
.stage::after{content:"";position:absolute;left:0;right:var(--fig);top:calc(var(--fig) * .5104 + 1px);height:7px;background:repeating-linear-gradient(90deg,var(--pencil) 0 1px,transparent 1px 28px);opacity:.7}

.social{display:flex;gap:1.25rem;list-style:none;margin:1.75rem 0 0;padding:0}
.social a{display:grid;place-items:center;width:2.25rem;height:2.25rem;color:var(--graphite);transition:color .2s,transform .2s}
.social a:hover{color:var(--ink);transform:translateY(-2px)}
.social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* sections */
.block{display:grid;grid-template-columns:minmax(8rem,1fr) minmax(0,2.4fr);gap:2rem clamp(2rem,6vw,6rem);max-width:1600px;margin:0 auto;padding:clamp(5rem,12vw,10rem) var(--pad) 0}
.block h2{margin:0;font:300 clamp(1.8rem,3vw,2.6rem)/1.1 var(--serif);letter-spacing:-.02em}
.body{grid-column:2;max-width:40rem}
.about .lead{margin:0 0 1.5rem;font:300 clamp(1.5rem,2.6vw,2.2rem)/1.35 var(--serif);letter-spacing:-.01em}
.about p{margin:0;color:var(--graphite)}
.about .lead{color:var(--ink)}
.setup{padding-top:clamp(3rem,6vw,5rem)}
.setup .body{max-width:none;grid-column:2}
.setup figure{margin:0}
.setup img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply}

/* entries: projects & articles */
.entries{grid-column:2;list-style:none;margin:0;padding:0;max-width:44rem}
.entries li{position:relative}
.entry{display:block;position:relative;padding:1.6rem 3rem 1.6rem 0;text-decoration:none}
.entry h3{margin:0 0 .35rem;font:400 clamp(1.3rem,2vw,1.65rem)/1.2 var(--serif);letter-spacing:-.01em}
.entry p{margin:0;color:var(--graphite);max-width:34em}
.entry .arrow{position:absolute;right:0;top:1.75rem;width:1.5rem;height:1.5rem;stroke:var(--graphite);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s,stroke .2s}
.entry:hover .arrow,.entry:focus-visible .arrow{transform:translate(3px,-3px);stroke:var(--ink)}
.scribble{position:absolute;left:0;bottom:0;width:100%;height:8px;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--pencil);stroke-width:1;vector-effect:non-scaling-stroke}
.scribble .strong{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease}
.entry:hover .strong,.entry:focus-visible .strong{stroke-dashoffset:0}
.articles .entry{padding-left:1.25rem;border-left:1px solid var(--pencil);margin:.5rem 0}
.articles .entry h3{font-style:italic;font-weight:300}
.scribble.none{display:none}
.empty{grid-column:2;margin:0;color:var(--graphite)}

.foot{display:flex;justify-content:space-between;max-width:1600px;margin:0 auto;padding:clamp(5rem,10vw,8rem) var(--pad) 3rem;font-size:.95rem}
.foot a{color:var(--graphite);text-decoration:none;border-bottom:1px solid var(--pencil);padding-bottom:1px}
.foot a:hover{color:var(--ink);border-color:var(--ink)}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* tablet and phone: stack, let the drawn horizon do the work */
@media (max-width:900px){
  :root{--fig:100%}
  .hero{padding-top:5rem}
  .stage{grid-template-columns:1fr}
  .hero-top,.hero-bottom,.portrait{grid-column:1;padding-right:0}
  .hero-top{grid-row:1}
  .portrait{grid-row:2;width:calc(100% + var(--pad) * 2);margin-inline:calc(var(--pad) * -1);margin-top:1rem}
  .hero-bottom{grid-row:3}
  .stage::before,.stage::after{display:none}
  h1{font-size:clamp(5rem,28vw,9rem)}
  .block{grid-template-columns:1fr}
  .body,.entries,.empty,.setup .body{grid-column:1}
  .bar nav{gap:1.1rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .construct circle,.construct path{stroke-dashoffset:0}
}