/* ==========================================================================
   Unlimited Earning — design system
   Blend of three directions: ledger (structure), marketplace (cards),
   field notes (warmth). One signature motif: the rotated stamp badge.
   ========================================================================== */

:root{
  --paper:#F4F0E5;
  --paper-deep:#ECE6D3;
  --card:#FBF9F2;
  --ink:#221E17;
  --ink-soft:#635B4C;
  --ink-faint:#9C927C;

  --forest:#2C5A4C;
  --forest-deep:#1C3B31;
  --forest-bg:#E3E9DE;

  --wine:#7C3A57;
  --wine-deep:#54233A;
  --wine-bg:#F1E3E9;

  --gold:#B87A1B;
  --gold-deep:#8A5C11;
  --gold-bg:#FAEBD1;

  --rust:#A8432B;
  --rust-bg:#F4E1DA;

  --line:#DDD5BF;
  --line-strong:#C9BFA2;
  --ink-panel:#1B2620;
  --ink-panel-2:#252E27;

  --radius-sm:6px;
  --radius:14px;
  --radius-lg:20px;

  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-serif:'Source Serif 4', serif;
  --font-mono:'IBM Plex Mono', monospace;

  --max:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
@media (max-width:640px){ .wrap{padding:0 18px;} }

/* -------------------------------------------------------------- stamp -- */
.stamp{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border:1px solid currentColor; border-radius:3px; transform:rotate(-1.6deg);
}
.stamp.blue{color:var(--forest-deep); background:var(--forest-bg);}
.stamp.purple{color:var(--wine); background:var(--wine-bg);}
.stamp.green{color:var(--gold-deep); background:var(--gold-bg);}
.stamp.onpanel{color:#EFE9D8; border-color:#4a564d; background:rgba(255,255,255,.06);}

/* --------------------------------------------------------------- nav --- */
.nav{border-bottom:1px solid var(--line); position:relative; z-index:40; background:var(--paper);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.logo{display:flex; align-items:center; gap:10px;}
.brand-icon{width:30px; height:30px; flex:none; border-radius:7px;}
.logo-mark{font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-0.01em;}
.logo-tag{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.13em; color:var(--ink-faint); text-transform:uppercase;}
.nav-right{display:flex; align-items:center; gap:22px;}
.nav-links{display:flex; gap:22px; font-size:14px; color:var(--ink-soft);}
.nav-links a.on{color:var(--forest-deep); font-weight:600;}
.nav-links a:hover{color:var(--forest-deep);}
.nav-count{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); border:1px solid var(--line); padding:5px 10px; border-radius:20px; white-space:nowrap;}
.footer-brand{display:flex; align-items:center; gap:9px;}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:8px; width:38px; height:38px; font-size:16px; color:var(--ink);}

@media (max-width:820px){
  .nav-links{position:absolute; top:100%; left:0; right:0; background:var(--paper); flex-direction:column; gap:0;
    border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .2s ease;}
  .nav-links.open{max-height:400px;}
  .nav-links a{padding:14px 24px; border-top:1px solid var(--line); width:100%;}
  .nav-toggle{display:block;}
  .nav-count{display:none;}
}

/* ---------------------------------------------------------- hero panel */
.hero-panel{background:var(--ink-panel); background-image:radial-gradient(ellipse at top right, #223229 0%, var(--ink-panel) 60%);}
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:52px 0;}
.hero-inner h1{font-family:var(--font-display); font-weight:600; font-size:36px; line-height:1.16; color:#F7F3E6; margin:18px 0 16px;}
.hero-inner p{color:#B9B2A0; font-size:16px; line-height:1.6; margin:0 0 22px; max-width:46ch;}
.hero-byline{display:flex; align-items:center; gap:12px;}
.avatar{width:28px; height:28px; border-radius:50%; background:var(--gold); color:#241A08; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-size:11px; font-weight:700; flex:none;}
.hero-byline-text{font-family:var(--font-mono); font-size:11px; color:#8E8878;}
.hero-byline-text b{color:#EFE9D8; font-weight:500;}
.hero-photo .frame{background:var(--ink-panel-2); border:1px solid #3A4740; padding:8px; border-radius:8px; transform:rotate(1.2deg);}
.hero-photo img{width:100%; aspect-ratio:1/.72; object-fit:cover; border-radius:3px;}

@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr; padding:34px 0;}
  .hero-photo{order:-1;}
  .hero-inner h1{font-size:28px;}
}

/* ------------------------------------------------------------- stats -- */
.stats{display:flex; flex-wrap:wrap; align-items:center; gap:0; padding:18px 0;
  border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft);}
.stats b{color:var(--forest-deep); font-weight:500;}
.stats .sep{margin:0 14px; color:var(--ink-faint);}
@media (max-width:640px){ .stats .sep{display:none;} .stats span{width:100%; margin-bottom:4px;} }

/* --------------------------------------------------------- start here */
.starthere{margin:30px 0 4px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; display:grid; grid-template-columns:190px 1fr; gap:24px; align-items:center;}
.starthere-label{font-family:var(--font-display); font-style:italic; font-weight:600; font-size:19px; color:var(--forest-deep);}
.starthere-label span{display:block; font-family:var(--font-mono); font-style:normal; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px;}
.sh-list{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.sh-item{display:flex; gap:11px; align-items:flex-start;}
.sh-num{font-family:var(--font-mono); font-size:12px; color:var(--gold-deep); font-weight:500; flex:none; padding-top:2px;}
.sh-item h4{margin:0; font-size:13.5px; font-weight:500; line-height:1.4;}
.sh-item:hover h4{color:var(--forest-deep);}
@media (max-width:820px){
  .starthere{grid-template-columns:1fr;}
  .sh-list{grid-template-columns:1fr;}
}

/* ------------------------------------------------------- cat sections */
.cat-section{padding:40px 0 6px;}
.cat-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
.cat-head-left{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.cat-head h2{font-family:var(--font-display); font-weight:600; font-size:20px; margin:0;}
.cat-count{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint);}
.viewall{font-size:13px; font-weight:600; color:var(--forest-deep); display:flex; align-items:center; gap:4px;}
.viewall:hover{text-decoration:underline;}

.card-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:900px){ .card-row{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .card-row{grid-template-columns:1fr;} }

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:block; transition:border-color .15s, transform .15s;}
.card:hover{border-color:var(--line-strong); transform:translateY(-2px);}
.card-img{aspect-ratio:1/.64; overflow:hidden; position:relative; background:var(--paper-deep);}
.card-img img{width:100%; height:100%; object-fit:cover;}
.card-body{padding:15px 16px 16px;}
.card h3{font-family:var(--font-display); font-weight:500; font-size:15.5px; line-height:1.34; margin:0 0 10px;}
.card-foot{display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); padding-top:10px; border-top:1px solid var(--line);}

/* ------------------------------------------------------------ notebook */
.notebook{margin-top:50px; padding-top:4px; border-top:1px solid var(--ink);}
.row{display:grid; grid-template-columns:48px 1fr auto auto; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line);}
.row:hover{background:var(--card);}
.row-thumb{width:48px; height:48px; border-radius:4px; overflow:hidden; border:1px solid var(--line); flex:none;}
.row-thumb img{width:100%; height:100%; object-fit:cover;}
.row-main h3{font-family:var(--font-body); font-weight:500; font-size:14px; margin:0 0 4px; line-height:1.35;}
.row-main .rc{font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);}
.row-date{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); white-space:nowrap;}
.row-arrow{color:var(--forest); font-size:13px;}
@media (max-width:600px){
  .row{grid-template-columns:40px 1fr; row-gap:4px;}
  .row-date, .row-arrow{display:none;}
}

/* --------------------------------------------------------- pagination */
.pagination{display:flex; align-items:center; justify-content:center; gap:10px; padding:28px 0 8px;
  font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); flex-wrap:wrap;}
.pagination a, .pagination span.pg{width:30px; height:30px; border:1px solid var(--line); border-radius:6px;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);}
.pagination a:hover{border-color:var(--forest);}
.pagination .pg.on{background:var(--forest-deep); color:var(--paper); border-color:var(--forest-deep);}
.pagination .arch-link{border:none; width:auto; padding:0 4px; font-weight:600; color:var(--forest-deep);}
.pagination .arch-link:hover{text-decoration:underline;}

/* ------------------------------------------------------------- author */
.author{margin:46px 0 0; padding:22px 24px; background:var(--forest-bg); border-radius:var(--radius); display:flex; align-items:center; gap:16px;}
.author .av{width:46px; height:46px; border-radius:50%; background:var(--forest-deep); color:var(--paper); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:15px; font-weight:600; flex:none;}
.author h4{margin:0 0 4px; font-family:var(--font-display); font-size:15.5px; font-weight:600; color:var(--forest-deep);}
.author p{margin:0; font-size:13px; color:#3E5347; line-height:1.55; max-width:72ch;}
@media (max-width:640px){ .author{flex-direction:column; align-items:flex-start;} }

/* ------------------------------------------------------------- footer */
footer.site-footer{margin-top:54px; border-top:1px solid var(--line); padding:32px 0 46px;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:22px; font-size:13px; color:var(--ink-soft);}
.foot-links{display:flex; gap:20px; flex-wrap:wrap;}
.foot-links a:hover{color:var(--forest-deep);}
.foot-social{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap;}
.foot-social-title{font:10px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); padding-top:6px;}
.foot-social a{display:flex; flex-direction:column; gap:2px; padding:5px 8px; border:1px solid var(--line); border-radius:6px; color:var(--ink-soft);}
.foot-social a:hover{border-color:var(--forest); color:var(--forest-deep);}
.foot-social a span{font:10px var(--font-mono); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);}
.foot-social a b{font:12px var(--font-body); font-weight:600;}
.foot-copy{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); margin-top:20px; letter-spacing:.02em;}
.back-top{position:fixed; bottom:24px; right:24px; width:42px; height:42px; border-radius:50%; background:var(--forest-deep); color:var(--paper);
  border:none; font-size:15px; opacity:0; pointer-events:none; transition:opacity .2s; box-shadow:0 4px 14px rgba(0,0,0,.2); z-index:50;}
.back-top.show{opacity:1; pointer-events:auto;}

/* ---------------------------------------------------------- page head */
.page-head{padding:38px 0 26px; border-bottom:1px solid var(--line); margin-bottom:30px;}
.page-head h1{font-family:var(--font-display); font-weight:600; font-size:28px; margin:14px 0 8px;}
.page-head .sub{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint);}

/* ------------------------------------------------------------- search */
.search-form{display:flex; gap:10px; max-width:720px; margin:0 0 18px;}
.search-form input{flex:1; min-width:0; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); border-radius:8px; padding:13px 15px; font:15px var(--font-body);}
.search-form input:focus{outline:2px solid var(--forest); outline-offset:1px;}
.search-form button{border:0; border-radius:8px; padding:0 20px; background:var(--forest-deep); color:var(--paper); font:600 14px var(--font-body); cursor:pointer;}
.search-form button:hover{background:var(--forest);}
.search-status{font:12px var(--font-mono); color:var(--ink-faint); margin:10px 0 15px;}
.search-results{display:grid; gap:10px; max-width:820px;}
.search-result{display:block; padding:17px 19px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);}
.search-result:hover{border-color:var(--forest);}
.search-result h2{font:600 19px/1.3 var(--font-display); color:var(--forest-deep); margin:0 0 6px;}
.search-result p{font:14px/1.55 var(--font-body); color:var(--ink-soft); margin:0 0 7px;}
.search-result .meta{font:10px var(--font-mono); color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em;}
.search-empty{padding:24px 0; color:var(--ink-soft);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ------------------------------------------------------------ article */
.article-wrap{max-width:700px; margin:0 auto;}
.a-hero-img{border-radius:var(--radius); overflow:hidden; margin:22px 0 6px; border:1px solid var(--line); aspect-ratio:16/8.5;}
.a-hero-img img{width:100%; height:100%; object-fit:cover;}
.article-head{padding:34px 0 0;}
.article-head h1{font-family:var(--font-display); font-weight:600; font-size:32px; line-height:1.2; margin:16px 0 0;}
.a-byline{display:flex; align-items:center; gap:11px; padding:20px 0; margin:22px 0 6px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.a-byline .name{font-size:14px; font-weight:600;}
.a-byline .sub{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint);}

.article-body{font-family:var(--font-serif); font-size:18px; line-height:1.75; color:#33302A; margin-top:8px;}
.article-body p{margin:0 0 20px;}
.article-body h2{font-family:var(--font-display); font-weight:600; font-size:23px; color:var(--forest-deep); margin:38px 0 16px; line-height:1.32;}
.article-body ul, .article-body ol{margin:0 0 20px; padding-left:24px;}
.article-body li{margin-bottom:10px;}
.article-body a{color:var(--forest-deep); text-decoration:underline; text-decoration-color:var(--line-strong);}
.article-body strong{color:var(--ink); font-weight:600;}
.article-body table{width:100%; border-collapse:collapse; margin:0 0 24px; font-family:var(--font-sans); font-size:14px; line-height:1.55; background:#fff; border:1px solid var(--line);}
.article-body th,.article-body td{padding:12px; text-align:left; vertical-align:top; border:1px solid var(--line);}
.article-body th{background:#F4F7F2; color:var(--forest-deep); font-weight:700;}
@media(max-width:640px){.article-body table{font-size:13px;}.article-body th,.article-body td{padding:9px;}}
.article-sources{margin:34px 0 0; padding:18px 20px; border:1px solid var(--line); border-left:3px solid var(--forest-deep); background:var(--cream);}
.article-sources h3{margin:0 0 7px; font-family:var(--font-display); font-size:19px; color:var(--forest-deep);}
.article-sources p{margin:0 0 9px; color:var(--ink-soft); font-family:var(--font-body); font-size:13px;}
.article-sources ul{margin:0; padding-left:19px; font-family:var(--font-body); font-size:14px;}
.article-sources li{margin:5px 0;}
.article-sources a{color:var(--forest-deep); text-decoration:underline;}
.article-body blockquote{
  font-family:var(--font-display); font-style:italic; font-weight:500; font-size:21px; line-height:1.5;
  color:var(--wine-deep); border-left:2px solid var(--wine); padding:2px 0 2px 22px; margin:32px 0;
}

.related-title{font-family:var(--font-display); font-weight:600; font-size:17px; margin:50px 0 16px; padding-top:30px; border-top:1px solid var(--line);}

/* --------------------------------------------------------------- prose (static pages) */
.prose{max-width:760px; font-size:15.5px; line-height:1.7; color:#33302A;}
.prose h2{font-family:var(--font-display); font-weight:600; font-size:21px; color:var(--forest-deep); margin:34px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose p{margin:0 0 16px;}
.prose ul{margin:0 0 16px; padding-left:22px; list-style:disc;}
.prose li{margin-bottom:8px;}
.prose a{color:var(--forest-deep); text-decoration:underline;}
.prose .sub{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint);}
.prose table{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:14px;}
.prose th, .prose td{border:1px solid var(--line); padding:9px 12px; text-align:left;}
.prose th{background:var(--card); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em;}

/* contact form-ish elements if present in statics */
.prose .contact-block{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin:20px 0;}