@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --paper:      #efead8;
  --paper-2:    #e4dcc5;
  --paper-edge: #d9cfae;
  --ink:        #2e2a22;
  --ink-soft:   #5b5443;
  --moss:       #5b6b4f;
  --moss-soft:       #7c8f6c;   /* still going */
  --mustard:    #b8873a;   /* just planted / currently trying */
  --plum:       #6b4a5e;   /* gave it a fair shot */
  --clay:       #a65d4e;   /* nope, not for me */
  --line:       #cdc2a0;
  --radius: 3px;
  --check-size: 38px;
}

*{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation: none !important; transition: none !important; }
}

body{
  margin: 0;
  background-color: var(--paper);
  background-image:
    /* film grain, sits on top */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E"),
    /* checkerboard, classic 4-gradient trick */
    linear-gradient(45deg, var(--paper-edge) 26%, transparent 26%),
    linear-gradient(-45deg, var(--paper-edge) 26%, transparent 26%),
    linear-gradient(45deg, transparent 74%, var(--paper-edge) 74%),
    linear-gradient(-45deg, transparent 74%, var(--paper-edge) 74%);
  background-size:
    auto,
    var(--check-size) var(--check-size),
    var(--check-size) var(--check-size),
    var(--check-size) var(--check-size),
    var(--check-size) var(--check-size);
  background-position:
    0 0,
    0 0, 0 calc(var(--check-size) / 2),
    calc(var(--check-size) / 2) calc(var(--check-size) / -2), calc(var(--check-size) / -2) 0;
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Work Sans', sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

a{ color: var(--moss); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover{ color: var(--clay); }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--moss);
  outline-offset: 3px;
}

.wrap{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ---------- site header ---------- */

.site-header{
  position: relative;
  padding: 48px 0 22px;
}

.site-header::before{
  content: "";
  position: absolute;
  top: -16px;
  left: -22px;
  right: -22px;
  bottom: -14px;
  z-index: -1;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--moss);
}

.wordmark{
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 2.9rem);
  margin: 0;
  letter-spacing: -0.01em;
}

.wordmark a{ color: var(--ink); text-decoration: none; }
.wordmark .dot{ color: var(--moss); }

.tagline{
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  max-width: 46ch;
}

.site-nav{
  margin-top: 16px;
  font-family: 'Space Mono', monospace;
  font-size: 0.82rem;
  text-transform: lowercase;
}

.site-nav a{ margin-right: 18px; color: var(--ink-soft); }
.site-nav a:hover{ color: var(--clay); }
.site-nav a.current{ color: var(--ink); border-bottom: 1px solid var(--moss); }

/* ---------- sprig divider (signature squiggle) ---------- */

.sprig{
  height: 22px;
  margin: 30px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='22' viewBox='0 0 140 22'%3E%3Cpath d='M0 11 Q 10 2, 20 11 T 40 11 T 60 11 T 80 11 T 100 11 T 120 11 T 140 11' fill='none' stroke='%235b6b4f' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='6' r='1.6' fill='%23c79a3c'/%3E%3Ccircle cx='70' cy='16' r='1.6' fill='%23a65d4e'/%3E%3Ccircle cx='110' cy='6' r='1.6' fill='%236b4a5e'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.9;
}

/* ---------- currently-trying pills ---------- */

.currently{
  margin: 26px 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.currently .label{
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-right: 4px;
}

.pill{
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  padding: 4px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- status marker ---------- */

.status{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Space Mono', monospace;
  font-size: 0.74rem;
  color: var(--paper);
  text-transform: lowercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.status.growing{ color: var(--paper); border-color: var(--moss-soft); background-color: var(--moss-soft); }
.status.seedling{ color: var(--paper); border-color: var(--mustard); background-color: var(--mustard); }
.status.fair-shot{ color: var(--paper); border-color: var(--plum); background-color: var(--plum); }
.status.not-for-me{ color: var(--paper); border-color: var(--clay); background-color: var(--clay); }

/* ---------- entry cards ---------- */

.entry{
  position: relative;
  padding: 22px 24px;
  margin: 18px 22px 24px 0;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.entry:hover{
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}

.entry.featured{
  padding: 28px 28px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 7px 7px 0 var(--moss);
}

.entry.featured:hover{
  box-shadow: 5px 5px 0 var(--moss);
}

.entry.featured::before{
  content: "focus";
  position: absolute;
  top: -10px;
  left: 22px;
  background: var(--moss);
  color: var(--paper);
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.entry h2, .entry h3{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  margin: 10px 0 6px;
  line-height: 1.25;
}

.entry h2 a, .entry h3 a{ color: var(--ink); text-decoration: none; }
.entry h2 a:hover, .entry h3 a:hover{ color: var(--clay); }

.entry .meta{
  font-family: 'Space Mono', monospace;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.entry p{ margin: 8px 0 0; color: var(--ink-soft); }

.entry-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
}
@media (max-width: 620px){
  .entry-grid{ grid-template-columns: 1fr; }
}
.entry-grid .entry{ margin: 8px 8px 16px 0; }

/* ---------- sprout rating (signature element) ---------- */

.sprouts{
  font-size: 0.9rem;
  letter-spacing: 1px;
}
.sprouts .on{ opacity: 1; }
.sprouts .off{ opacity: 0.22; }

/* ---------- log / index of attempts ---------- */

.log-section{ margin: 52px 0 40px; }

.log-section h2{
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--paper);
  padding: 12px 16px 10px;
  margin-bottom: 4px;
  border-radius: var(--radius);
  background: var(--moss);
}

.log-section .section-note{
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 4px 0 14px;
}

.log-list{
  border: 2px solid var(--paper-edge);
  border-radius: var(--radius);
  overflow: hidden;
}

.log-row{
  display: grid;
  grid-template-columns: 1.6fr auto auto;
  gap: 6px 16px;
  align-items: baseline;
  padding: 18px 18px 12px;
  border-radius: var(--radius);
}

.log-row:nth-of-type(odd){ background: var(--paper-2); }
.log-row:nth-of-type(even){ background: var(--paper); }

.log-row:last-child{ border-bottom: none; }

.log-row .name{
  font-weight: 600;
}
.log-row .name a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.log-row .name a:hover{ color: var(--clay); border-color: var(--clay); }

.log-row .started{
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: right;
}

.log-row .verdict{
  grid-column: 1 / -1;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

@media (max-width: 560px){
  .log-row{ grid-template-columns: 1fr auto; }
}

/* ---------- reading log page: bookshelf ---------- */
 
.shelf{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 22px;
  padding-bottom: 16px;
  border-bottom: 10px solid var(--ink);
  margin: 0 0 46px;
}
 
.book{
  width: 150px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.book:hover{
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}
 
.book-cover{
  aspect-ratio: 2 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--paper);
  border-bottom: 2px solid var(--ink);
  text-align: center;
  padding: 10px;
  overflow: hidden;
}
.book-cover.-photo{ padding: 0; }
.book-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-cover::after{
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.35);
}
.book-cover .icon{ font-size: 1.9rem; margin-bottom: 6px; }
.book-cover .genre-tag{
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}
 
.book.-moss .book-cover{ background: var(--moss); }
.book.-mustard .book-cover{ background: var(--mustard); }
.book.-plum .book-cover{ background: var(--plum); }
.book.-clay .book-cover{ background: var(--clay); }
 
.book-body{ padding: 10px 12px 12px; }
.book-title{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
  margin: 0 0 2px;
}
.book-author{
  font-family: 'Space Mono', monospace;
  font-size: 0.66rem;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
 
.book-sprouts{ font-size: 0.85rem; letter-spacing: 1px; margin-bottom: 6px; }
.book-sprouts .on{ opacity: 1; }
.book-sprouts .off{ opacity: 0.22; }
 
.book-body summary{
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  color: var(--moss);
  list-style: none;
}
.book-body summary::-webkit-details-marker{ display: none; }
.book-body summary:hover{ color: var(--clay); }
.book-body .thoughts{
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ---------- pressed flowers page: polaroids ---------- */
 
.polaroid-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 34px 28px;
  margin: 30px 0 20px;
  padding: 10px 4px 30px;
}
 
.polaroid{
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 12px 12px 20px;
  width: 210px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
 
.polaroid:nth-child(4n+1){ transform: rotate(-2.5deg); }
.polaroid:nth-child(4n+2){ transform: rotate(1.5deg); }
.polaroid:nth-child(4n+3){ transform: rotate(-1deg); }
.polaroid:nth-child(4n){ transform: rotate(2.5deg); }
 
.polaroid:nth-child(4n+1):hover{ transform: rotate(-2.5deg) translateY(-5px); box-shadow: 3px 3px 0 var(--ink); }
.polaroid:nth-child(4n+2):hover{ transform: rotate(1.5deg) translateY(-5px); box-shadow: 3px 3px 0 var(--ink); }
.polaroid:nth-child(4n+3):hover{ transform: rotate(-1deg) translateY(-5px); box-shadow: 3px 3px 0 var(--ink); }
.polaroid:nth-child(4n):hover{ transform: rotate(2.5deg) translateY(-5px); box-shadow: 3px 3px 0 var(--ink); }
 
.photo-placeholder{
  aspect-ratio: 1 / 1;
  border: 1.5px dashed var(--line);
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  color: var(--ink-soft);
  overflow: hidden;
  margin-bottom: 10px;
}
.photo-placeholder img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
 
.polaroid-caption{
  font-family: 'Kalam', cursive;
  font-size: 1.05rem;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
  margin: 0;
}
 
.polaroid-date{
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 6px;
}

/* ---------- field notes page: notebook ---------- */
 
.notebook{
  position: relative;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 33px, var(--line) 34px),
    var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 30px 30px 30px 70px;
  margin: 0 22px 40px 0;
}
 
.notebook::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  width: 8px;
  background-image: radial-gradient(circle, var(--ink) 3px, transparent 3.5px);
  background-repeat: repeat-y;
  background-size: 8px 34px;
  background-position: 0 30px;
  opacity: 0.5;
}
 
.notebook::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 48px;
  width: 2px;
  background: var(--clay);
  opacity: 0.45;
}
 
.note-entry{
  font-family: 'Kalam', cursive;
  font-size: 1.15rem;
  line-height: 34px;
  color: var(--ink);
  margin: 0;
}
 
.note-entry .note-date{
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: var(--clay);
  margin-right: 8px;
  vertical-align: middle;
}

/* ---------- greenhouse page: seed packets ---------- */
 
.seed-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 26px 0;
}
@media (max-width: 620px){
  .seed-grid{ grid-template-columns: 1fr; }
}
 
.seed-packet{
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.seed-packet:hover{
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}
 
.seed-band{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: var(--paper);
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.02rem;
  border-bottom: 2px solid var(--ink);
}
.seed-packet.-moss .seed-band{ background: var(--moss); }
.seed-packet.-mustard .seed-band{ background: var(--mustard); }
.seed-packet.-plum .seed-band{ background: var(--plum); }
.seed-packet.-clay .seed-band{ background: var(--clay); }
 
.seed-body{ padding: 14px 16px 16px; }
.seed-body p{ margin: 0 0 10px; color: var(--ink-soft); font-size: 0.94rem; }
 
.seed-meta{
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

/* ---------- media log page ---------- */
 
.media-layout{
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 26px;
  align-items: start;
}
@media (max-width: 780px){
  .media-layout{ grid-template-columns: 1fr; }
}
 
.jump-nav{
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 22px;
}
.jump-nav a{ margin-right: 10px; color: var(--ink-soft); }
.jump-nav a:hover{ color: var(--clay); }
 
.month-banner{
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--paper);
  background: var(--moss);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 10px;
  margin: 34px 0 14px;
  box-shadow: 4px 4px 0 var(--ink);
}
 
.media-list{
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink);
  margin-bottom: 12px;
}
 
.media-item{
  padding: 16px 18px;
  border-bottom: 1px dashed var(--line);
}
.media-item:nth-of-type(odd){ background: var(--paper-2); }
.media-item:nth-of-type(even){ background: var(--paper); }
.media-item:last-child{ border-bottom: none; }
 
.media-row{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
 
.media-thumb{
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.media-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
 
.media-content{ flex: 1; min-width: 0; }
 
.media-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
 
.media-title-row{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.media-title{ font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; }
.media-repeat{ font-size: 0.85rem; opacity: 0.7; }
 
.media-meta{
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-top: 3px;
}
.media-meta .tag{ color: var(--mustard); }
 
.media-side{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}
.media-stars{ font-size: 0.92rem; letter-spacing: 1px; }
.media-stars .on{ opacity: 1; }
.media-stars .off{ opacity: 0.25; }
.media-date{ font-family: 'Space Mono', monospace; font-size: 0.74rem; color: var(--ink-soft); }
 
.media-item summary{
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
  color: var(--moss);
  margin-top: 8px;
  list-style: none;
}
.media-item summary::-webkit-details-marker{ display: none; }
.media-item summary:hover{ color: var(--clay); }
.media-item .thoughts{
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
 
.side-card{
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 14px 16px;
  margin-bottom: 22px;
}
.side-card h3{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 10px;
}
.side-entry{
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
  color: var(--ink-soft);
  padding: 8px 0;
  border-top: 1px dashed var(--line);
}
.side-entry:first-of-type{ border-top: none; padding-top: 0; }
.side-entry strong{
  color: var(--ink);
  font-family: 'Work Sans', sans-serif;
  font-size: 0.86rem;
  display: block;
}
 
.stats-list{
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats-list span{ color: var(--ink); font-weight: 600; }

/* ---------- gardener page: id card layout ---------- */

.gardener-layout{
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 26px;
  align-items: start;
}

.gardener-layout article.post{ margin: 0; }

@media (max-width: 620px){
  .gardener-layout{ grid-template-columns: 1fr; }
}

.id-card{
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 14px;
}

.id-label{
  margin: 0 0 8px;
  font-family: 'Space Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

.id-photo{
  aspect-ratio: 1 / 1;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.id-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.id-photo span{
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.id-name{
  margin: 0 0 10px;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-align: center;
}

.id-facts{
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

/* ---------- article ---------- */

article.post{
  padding: 32px 28px 40px;
  margin: 0 22px 40px 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--moss);
}

.post-header{ margin-bottom: 26px; }

.post-header h1{
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1.2;
  margin: 12px 0 8px;
}

.post-meta{
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.post-body p{ margin: 0 0 1.1em; }
.post-body h2{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.3rem;
  margin: 1.6em 0 0.5em;
}
.post-body blockquote{
  margin: 1.4em 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--moss);
  color: var(--ink-soft);
  font-style: italic;
}

.post-footer{
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
}

/* ---------- footer ---------- */

.site-footer{
  position: relative;
  margin: 60px 22px 60px 0;
  padding: 20px 22px;
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--moss);
  border-radius: var(--radius);
}