:root{
  --cream:#F7F0DE;--cream-deep:#EFE5C9;--sage:#B5CBB2;--sage-ink:#3F5F50;--green:#2E5A4B;--green-deep:#244A3D;
  --sun:#F2B266;--sun-deep:#E99A3F;--sun-text:#A3561A;--ink:#22423A;--ink-soft:#4A665A;--on-green:#F7F0DE;
  --gutter:clamp(20px,5vw,48px);
  --font-display:"Rubik Doodle Shadow","Assistant",sans-serif;
  --font-hand:"Gveret Levin","Assistant",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:var(--sage-ink) var(--cream-deep);-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font-family:"Assistant",system-ui,sans-serif;font-size:1.125rem;line-height:1.8;-webkit-font-smoothing:antialiased}
::selection{background:var(--sun);color:var(--green-deep)}
:focus-visible{outline:3px solid var(--sun-deep);outline-offset:4px;border-radius:6px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{width:min(760px,100%);margin-inline:auto;padding-inline:var(--gutter)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;width:min(1120px,100%)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:52px;width:auto}
.wordmark{font-family:"Bellefair",serif;font-size:1.6rem;letter-spacing:.32em;color:var(--green);direction:ltr;padding-left:.32em;line-height:1;transform:translateY(7px)}
.nav{display:flex;gap:20px;list-style:none}
.link{font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;text-decoration-color:var(--sun)}
.link:hover{text-decoration-color:currentColor}
h1,h2{font-family:var(--font-display);font-weight:400;line-height:1.2;color:var(--green);text-wrap:balance}
p{text-wrap:pretty}
.hand{font-family:var(--font-hand);color:var(--sun-text);font-size:clamp(1.6rem,5vw,2.1rem);line-height:1.3}
.num{font-family:"Assistant",sans-serif;font-weight:600;font-size:.85em}
.arch{border-radius:999px 999px 0 0;overflow:hidden;background:var(--sage)}
.arch img{width:100%;height:100%;object-fit:cover}
.btn{
  display:inline-flex;align-items:center;gap:.6em;min-height:56px;padding:0 28px;border-radius:999px;
  background:var(--green);color:var(--on-green);font:700 1.0625rem/1 "Assistant",sans-serif;text-decoration:none;
  box-shadow:0 6px 18px -8px rgba(36,74,61,.55);transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .25s;
}
.btn:hover{background:var(--green-deep);transform:translateY(-2px)}
.btn svg{width:22px;height:22px;flex:none}
main{padding-block:32px 96px}
footer{text-align:center;padding:24px var(--gutter) 48px;color:var(--ink-soft);font-size:.95rem;border-top:1px solid var(--cream-deep)}
footer p+p{margin-top:8px}

/* Blog list */
.blog-head h1{font-size:clamp(2.4rem,8vw,3.6rem);margin-bottom:8px}
.blog-head p{color:var(--ink-soft);margin-bottom:40px}
.post-card{display:grid;gap:20px;text-decoration:none}
.post-card .arch{aspect-ratio:4/5;width:min(100%,300px)}
.post-card h2{font-size:clamp(1.7rem,5.5vw,2.3rem);margin-block:4px 10px}
.post-card .btn{margin-top:20px}
.meta{font-size:.95rem;color:var(--ink-soft)}
@media (min-width:760px){.post-card{grid-template-columns:1fr 300px;align-items:center;gap:56px}.post-card .arch{order:2}.post-card > div{padding-top:24px}}

/* Post */
.post-cover{width:min(100%,440px);margin:0 auto 32px}
.post-cover .arch{aspect-ratio:4/5}
.post h1{font-size:clamp(2.2rem,7.5vw,3.4rem);margin-bottom:12px}
.post .lead{font-size:1.2rem;color:var(--ink-soft);margin-block:20px 8px}
.post p{max-width:65ch;margin-bottom:16px}
.stop{margin-top:64px;display:grid;gap:16px}
.stop .arch{aspect-ratio:4/5;width:min(100%,440px);justify-self:center}
.stop h2{font-size:clamp(1.8rem,6vw,2.4rem)}
.place{font-size:.95rem;font-weight:700;color:var(--sage-ink)}
.rest{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--sage);color:var(--green-deep);font-weight:600;font-size:.95rem;justify-self:start}
.outro{margin-top:72px;padding:40px 28px;border-radius:999px 999px 28px 28px;background:var(--green);color:var(--on-green);text-align:center}
.outro h2{color:var(--on-green);font-size:clamp(2rem,6.5vw,2.8rem);margin-bottom:12px}
.outro p{color:#CFE0CC;margin:0 auto 24px;max-width:36ch}
.outro .btn{background:var(--sun);color:var(--green-deep)}
.outro .btn:hover{background:#F7C78D}
.back{display:inline-block;margin-top:40px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
.list{padding-inline-start:1.2em;display:grid;gap:8px;max-width:65ch}
.list li::marker{color:var(--sun-text)}

.outro-small{margin:20px auto 0 !important;font-size:1rem}
.outro-small a{color:#F7F0DE;font-weight:700;text-underline-offset:6px;text-decoration-color:var(--sun)}

/* Post: image left, text right on wide screens; 4:5 frames like the Instagram post */
.post-head{display:grid;gap:8px}
@media (min-width:860px){
  .wrap.post{width:min(1000px,100%)}
  .post-head{grid-template-columns:1fr 340px;column-gap:72px;align-items:center}
  .post-head .post-cover{order:2;width:100%;max-width:340px;margin:0;justify-self:start}
  .post-intro{padding-top:28px}
  .stop--media{grid-template-columns:1fr 300px;column-gap:72px;align-items:center;margin-top:80px}
  .stop--media .arch{order:2;width:100%;max-width:300px;justify-self:start}
  .stop--media .stop-text{display:grid;gap:16px;padding-top:24px}
  .stop:not(.stop--media),.outro,.post .back{max-width:760px;margin-inline:auto}
  .post .back{display:block;width:max-content}
}
.stop-text{display:grid;gap:16px}

/* Recommendations */
.disclosure{font-size:.95rem;color:var(--ink-soft);background:var(--cream-deep);border-radius:16px;padding:14px 18px;margin-top:-16px;margin-bottom:40px}
.recs{list-style:none;display:grid;gap:28px}
.rec{display:grid;gap:18px;align-items:center}
.rec-img{aspect-ratio:1;border-radius:999px 999px 20px 20px;background:var(--sage);display:grid;place-items:center;color:var(--green-deep);font-weight:600;overflow:hidden}
.rec-img img{width:100%;height:100%;object-fit:cover}
.rec-cat{font-size:.9rem;font-weight:700;color:var(--sage-ink)}
.rec h2{font-size:clamp(1.6rem,5vw,2rem);margin-block:4px 8px}
.rec p{max-width:52ch}
.rec-btn{margin-top:14px}
@media (min-width:760px){
  .rec{grid-template-columns:1fr 220px;column-gap:48px}
  .rec-img{order:2}
}