/* ============================================
   alexdangelo.com — shared styles
   Palette: change these four values to retheme
   the entire site.
   ============================================ */
:root{
  --deep:  #0C1F2B;              /* page background */
  --mist:  #E8F0F2;              /* primary text */
  --soft:  #8FA9B4;              /* secondary text */
  --amber: #E5A83C;              /* accent */
  --rule:  rgba(232,240,242,.14);/* hairline dividers */
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--deep);
  color:var(--mist);
  font-family:'Newsreader',Georgia,serif;
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono',monospace}
a:focus-visible{outline:2px solid var(--amber);outline-offset:4px}

/* ---------- shared layout ---------- */
.page{max-width:860px;margin:0 auto;padding:clamp(64px,10vh,110px) 36px 88px}
.page--narrow{max-width:780px;padding-top:clamp(48px,8vh,84px)}

/* ---------- shared text links (underlined, amber on hover) ---------- */
.tlink{
  color:var(--mist);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid rgba(232,240,242,.3);
  transition:color .2s,border-color .2s;
}
.tlink:hover{color:var(--amber);border-bottom-color:var(--amber)}

/* ---------- section label (small amber mono caps) ---------- */
.label{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);
}

/* ---------- entrance animation ---------- */
.reveal{opacity:0;transform:translateY(14px);animation:rise .85s cubic-bezier(.2,.7,.3,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.34s}
.d4{animation-delay:.46s}.d5{animation-delay:.58s}.d6{animation-delay:.7s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}

/* ============================================
   Homepage
   ============================================ */
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.eyebrow b{color:var(--mist);font-weight:500}
.intro{margin-top:44px;font-size:clamp(28px,4.4vw,48px);line-height:1.32;font-weight:300;letter-spacing:-.018em}
.intro .hl{color:var(--amber)}
.beliefs{margin-top:72px}
.belief{padding:38px 0;border-top:1px solid var(--rule)}
.belief h2{font-size:clamp(23px,3vw,32px);font-weight:400;letter-spacing:-.014em;line-height:1.25}
.belief h2 span{color:var(--amber)}
.belief p{margin-top:12px;font-size:17.5px;line-height:1.7;color:var(--soft);max-width:56ch;font-weight:300}
.links{margin-top:60px;padding-top:34px;border-top:1px solid var(--rule);display:flex;gap:34px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:13.5px;letter-spacing:.06em}
.links .tlink{padding-bottom:5px}
.foot{margin-top:34px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.8;letter-spacing:.04em;color:var(--soft);max-width:52ch}

/* ============================================
   Résumé page
   ============================================ */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.back{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;color:var(--soft);text-decoration:none;transition:color .2s}
.back:hover{color:var(--amber)}
.resume-name{margin-top:34px;font-size:clamp(34px,5vw,46px);font-weight:400;letter-spacing:-.02em;line-height:1.08}
.meta{margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.05em;color:var(--soft)}
.meta a{color:var(--soft);text-decoration:none;border-bottom:1px solid rgba(232,240,242,.25);transition:.2s}
.meta a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.summary{margin-top:30px;font-size:19px;font-weight:300;line-height:1.62;max-width:60ch}
.summary p+p{margin-top:12px;color:var(--soft);font-size:17.5px}
.resume h2{margin:58px 0 8px}
.role{padding:26px 0;border-top:1px solid var(--rule)}
.role:first-of-type{border-top:none;padding-top:18px}
.rhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.rhead h3{font-size:22px;font-weight:400;letter-spacing:-.012em}
.rhead h3 span{color:var(--soft);font-weight:300}
.rhead time{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--soft);letter-spacing:.04em}
.blurb{margin-top:4px;font-size:15.5px;color:var(--soft);font-style:italic}
.role ul{margin-top:12px;list-style:none}
.role li{position:relative;padding:5px 0 5px 22px;font-size:16.5px;font-weight:300;color:var(--mist)}
.role li::before{content:"";position:absolute;left:2px;top:16px;width:9px;height:1px;background:var(--amber)}
.role li b{font-weight:500}
.role li .m{color:var(--soft)}
.plain{margin-top:10px;font-size:16.5px;font-weight:300;color:var(--soft);max-width:62ch}
.plain--bright{color:var(--mist)}
.skills{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.skills span{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.03em;color:var(--mist);border:1px solid var(--rule);padding:6px 13px;border-radius:100px}
.resume footer{margin-top:64px;padding-top:28px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.05em;color:var(--soft)}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .page{padding:56px 24px 64px}
  .beliefs{margin-top:52px}
  .belief{padding:28px 0}
  .links{gap:22px}
  .rhead{flex-direction:column;gap:2px}
}

/* ---------- print (résumé flips to clean black-on-white) ---------- */
@media print{
  :root{--deep:#fff;--mist:#1a1a1a;--soft:#555;--amber:#8a5a00;--rule:#ddd}
  body{font-size:12.5px;line-height:1.5}
  .page{padding:0;max-width:none}
  .back,.top{display:none}
  .resume-name{margin-top:0}
  .role{padding:14px 0}
  .resume h2{margin:24px 0 4px}
}

/* ============================================
   Notes index + article pages
   ============================================ */
.crumb{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;color:var(--soft);text-decoration:none;transition:color .2s}
.crumb:hover{color:var(--amber)}
.page-title{margin-top:34px;font-size:clamp(34px,5vw,46px);font-weight:400;letter-spacing:-.02em;line-height:1.1}
.page-sub{margin-top:14px;font-size:18px;font-weight:300;color:var(--soft);max-width:56ch}

/* --- notes index entries --- */
.entries{margin-top:56px}
.entry{padding:34px 0;border-top:1px solid var(--rule)}
.entry time{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.entry h2{margin-top:8px;font-size:clamp(21px,2.6vw,27px);font-weight:400;letter-spacing:-.012em;line-height:1.3}
.entry h2 a{color:var(--mist);text-decoration:none;transition:color .2s}
.entry h2 a:hover{color:var(--amber)}
.entry p{margin-top:10px;font-size:16.5px;font-weight:300;line-height:1.7;color:var(--soft);max-width:58ch}
.entry .more{display:inline-block;margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em}

/* --- article --- */
.article-head time{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.article-head h1{margin-top:12px;font-size:clamp(30px,4.6vw,44px);font-weight:400;letter-spacing:-.02em;line-height:1.14}
.prose{margin-top:36px;max-width:62ch}
.prose p{margin:0 0 18px;font-size:18px;font-weight:300;line-height:1.75;color:var(--mist)}
.prose h2{margin:44px 0 14px;font-size:24px;font-weight:400;letter-spacing:-.012em}
.prose a{color:var(--mist);text-decoration:none;border-bottom:1px solid rgba(232,240,242,.35);transition:.2s}
.prose a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.prose blockquote{margin:30px 0;padding:4px 0 4px 24px;border-left:2px solid var(--amber);font-size:21px;font-weight:300;line-height:1.55;color:var(--soft);font-style:italic}
.prose ul{margin:0 0 18px;padding-left:2px;list-style:none}
.prose li{position:relative;padding:4px 0 4px 22px;font-size:17.5px;font-weight:300;line-height:1.7}
.prose li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:1px;background:var(--amber)}

/* --- figures / screenshots --- */
.prose figure{margin:34px 0}
.prose figure img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--rule)}
.prose figcaption{margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.04em;line-height:1.7;color:var(--soft)}
.prose figure.bleed{margin-left:calc(50% - 50vw + 18px);margin-right:calc(50% - 50vw + 18px)}
@media(min-width:900px){.prose figure.bleed{margin-left:-60px;margin-right:-60px}}

.article-foot{margin-top:56px;padding-top:28px;border-top:1px solid var(--rule);display:flex;gap:30px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em}