/* Degen Logs blog (pipeline/blog.py). Sits on top of styles.css, including its notebook layer. */
:root{--paper-card:#fffdf6}

/* homepage teaser + blog index cards: taped index cards */
.blog-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(1.25rem,3vw,2rem);margin-bottom:2.25rem}
.post-card{position:relative;background:var(--paper-card);border:1.5px solid rgba(18,48,36,.2);border-radius:4px;box-shadow:3px 5px 0 rgba(18,48,36,.12);transition:transform .18s ease,box-shadow .18s ease;color:var(--deep)}
.post-card:nth-child(odd){transform:rotate(-.8deg)}
.post-card:nth-child(even){transform:rotate(.7deg)}
.post-card:hover{transform:rotate(0) translateY(-4px);box-shadow:4px 8px 0 rgba(18,48,36,.16)}
.post-card::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:26px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,255,.6);border:1px solid rgba(18,48,36,.12)}
.post-card__link{display:flex;flex-direction:column;gap:.6rem;height:100%;padding:1.5rem 1.4rem 1.25rem;text-decoration:none;color:inherit}
.post-card h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.35rem;line-height:1.1;color:var(--forest)}
.post-card p{margin:0;font-size:var(--text-sm);color:#2c4a3c;line-height:1.55}
.post-card .tag{align-self:flex-start}
.post-card__by{margin-top:auto;padding-top:.75rem;display:flex;align-items:center;gap:.6rem;font-size:var(--text-xs);font-weight:700;color:#557063;border-top:1px dashed rgba(18,48,36,.2)}
.post-card__by img{width:auto;height:40px}
.post-card--mint{border-left:5px solid var(--win)}
.post-card--gold{border-left:5px solid var(--gold)}
.post-card--coral{border-left:5px solid var(--loss)}
.post-card--lavender{border-left:5px solid #8f8ae0}
.post-card--deep{border-left:5px solid var(--deep)}
.blog-empty{font-family:var(--marker);font-size:1.25rem}

/* blog index */
.blog .section__lede{max-width:62ch}
.blog-hero{padding:clamp(3rem,7vw,5rem) 0 clamp(2rem,4vw,3rem)}
.blog-hero .h2{max-width:20ch;color:var(--forest)}
.desk{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:1rem 2rem}
.desk li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.75rem;align-items:center;max-width:290px}
.desk img{grid-row:1/3;width:auto;height:64px}
.desk strong{font-family:var(--marker);font-weight:400;font-size:1.25rem;color:var(--deep)}
.desk span{font-size:var(--text-xs);color:#557063;line-height:1.4}
.blog-list{padding-top:1rem}

/* post page: one sheet of notebook paper */
.post{max-width:760px;padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,6vw,5rem);color:var(--deep)}
.post__back{display:table;margin-bottom:1.5rem;font-weight:700;font-size:var(--text-sm);color:var(--loss);text-decoration:none}
.post__back:hover{text-decoration:underline wavy var(--gold) 2px;text-underline-offset:4px}
.post__title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,1.3rem + 3vw,3.4rem);line-height:1;color:var(--forest);margin-bottom:1rem}
.post__dek{font-size:var(--text-lg);color:#2c4a3c;max-width:58ch}
.byline{display:flex;align-items:center;gap:.9rem;margin:1.75rem 0 2.25rem;padding:1rem 0;border-top:2px dashed rgba(18,48,36,.2);border-bottom:2px dashed rgba(18,48,36,.2)}
.byline img{width:auto;height:72px}
.byline strong{display:block;font-family:var(--marker);font-weight:400;font-size:1.3rem}
.byline span{display:block;font-size:var(--text-xs);color:#557063}
.post__body{font-size:clamp(1.05rem,1rem + .2vw,1.15rem);line-height:1.75}
.post__body p{margin:0 0 1.25em;max-width:68ch}
.post__body h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);color:var(--forest);margin:2.25rem 0 .9rem}
.post__body h3{font-family:var(--marker);font-weight:400;font-size:1.4rem;color:var(--loss);margin:1.75rem 0 .6rem}
.post__body ul,.post__body ol{margin:0 0 1.25em;padding-left:1.4em;max-width:66ch}
.post__body li{margin-bottom:.4em}
.post__body a{color:var(--forest);font-weight:700;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.post__body code{font-size:.9em;background:rgba(232,185,74,.25);padding:.05em .35em;border-radius:3px}
.post__body hr{border:0;height:14px;margin:2rem 0;background:url("img/doodles/squiggle.svg") left center/160px 100% no-repeat;opacity:.7}
.post__body blockquote{margin:1.5rem 0;padding:1rem 1.25rem;background:#fbe39a;box-shadow:3px 6px 12px rgba(18,48,36,.14);transform:rotate(-.5deg);border-radius:2px;font-weight:600}
.post__body blockquote p{margin:0}
/* speaker lines in The Argument: sticky notes in each writer's color */
.say{position:relative;display:flex;gap:1rem;align-items:flex-start;margin:1.25rem 0;padding:1rem 1.25rem 1rem 1rem;border-radius:2px;box-shadow:3px 6px 12px rgba(18,48,36,.12);max-width:66ch}
.say p{margin:0}
.say__pic{flex:0 0 auto;width:80px;height:auto;max-height:104px;object-fit:contain;margin-top:.1rem;filter:drop-shadow(1px 2px 0 rgba(18,48,36,.15))}
.say__text{flex:1 1 auto;min-width:0}
@media (max-width:640px){.say__pic{width:56px;max-height:76px}}
.say__who{display:block;font-family:var(--marker);font-size:1.15rem;margin-bottom:.25rem}
.say--tommy{background:#fbecc0;transform:rotate(-.4deg)}
.say--bev{background:#ffe1d6;transform:rotate(.4deg)}
.say--ethan{background:#d7f0dc;transform:rotate(-.2deg)}
.say--rich{background:#e6e3fb;transform:rotate(.3deg)}
.post__fine{margin-top:2.5rem;padding:1rem 1.25rem;border:1.5px dashed rgba(18,48,36,.3);border-radius:4px;font-size:var(--text-xs);color:#557063;background:rgba(255,253,246,.7)}
.post__fine p{margin:0 0 .5em}.post__fine p:last-child{margin:0}
.post__fine a{color:var(--loss);font-weight:700}
.wrap.post__fine{margin-bottom:3rem}
#blog .btn--ghost{margin-top:.5rem}
@media (prefers-reduced-motion:reduce){.post-card,.say,.post__body blockquote{transform:none!important}}
@media (max-width:640px){.post-card,.say{transform:none}}
.blog-note{font-size:.8rem;opacity:.7;margin-top:2.5rem;margin-bottom:1.5rem}
/* The Class page + inline post art (2026-10-05) */
.post__art{margin:1.5rem 0;text-align:center}.post__art img{max-height:320px;width:auto;max-width:100%;filter:drop-shadow(2px 4px 0 rgba(18,48,36,.12))}
.class-hero{display:block;width:100%;max-width:640px;height:auto;margin:1.5rem auto 0}
.class-jump{list-style:none;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;padding:0;margin:1.5rem 0 0}
.class-jump a{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.6rem .9rem;border:2px solid #123024;border-radius:4px;background:#fffdf7;text-decoration:none;color:#123024;font-weight:700;box-shadow:3px 3px 0 #123024}
.class-jump img{height:64px;width:auto}
.class-list{display:grid;gap:2rem;padding-bottom:4rem}
.classmate{display:grid;grid-template-columns:180px 1fr;gap:1.5rem 2rem;padding:2rem;border:2px solid #123024;border-radius:4px;background:#fffdf7;box-shadow:6px 6px 0 var(--cm,#1f4d3a);scroll-margin-top:90px}
.classmate--degen{--cm:#1f4d3a}.classmate--ethan{--cm:#b9e4c9}.classmate--tommy{--cm:#e8b94a}.classmate--bev{--cm:#ffab96}.classmate--rich{--cm:#c9c6f2}
.classmate__pic img{width:100%;height:auto;max-height:260px;object-fit:contain}
.classmate__copy .h2{margin:.2rem 0}
.classmate__tag{font-family:'Permanent Marker',cursive;font-size:1.25rem;margin:.25rem 0 .75rem}
.classmate__links{display:flex;flex-wrap:wrap;gap:.5rem}
.classmate__posts{padding-left:1.1rem}.classmate__posts span{opacity:.65;font-size:.9em}
.classmate__art{grid-column:1/-1;display:flex;gap:1.5rem;justify-content:center;align-items:flex-end;border-top:2px dashed rgba(18,48,36,.25);padding-top:1rem}
.classmate__art img{height:140px;width:auto;max-width:30%;object-fit:contain}
@media (max-width:640px){.classmate{grid-template-columns:1fr;padding:1.25rem}.classmate__pic img{max-height:200px}.classmate__art img{height:96px}}
.post__body .post__art img{display:block;margin:0 auto}

/* blog index v2 (2026-10-05): featured post, filter chips, Meet the class */
.blog-hero--tight{padding:clamp(2.5rem,6vw,4rem) 0 clamp(1.25rem,3vw,2rem)}
.blog-hero--tight .section__lede{max-width:56ch}
.blog .h3,.blog-feed .h3,.blog-meet .h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);color:var(--forest);margin:0}
.blog-feature{margin-bottom:clamp(2rem,4vw,3rem)}
.feature-card{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.5rem;padding:clamp(1.5rem,3vw,2.5rem);background:var(--paper-card);border:1.5px solid rgba(18,48,36,.2);border-left-width:8px;border-radius:4px;box-shadow:4px 7px 0 rgba(18,48,36,.14);text-decoration:none;color:var(--deep);transition:transform .18s ease,box-shadow .18s ease}
.feature-card:hover{transform:translateY(-3px);box-shadow:5px 10px 0 rgba(18,48,36,.16)}
.feature-card.post-card--mint{border-left-color:var(--win)}.feature-card.post-card--gold{border-left-color:var(--gold)}.feature-card.post-card--coral{border-left-color:var(--loss)}.feature-card.post-card--lavender{border-left-color:#8f8ae0}.feature-card.post-card--deep{border-left-color:var(--deep)}
.feature-card__copy{display:flex;flex-direction:column;gap:.7rem;max-width:62ch}
.feature-card__new{margin:0;font-family:var(--marker);font-size:1.2rem;color:var(--loss);transform:rotate(-2deg);align-self:flex-start}
.feature-card h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem);line-height:1.02;color:var(--forest);margin:0}
.feature-card p{margin:0;font-size:var(--text-base);color:#2c4a3c;line-height:1.55}
.feature-card .post-card__by{border-top:1px dashed rgba(18,48,36,.2);padding-top:.75rem;font-size:var(--text-xs);font-weight:700;color:#557063}
.feature-card__art{width:auto;max-width:240px;max-height:200px;height:auto;object-fit:contain}
.blog-feed__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;margin-bottom:1.75rem}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.chips button{display:inline-flex;align-items:center;gap:.4rem;font:700 var(--text-xs)/1 var(--body);padding:.5rem .85rem;border-radius:999px;border:1.5px solid rgba(18,48,36,.3);background:var(--paper-card);color:var(--deep);cursor:pointer}
.chips button:hover{border-color:var(--deep)}
.chips button[aria-pressed="true"]{background:var(--deep);color:var(--cream);border-color:var(--deep)}
.chips button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.chip-who img{width:auto;height:22px;margin:-4px 0}
.chips__sep{width:1px;height:1.4rem;background:rgba(18,48,36,.25);margin:0 .25rem}
.blog-list [hidden]{display:none!important}
.blog-meet{padding:clamp(1rem,3vw,2rem) 0 clamp(3rem,6vw,4.5rem)}
.blog-meet__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;padding-top:1.5rem;border-top:2px dashed rgba(18,48,36,.2)}
.blog-meet__head a{font-weight:700;font-size:var(--text-sm);color:var(--loss);text-decoration:none}
.blog-meet__head a:hover{text-decoration:underline}
.meet{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.meet a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;height:100%;padding:1rem .75rem;background:var(--paper-card);border:1.5px solid rgba(18,48,36,.18);border-radius:4px;text-decoration:none;color:var(--deep);transition:transform .18s ease}
.meet a:hover{transform:translateY(-3px)}
.meet img{width:auto;height:84px;object-fit:contain}
.meet strong{font-family:var(--marker);font-weight:400;font-size:1.15rem}
.meet span{font-size:var(--text-xs);color:#557063;line-height:1.35}
@media (max-width:900px){.meet{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.feature-card{grid-template-columns:1fr}.feature-card__art{display:none}.meet{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-feed__head{flex-direction:column;align-items:flex-start}.chips__sep{display:none}}

/* post page v2 (operator 2026-10-05 9:22 PM PT): notebook lines crossed the text while scrolling.
   Posts now sit on a clean sheet of old tractor-feed computer paper. No lines behind the words. */
.post{position:relative;max-width:860px;margin:clamp(1.25rem,4vw,3rem) auto clamp(2rem,5vw,4rem);
  padding:clamp(2rem,5vw,3.75rem) clamp(3.25rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem);
  background:#fffefa;box-shadow:0 1px 0 rgba(18,48,36,.08),0 14px 34px rgba(18,48,36,.16);border-radius:2px}
.post::before,.post::after{content:"";position:absolute;top:0;bottom:0;width:clamp(1.6rem,3.5vw,2.4rem);pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#efe7d3 0 5px,rgba(18,48,36,.18) 5px 6px,transparent 6.5px) center top/100% 28px repeat-y}
.post::before{left:0;border-right:2px dashed rgba(18,48,36,.12)}
.post::after{right:0;border-left:2px dashed rgba(18,48,36,.12)}
@media (max-width:640px){
  .post{width:auto;max-width:none;margin:.75rem .6rem 2rem;padding:1.75rem 1.4rem 2.25rem 2.1rem}
  .post::before{width:1.1rem;background-size:100% 22px}
  .post::after{width:.6rem;background:none}
}