/* Paretile — one-page site. Colors, type, and motion follow DESIGN.md.
   Black field, gold as amber phosphor, IBM Plex Mono. */

:root{
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#101018;
  --fg:#F4EFEA;
  --muted:#9A948C;
  --gold:#D4A017;
  --hat:#E34432;
  --line:#2A2A36;
  --err:#E34432;
  --max:42rem;
  --header:4.25rem;
  --scan:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(244,239,234,.018) 2px,
    rgba(244,239,234,.018) 3px
  );
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{
  font-size:106.25%;
  -webkit-text-size-adjust:100%;
  color-scheme:dark;
  min-height:100%;
  position:relative;
  background-color:var(--bg);
}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:transparent;
  color:var(--fg);
  font:1rem/1.6 var(--mono);
  font-variant-ligatures:none;
  overflow-x:clip;
}

@font-face{
  font-family:"IBM Plex Mono";
  font-weight:400;
  font-style:normal;
  font-display:swap;
  src:url(/fonts/ibm-plex-mono-400.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-weight:600;
  font-style:normal;
  font-display:swap;
  src:url(/fonts/ibm-plex-mono-600.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Scanlines + grain cover the full document, not just the viewport,
   so there is no seam at the fold in screenshots or on long pages.
   html:before is not a flex item of body. */
html:before{
  content:"";
  position:absolute;
  inset:0;
  min-height:100%;
  pointer-events:none;
  z-index:40;
  background-image:var(--grain),var(--scan);
  background-size:180px 180px,100% 3px;
  background-repeat:repeat,repeat;
}

::selection{background:var(--gold);color:var(--bg)}

.skip{
  position:absolute;
  left:.75rem;top:.75rem;
  z-index:50;
  padding:.45rem .7rem;
  background:var(--gold);
  color:var(--bg);
  font-weight:600;
  text-decoration:none;
  transform:translateY(-200%);
}
.skip:focus{transform:none}

/* Gold underline that slides in from the left. The wordmark is excluded. */
a{
  color:var(--gold);
  text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:0 1px;
  transition:background-size .28s ease,color .2s ease;
}
a:hover{color:var(--fg);background-size:100% 1px}
a:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  background-size:100% 1px;
}
a.brand{
  background-image:none;
  transition:none;
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:1.35rem 1.5rem 0;
  position:relative;
  z-index:1;
  flex:none;
}
.brand{line-height:0;flex:none}
.wordmark{display:block;height:36px;width:auto}
.site-nav{display:flex;align-items:center;gap:1.25rem}
.site-nav a{
  color:var(--fg);
  font-weight:600;
  font-size:.9rem;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  background-image:linear-gradient(var(--gold),var(--gold));
}
.site-nav a:hover{color:var(--gold)}

main{position:relative;z-index:1;flex:1 0 auto;width:100%;max-width:var(--max);margin:0 auto;padding:0 1.5rem 3rem}

.hero{position:relative;padding:3.25rem 0 2.75rem}
/* Soft amber well behind the penguin. Not a shadow on the mark. */
.hero:before{
  content:"";
  position:absolute;
  left:-4.5rem;
  top:-1.25rem;
  width:24rem;
  height:24rem;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle at 42% 46%,
    rgba(212,160,23,.34) 0%,
    rgba(212,160,23,.14) 36%,
    rgba(212,160,23,.04) 58%,
    transparent 72%);
}
.avatar{
  position:relative;
  z-index:1;
  display:block;
  width:14.5rem;
  height:14.5rem;
  margin:0 0 2.1rem;
  object-fit:cover;
  background:var(--gold);
}
.avatar-sm{width:5.5rem;height:5.5rem;margin:0 0 1.6rem}
.lost{position:relative}
.lost:before{
  content:"";
  position:absolute;
  left:-2.5rem;
  top:-.6rem;
  width:12rem;
  height:12rem;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle at 40% 45%,
    rgba(212,160,23,.3) 0%,
    rgba(212,160,23,.1) 40%,
    transparent 70%);
}

.prompt{
  position:relative;
  z-index:1;
  margin:0 0 .7rem;
  font-size:.92rem;
  color:var(--muted);
  font-weight:400;
}
.prompt-user{color:var(--gold);font-weight:600}
.prompt-path{color:var(--fg)}
.prompt-hash{color:var(--gold);font-weight:600;margin-left:.15rem}
.cmd{display:inline-block;white-space:nowrap;vertical-align:bottom}

h1{
  position:relative;
  z-index:1;
  font-size:clamp(1.45rem,4.2vw,2.15rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.25;
  margin:0;
  text-wrap:balance;
  max-width:28ch;
}
.cursor{
  display:inline-block;
  width:.55em;
  height:.95em;
  margin-left:.2em;
  background:var(--gold);
  vertical-align:-.08em;
  animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

.comment{
  position:relative;
  z-index:1;
  margin:1.15rem 0 0;
  color:var(--muted);
  font-size:.95rem;
}

.work{padding:.4rem 0 1rem}
.file{
  margin:0;
  padding:1.5rem 0 0;
  border-top:1px solid var(--line);
}
.file-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem .85rem;
  margin:0 0 .85rem;
  font-size:.85rem;
}
.path{color:var(--gold);font-weight:600}
.pill{color:var(--hat);font-weight:600}
.file h2{
  margin:0 0 .7rem;
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:-.01em;
}
.file p{margin:0 0 1rem;max-width:38rem}
.note{
  color:var(--fg);
  border-left:2px solid var(--gold);
  padding:.15rem 0 .15rem 1rem;
  margin:1.1rem 0 1.2rem;
}
.file-links{margin:0}
.file-links a{font-weight:600}
.file-links .sep{color:var(--muted);padding:0 .35rem}

.site-footer{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:2rem 1.5rem 3.25rem;
  color:var(--muted);
  font-size:.85rem;
  border-top:1px solid var(--line);
  flex:none;
}
.footer-place{
  margin:0 0 .45rem;
  color:var(--fg);
  font-weight:600;
  font-size:.95rem;
}
.footer-links{margin:0 0 1.1rem}
.footer-links a{color:var(--fg);font-weight:400}
.footer-links a:hover{color:var(--gold)}
.footer-links .sep{color:var(--muted);padding:0 .1rem}
.footer-copy{margin:0}

.lost{padding:3.25rem 0 4.5rem}
.lost h1{max-width:none;margin:1rem 0 .55rem}
.lost .lede{margin:0 0 1.6rem;color:var(--muted);font-size:1.05rem}
.term-err{margin:.15rem 0 1.15rem;color:var(--hat);font-size:.95rem}

@media (max-width:600px){
  html{font-size:100%}
  .site-header,main,.site-footer{padding-left:1.15rem;padding-right:1.15rem}
  .wordmark{height:32px}
  .hero{padding:2.4rem 0 2.2rem}
  .hero:before{left:-3.25rem;top:-.75rem;width:19rem;height:19rem}
  .avatar{width:11.5rem;height:11.5rem;margin-bottom:1.7rem}
  .avatar-sm{width:6.5rem;height:6.5rem;margin-bottom:1.5rem}
  .site-nav{gap:1rem}
  h1{max-width:none}
}

/* Motion only when the visitor has not asked it to stop.
   Default styles are the settled state, so reduced-motion needs no resets. */
@media (prefers-reduced-motion:no-preference){
  .cmd{
    width:0;
    overflow:hidden;
    animation:type .55s steps(6,end) .35s forwards;
  }
  @keyframes type{to{width:6ch}}

  .site-header{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
  .hero .avatar{animation:rise .8s cubic-bezier(.2,.7,.3,1) .08s both}
  .hero .prompt{animation:rise .7s cubic-bezier(.2,.7,.3,1) .18s both}
  .hero h1{animation:rise .75s cubic-bezier(.2,.7,.3,1) .95s both}
  .hero .comment{animation:rise .7s cubic-bezier(.2,.7,.3,1) 1.15s both}
  .work{animation:rise .75s cubic-bezier(.2,.7,.3,1) 1.3s both}
  .site-footer{animation:rise .75s cubic-bezier(.2,.7,.3,1) 1.45s both}
  .lost .avatar,
  .lost .prompt,
  .lost .term-err,
  .lost h1,
  .lost .lede,
  .lost .file-links{
    animation:rise .7s cubic-bezier(.2,.7,.3,1) both;
  }
  .lost .avatar{animation-delay:.08s}
  .lost .prompt{animation-delay:.18s}
  .lost .term-err{animation-delay:.28s}
  .lost h1{animation-delay:.4s}
  .lost .lede{animation-delay:.52s}
  .lost .file-links{animation-delay:.64s}

  @keyframes rise{
    from{opacity:0;transform:translateY(.6rem)}
    to{opacity:1;transform:none}
  }
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .cursor{opacity:1}
}