/* ============================================================
   PomoLife — shared styling for the written pages.
   The app itself is one self-contained file; these pages share
   this stylesheet so they stay consistent as you add more.
   ============================================================ */
:root{
  --ink:#2b2620; --ink-soft:#6d5c48; --ink-faint:#8a7757;
  --paper:#f7eeda; --paper-2:#efe3ca; --line:#d9c7a4;
  --green:#4d6b3c; --green-deep:#35502f; --green-lit:#7d9a58;
  --gold:#c99a34; --red:#d24b3f;
  --cream:#f4eee1;
  --shell:#16241a;
  --measure:68ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#e7e2d3; color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:#4a6b3c; text-underline-offset:3px}
a:hover{color:#35502f}

/* ---------------- header ---------------- */
.top{
  background:
    radial-gradient(120% 140% at 12% -20%, #2c4429 0%, transparent 60%),
    linear-gradient(180deg,#1b2c1e,#16241a);
  color:var(--cream); padding:22px 0 0;
}
.wrap{width:min(var(--measure) + 8rem, calc(100% - 40px)); margin:0 auto}
.brandrow{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.mark{
  display:flex; align-items:flex-end; gap:0; text-decoration:none;
  font-family:Fraunces,Georgia,serif; font-weight:500; font-size:1.7rem;
  color:var(--cream); line-height:1; letter-spacing:.005em;
}
.mark:hover{color:#fff}
.mark svg{width:.78em; height:1.34em; margin:0 -.06em -.05em -.05em; overflow:visible}
.mark .slogan{display:block}
.tagline{font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(244,238,225,.6); margin:5px 0 0 3px}
nav{display:flex; gap:4px; flex-wrap:wrap; padding:14px 0 0}
nav a{
  padding:8px 14px; border-radius:9px; text-decoration:none;
  font-size:.85rem; font-weight:500; color:rgba(244,238,225,.72);
}
nav a:hover{background:rgba(255,255,255,.1); color:#fff}
nav a[aria-current="page"]{background:rgba(255,255,255,.14); color:#fff}
.launch{
  background:var(--red); color:#fff8f2; font-weight:600;
  box-shadow:0 3px 0 #93301f;
}
.launch:hover{background:#e2594c; color:#fff}
.top .rule{height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); margin-top:14px}

/* ---------------- page body ---------------- */
main{padding:40px 0 10px}
.card{
  width:min(var(--measure) + 6rem, calc(100% - 40px)); margin:0 auto 28px;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  border:1px solid var(--line); border-radius:18px;
  box-shadow:0 14px 40px rgba(40,32,18,.1);
  padding:38px clamp(22px,5vw,46px) 34px;
}
h1{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:clamp(1.8rem,4.6vw,2.5rem);
  line-height:1.15; letter-spacing:-.015em; margin:0 0 6px}
h2{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:1.35rem;
  margin:34px 0 10px; letter-spacing:-.01em}
h3{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:1.08rem; margin:24px 0 6px}
.lede{font-size:1.08rem; color:var(--ink-soft); margin:0 0 6px}
.meta{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 22px}
p, li{max-width:var(--measure)}
ul, ol{padding-left:1.3em}
li{margin:.35em 0}
hr{border:0; height:1px; background:var(--line); margin:30px 0}
blockquote{
  margin:22px 0; padding:14px 18px; border-left:3px solid var(--gold);
  background:rgba(255,255,255,.5); border-radius:6px 12px 12px 6px;
  color:var(--ink-soft); font-size:.95rem;
}
.note{
  margin:24px 0; padding:14px 18px; border:1px dashed rgba(160,132,90,.55);
  border-radius:12px; background:rgba(255,255,255,.42);
  font-size:.9rem; color:var(--ink-soft);
}
.fill{background:#fdf3c9; padding:1px 6px; border-radius:4px; font-weight:600; color:#7a5a10}
.btn{
  display:inline-block; text-decoration:none; font-weight:600; font-size:.92rem;
  padding:11px 22px; border-radius:11px; background:var(--green); color:#f4f7ee;
  box-shadow:0 4px 0 #2c4326; transition:transform .07s ease, box-shadow .07s ease;
}
.btn:hover{background:#5a7b46; color:#fff; transform:translateY(-1px); box-shadow:0 5px 0 #2c4326}
.btn:active{transform:translateY(4px); box-shadow:0 0 0 #2c4326}

.btn.plain{background:#e6d9bb; color:var(--ink); box-shadow:0 4px 0 #c8b389}
.btn.plain:hover{background:#efe3c8; color:var(--ink)}

/* ---------------- article list ---------------- */
.posts{list-style:none; padding:0; margin:26px 0 0}
.posts li{margin:0 0 14px; max-width:none}
.posts a{
  display:block; text-decoration:none; color:inherit;
  padding:18px 20px; border:1px solid var(--line); border-radius:14px;
  background:rgba(255,255,255,.5); transition:transform .12s ease, box-shadow .12s ease;
}
.posts a:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(40,32,18,.12); background:#fffaf0}
.posts h3{margin:0 0 4px}
.posts p{margin:0; font-size:.92rem; color:var(--ink-soft)}
.posts .kicker{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px}

/* ---------------- footer ---------------- */
footer{
  background:#16241a; color:rgba(244,238,225,.6); padding:30px 0 40px; margin-top:20px;
  font-size:.86rem;
}
footer .links{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px}
footer a{color:rgba(244,238,225,.8); text-decoration:none}
footer a:hover{color:#fff; text-decoration:underline}
footer .small{font-size:.78rem; color:rgba(244,238,225,.42); max-width:var(--measure)}

/* where an advert unit goes once AdSense is approved */
.adslot{
  margin:30px auto; width:min(728px, calc(100% - 40px)); min-height:90px;
  display:grid; place-items:center; border:1px dashed rgba(120,100,70,.35);
  border-radius:12px; color:var(--ink-faint); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase;
}

@media (max-width:640px){
  body{font-size:16px}
  .card{padding:28px 20px 26px; border-radius:14px}
  nav{gap:2px}
  nav a{padding:7px 10px; font-size:.8rem}
}

/* ---------------- contact ---------------- */
.email{
  font-family:Fraunces,Georgia,serif; font-size:clamp(1.2rem,3.6vw,1.7rem); font-weight:600;
  color:var(--green-deep); background:rgba(255,255,255,.6);
  border:1px solid var(--line); border-radius:12px;
  padding:16px 20px; margin:22px 0 26px; display:inline-block;
  word-break:break-all; user-select:all;
}

/* ---------------- previous / next article ---------------- */
.artnav{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:36px; padding-top:24px; border-top:1px solid var(--line);
}
.artnav a{
  flex:1 1 240px; max-width:340px; text-decoration:none; color:inherit;
  padding:14px 18px; border:1px solid var(--line); border-radius:13px;
  background:rgba(255,255,255,.5);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.artnav a:hover{background:#fffaf0; transform:translateY(-2px); box-shadow:0 8px 20px rgba(40,32,18,.12)}
.artnav a.next{text-align:right; margin-left:auto}
.artnav span{
  display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:4px;
}
.artnav b{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:1rem; line-height:1.3; display:block}

/* ---------------- advert slots ---------------- */
.adslot{
  margin:26px auto; width:min(728px, calc(100% - 40px)); min-height:96px;
  display:grid; place-items:center;
  border:1px dashed rgba(120,100,70,.3); border-radius:12px;
  background:rgba(255,255,255,.28);
}
.adslot span{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
}
.adslot span{color:#a5967c}