/* Aaron Pinto — a bookkeeper's ledger in warm paper tones. One stylesheet for every page. */
:root{
  --t-sec:24px;
  --t-title:20px;
  --t-body:17px;
  --t-meta:15px;
  --t-mono:13px;
  --cat-px:21px;
}
/* warm morning paper on every page */
:root{--bg0:#F1E6D4;--bg1:#EDE0CA;--bg2:#E8D8BE;--ink:#17150F;--ink-2:#463F35;--soft:#6E6455;--faint:#948873;--rule:#DCCDB8;--rule-2:#CBB89F;--clay:#BF5730;--clay-2:#D9764E;--cat:#997F58}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  color:var(--ink);
  font:400 var(--t-body)/1.62 'EB Garamond',Georgia,serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  /* paper: a faint grain multiplied into the page wash. painted once, never re-composited on scroll */
  background-color:var(--bg1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.22' intercept='0.78'/%3E%3CfeFuncG type='linear' slope='0.22' intercept='0.78'/%3E%3CfeFuncB type='linear' slope='0.22' intercept='0.78'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(var(--bg0) 0%,var(--bg1) 45%,var(--bg2) 100%);
  background-blend-mode:multiply,normal;
}
.m{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
::selection{background:#E9C9A8}
a:focus-visible{outline:2px solid var(--clay-2);outline-offset:2px;border-radius:2px}

/* ───────── top bar: name and the section tabs ───────── */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:18px 32px;flex-wrap:wrap;
  max-width:1160px;margin:0 auto;padding:26px 32px 0}
.top .home{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.top .home:hover{color:var(--clay)}
.tabs{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto}
.tabs a{font:400 var(--t-mono) 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.tabs a:hover{color:var(--clay)}
.tabs a.on{color:var(--clay);border-bottom-color:var(--clay-2)}
.hero .top{position:absolute;left:0;right:0;top:0;z-index:2;justify-content:flex-end;padding:34px 44px 0}

/* ───────── front page (title page) ───────── */
.hero{position:relative;z-index:1;min-height:100vh;min-height:100svh;
  padding:56px 24px 64px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.tframe{position:absolute;inset:24px;border:1px solid var(--rule-2);pointer-events:none;opacity:.7}
.heroin{max-width:760px;margin:0 auto;width:100%}
.hero h1{font-size:46px;font-weight:600;letter-spacing:-.015em;line-height:1.1}
.flor{display:block;margin:2px auto 0;width:230px;height:26px;overflow:visible}
.flor path{fill:none;stroke:var(--clay-2);stroke-width:1.5;stroke-linecap:round}
.bio{font-size:var(--t-body);color:var(--ink-2);max-width:54ch;margin:20px auto 0}
.socials{display:flex;gap:22px;margin-top:22px;align-items:center;flex-wrap:wrap;justify-content:center}
.socials a{color:var(--ink-2);font-size:var(--t-body);text-underline-offset:3px;transition:color .15s}
.socials a:hover{color:var(--clay)}
.anim .heroin>*{opacity:0;transform:translateY(14px);animation:hin .85s cubic-bezier(.2,.7,.2,1) forwards}
.anim .heroin>*:nth-child(2){animation-delay:.12s}
.anim .heroin>*:nth-child(3){animation-delay:.22s}
.anim .heroin>*:nth-child(4){animation-delay:.34s}
@keyframes hin{to{opacity:1;transform:none}}
.anim .flor path{stroke-dasharray:270;stroke-dashoffset:270;animation:draw 1.3s .55s cubic-bezier(.4,0,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ───────── a section page: the cat up top, then the ledger ───────── */
.page{max-width:1160px;margin:0 auto;padding:8px 32px 96px}
.stage{position:relative;display:flex;justify-content:center;padding:26px 0 6px;cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent}
.stage pre{font:400 var(--cat-px)/1.32 'JetBrains Mono',monospace;color:var(--cat);white-space:pre;
  min-height:calc(12 * 1.32 * var(--cat-px))}
.heart{position:absolute;color:var(--clay);font-size:19px;pointer-events:none;z-index:3;animation:floatup 1.1s ease-out forwards}
@keyframes floatup{to{transform:translateY(-52px);opacity:0}}

.sh{display:flex;align-items:baseline;gap:12px;padding-bottom:9px;position:relative;margin-top:28px}
.sh:after{content:'';position:absolute;left:0;bottom:0;height:1px;background:var(--rule-2);width:100%;
  transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.anim .in .sh:after,.sh.in:after{transform:none}
.sh .no{font-size:var(--t-sec);font-weight:500;font-variant-numeric:lining-nums;color:var(--clay-2);flex:none}
.sh h2{font-size:var(--t-sec);font-weight:500;letter-spacing:-.01em}
.lead{font-size:var(--t-title);color:var(--ink-2);margin:14px 0 0;max-width:60ch}
.lead a{color:var(--clay);text-underline-offset:3px}
.sub{font-size:var(--t-title);font-weight:600;line-height:1.3;color:var(--ink);padding-bottom:8px;border-bottom:1px solid var(--rule-2);margin:40px 0 0}
.sub:first-child{margin-top:24px}

/* ledger margin rule (the red line in an account book) */
.ledger{position:relative}
.ledger:before{content:'';position:absolute;left:112px;top:10px;bottom:10px;width:1px;background:rgba(191,87,48,.22)}

/* entries: date | text | that entry's pictures */
.e{display:grid;grid-template-columns:104px minmax(0,1fr) 460px;gap:0 24px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--rule);position:relative}
.e:last-child{border-bottom:0}
.e .d{font:400 var(--t-meta)/1.5 'EB Garamond',Georgia,serif;color:var(--faint);padding-top:4px}
.e h3{font-size:var(--t-title);font-weight:600;line-height:1.3}
.e .w{font-size:var(--t-meta);color:var(--soft);margin-top:2px}
.e p{font-size:var(--t-body);color:var(--ink-2);margin-top:8px;max-width:46ch}
.aw{list-style:none;margin-top:14px;max-width:46ch}
.aw li{position:relative;padding:7px 0 7px 20px;border-top:1px solid var(--rule)}
.aw li:before{content:'—';position:absolute;left:0;top:7px;color:var(--clay-2);font-size:var(--t-meta)}
.aw b{display:block;font-size:var(--t-body);font-weight:600;line-height:1.35}
.aw span{display:block;font-size:var(--t-meta);color:var(--soft)}
/* list rows (media) */
.r{display:grid;grid-template-columns:104px 1fr;gap:0 16px;padding:12px 0;border-bottom:1px solid var(--rule);transition:border-color .15s}
.r:last-child{border-bottom:0}
.r:hover{border-bottom-color:var(--clay-2)}
.r .d{font:400 var(--t-meta) 'EB Garamond',Georgia,serif;color:var(--faint);padding-top:4px}
.r .t{font-size:var(--t-title);line-height:1.35}
.r .t i{font-style:italic;color:var(--soft);font-size:var(--t-meta)}
.r .note{font-size:var(--t-meta);font-style:italic;color:var(--soft);line-height:1.5;margin-top:3px}
.empty{font-size:var(--t-body);color:var(--soft);font-style:italic;padding:28px 0}

/* ───────── the pictures: a loose pile beside each entry that fans out when you hover the entry ───────── */
.pics{position:relative;grid-column:3}
.fan{position:relative}
.card{position:absolute;left:0;top:0;width:220px;padding:7px 7px 9px;background:var(--bg0);border:1px solid var(--rule-2);
  box-shadow:0 8px 18px -12px rgba(23,21,15,.5);transform-origin:50% 45%;
  transform:translate(var(--px),var(--py)) rotate(var(--pr)) scale(.92);
  transition:transform .5s cubic-bezier(.2,.9,.3,1.05),opacity .3s,box-shadow .3s;transition-delay:var(--dl,0s);
  will-change:transform}
.card:before{content:'';position:absolute;left:50%;top:-8px;width:54px;height:16px;margin-left:-27px;
  background:rgba(233,201,168,.72);border:1px solid rgba(191,87,48,.12);transform:rotate(-2deg)}
.card.tall{width:168px}
.card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;background:var(--rule)}
.card.tall img{aspect-ratio:3/4}
/* a link card: a picture of the thing, which is the link, with a word of explanation */
.card.link{text-decoration:none;color:var(--clay)}
.card.link img{aspect-ratio:16/10}
.card.sq{width:150px}
.card.sq img{aspect-ratio:1;border-radius:24px}
.card .cap{display:block;font:400 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.link:hover .cap{color:var(--ink)}
.e:hover{z-index:5}
.e:hover .card{transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(1);box-shadow:0 14px 26px -12px rgba(23,21,15,.55)}
.e.many:hover ~ .e .card{opacity:.5}
/* reveal */
.anim .e,.anim .r{opacity:0;transform:translateY(10px)}
.anim .e.in,.anim .r.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}

@media(max-width:1100px){
  .e{grid-template-columns:104px minmax(0,1fr) 380px}
  .card{width:184px}.card.tall{width:140px}.card.sq{width:130px}
}
@media(max-width:860px){
  :root{--cat-px:14px}
  .top{padding:20px 20px 0}
  .hero .top{padding:26px 24px 0;justify-content:center}
  .page{padding:8px 20px 72px}
  .e{grid-template-columns:104px minmax(0,1fr)}
  /* no hover on touch screens: the pictures sit in a row under the text, all visible */
  .pics{grid-column:2;margin-top:14px}
  .fan{display:flex;flex-wrap:wrap;gap:14px 12px;height:auto!important;padding-top:6px}
  .card,.e:hover .card{position:static;transform:rotate(var(--sr));opacity:1!important;transition:none}
}
@media(max-width:600px){
  :root{--cat-px:11px}
  .hero{padding-top:64px}
  .hero h1{font-size:34px}
  .tframe{inset:12px}
  .e,.r{grid-template-columns:1fr}
  .e .d,.r .d{padding:0 0 4px}
  .pics{grid-column:1}
  .ledger:before{display:none}
  .card{width:150px}.card.tall{width:116px}.card.sq{width:110px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .anim .e,.anim .r{opacity:1;transform:none}
  .anim .heroin>*{opacity:1;transform:none}
  .anim .flor path{stroke-dashoffset:0}
  .sh:after{transform:none}}