/* The open Hello Monday composition, set entirely in Golos Text. */
:root{
  --font-text:"Golos Text",Arial,sans-serif;
  --font-heading:var(--font-text);
  --mono:var(--font-text);
  --bg:#ffffff;
  --paper:#ffffff;
  --ink:#151515;
  --muted:#626262;
  --soft:#f3f3f1;
  --journal-ground:#f4f4f2;
  --type-page:clamp(3.5rem,7.5vw,6rem);
  --type-body:clamp(1rem,.94rem + .25vw,1.125rem);
  --type-body-sm:var(--type-body);
  --type-label:.875rem;
  --radius-media:16px;
  --radius-control:0px;
}
body{font-family:var(--font-text);background:var(--bg);color:var(--ink);font-kerning:normal}
button,input,select,textarea,code,kbd,pre,samp{font-family:var(--font-text)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.shell{width:calc(100% - clamp(40px,10vw,144px));max-width:1440px;margin-inline:auto}
.site-header{background:var(--bg);border:0}
.nav-inner{min-height:120px;gap:28px}
.brand--wordmark{font-family:var(--font-text);font-size:26px;font-weight:600;letter-spacing:-.035em}
.main-nav{gap:38px}
.main-nav::before{content:none}
.main-nav a{min-height:44px;padding:10px 0;color:var(--ink);font-size:14px;font-weight:400}
.main-nav a[aria-current=page]{font-weight:400;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.main-nav a:hover{text-decoration:underline;text-underline-offset:6px}
.portfolio-intro{text-align:center;padding-block:72px 92px}
.portfolio-intro h1{margin:0;font-family:var(--font-heading);font-size:var(--type-page);font-weight:400;line-height:1.05;letter-spacing:-.035em}
.portfolio-intro p{max-width:47ch;margin:30px auto 0;color:var(--ink);font-size:18px;line-height:1.6;text-wrap:pretty}
.page-header h1,.about-heading h1{font-weight:400}
.accent-period{display:none}
.article-header h1,.project-header h1,.note-page h1{font-weight:400}
.project-article-heading h1{font-weight:400;line-height:1.05;letter-spacing:-.045em}
.project-next a{font-family:var(--font-heading);font-weight:400;letter-spacing:-.03em}
.article-prose h2,.project-longform h2,.project-technology h2{font-weight:400}
.archive-article h2{margin:0;font-family:var(--font-heading);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.2}
.archive-article .article-meta{margin:14px 0 0}
.archive-article .article-meta>span{font-size:var(--type-small);font-weight:400;letter-spacing:0;text-transform:none}
.archive-excerpt{color:var(--ink)}
.archive-read{font-weight:400;text-decoration:underline;text-underline-offset:5px}
.archive-article-link:hover .archive-read{gap:0}
.project-cover,.project-screenshot-frame,.article-hero-image img,.project-screenshot-frame img,.doclear-shot-link img,.langword-shot-link img{border-radius:var(--radius-media)}
.project-cover{overflow:hidden}
:focus-visible{outline-color:var(--ink)}
@media(max-width:767px){
  .nav-inner{min-height:94px}
  .main-nav{gap:24px}
  .brand--wordmark{font-size:23px}
  .main-nav a{font-size:13px}
  .portfolio-intro{padding-block:54px 64px}
  .portfolio-intro p{font-size:16px;max-width:35ch;margin-top:24px}
}
@media(max-width:520px){
  .site-header .nav-inner{display:flex;align-items:center;flex-wrap:nowrap;gap:24px;min-height:80px;padding-block:14px}
  .brand--wordmark{min-height:34px}
  .main-nav{width:auto;justify-content:flex-end;gap:24px;margin-top:0}
  .main-nav a{padding:8px 0;min-height:44px}
  .portfolio-intro{padding-block:40px 48px}
}
@media(prefers-reduced-motion:no-preference){
  .portfolio-intro h1{animation:portfolio-arrive 650ms cubic-bezier(.2,.65,.3,1) both}
  .portfolio-intro p{animation:portfolio-arrive 650ms 80ms cubic-bezier(.2,.65,.3,1) both}
  @keyframes portfolio-arrive{from{opacity:.5;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
}