@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#262220; --ink-soft:#5b5550; --paper:#ecede7; --sheet:#fbfbf8; --line:#d6d6cc;
  --gold:#a77a22;
  --terracotta:#a4523a; --navy:#2f3e5c; --sage:#5f7658; --blush:#b9756d; --plum:#6f4e63;
  --display:"Cormorant",Georgia,serif; --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1180px; --radius-sheet:3px; --radius-btn:999px;
}
*{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:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:6px;z-index:50}
.skip:focus{left:12px}

/* Header */
.site-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:24px;height:68px}
.wordmark{font-family:var(--display);font-weight:600;font-size:1.7rem;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.wordmark i{font-weight:500;color:var(--ink-soft)}
.site-nav{margin-left:auto;display:flex;gap:22px;align-items:center;font-size:.97rem}
.site-nav a{text-decoration:none;color:var(--ink-soft)}
.site-nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-btn);padding:12px 22px;font:600 .98rem/1 var(--body);text-decoration:none;border:1.5px solid var(--ink);cursor:pointer;background:transparent;color:var(--ink)}
.btn-solid{background:var(--ink);color:var(--sheet)}
.btn-solid:hover{background:#000}
.btn:not(.btn-solid):hover{background:var(--sheet)}
.site-nav .btn{padding:9px 16px}
@media (max-width:860px){.site-nav a:not(.btn){display:none}}

/* Hero */
.hero{padding:72px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
h1{font-family:var(--display);font-weight:600;font-size:clamp(2.7rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:-.015em;margin:0 0 22px;max-width:13ch}
.lede{font-size:1.18rem;color:var(--ink-soft);max-width:44ch;margin:0 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:22px;font-size:.93rem;color:var(--ink-soft)}
.board{position:relative;aspect-ratio:1/1;max-width:540px;justify-self:end;width:100%}
.pin{position:absolute;width:44%;background:var(--sheet);padding:8px 8px 10px;box-shadow:0 1px 0 rgba(38,34,32,.06),0 10px 24px -12px rgba(38,34,32,.45);border-radius:var(--radius-sheet);text-decoration:none;transition:transform .25s ease}
.pin img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:2px}
.pin::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:22px;transform:translateX(-50%) rotate(-3deg);background:rgba(233,214,160,.75);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pin:hover{transform:rotate(0) translateY(-4px)!important;z-index:5}
.pin:nth-child(1){left:2%;top:4%;transform:rotate(-6deg)}
.pin:nth-child(2){left:50%;top:0;transform:rotate(4deg)}
.pin:nth-child(3){left:26%;top:34%;transform:rotate(-1.5deg);z-index:2}
.pin:nth-child(4){left:0;top:58%;transform:rotate(3deg)}
.pin:nth-child(5){left:54%;top:55%;transform:rotate(-4deg)}
@media (max-width:860px){
  .hero{padding:40px 0 24px}
  .hero .wrap{grid-template-columns:1fr;gap:28px}
  .board{justify-self:center;max-width:420px}
}

/* Planner-style tabs that jump to shelves */
.tabs{display:flex;gap:6px;flex-wrap:wrap;padding:6px 0 0}
.tab{--c:var(--ink);text-decoration:none;font:600 .92rem/1 var(--body);color:#fff;background:var(--c);padding:11px 16px 13px;border-radius:10px 10px 0 0;opacity:.92}
.tab:hover{opacity:1;transform:translateY(-2px)}
.tabs-bar{border-bottom:6px solid var(--ink);margin-bottom:8px}

/* Shelves */
.shelf{--c:var(--ink);padding:56px 0 18px;scroll-margin-top:80px}
.shelf-head{display:flex;align-items:end;justify-content:space-between;gap:24px;border-top:5px solid var(--c);padding-top:18px;margin-bottom:26px}
.shelf h2{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.05;margin:0}
.shelf-note{margin:6px 0 0;color:var(--ink-soft);max-width:60ch}
.countdown{font-weight:600;color:var(--c);white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px 22px}
.item{display:flex;flex-direction:column;background:var(--sheet);border-radius:var(--radius-sheet);padding:10px 10px 16px;box-shadow:0 1px 0 rgba(38,34,32,.05),0 8px 20px -16px rgba(38,34,32,.5)}
.item img{aspect-ratio:1/1;object-fit:cover;border-radius:2px;background:var(--paper)}
.item h3{font:600 1.04rem/1.3 var(--body);margin:14px 4px 4px}
.item p{margin:0 4px 14px;font-size:.92rem;color:var(--ink-soft);line-height:1.45}
.item .buy{margin:auto 4px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-weight:600}
.item .btn{padding:9px 15px;font-size:.9rem;border-color:var(--c);color:var(--c)}
.item .btn:hover{background:var(--c);color:#fff}
.item.soon{opacity:.72}
.item.soon .btn{border-style:dashed;cursor:default;pointer-events:none}
.flag{align-self:flex-start;margin:12px 4px 0;font-size:.78rem;font-weight:600;color:var(--c);border:1.5px solid var(--c);border-radius:999px;padding:3px 9px}

/* Steps */
.steps{padding:72px 0 24px}
.steps h2,.section-title{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.05;margin:0 0 28px}
.steps ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.steps li{counter-increment:s;border-top:1.5px solid var(--ink);padding-top:16px}
.steps li::before{content:counter(s);font-family:var(--display);font-size:2.6rem;line-height:1;display:block;margin-bottom:8px;color:var(--gold)}
.steps h3{margin:0 0 6px;font-size:1.08rem}
.steps p{margin:0;color:var(--ink-soft)}
@media (max-width:760px){.steps ol{grid-template-columns:1fr}}

/* Invitations teaser */
.invite{margin:72px 0 0;background:var(--ink);color:var(--sheet)}
.invite .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding-top:64px;padding-bottom:64px}
.invite h2{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4vw,3rem);line-height:1.05;margin:0 0 14px}
.invite p{color:#d9d5cd;max-width:48ch}
.invite .btn{border-color:var(--sheet);color:var(--sheet)}
.invite .btn:hover{background:var(--sheet);color:var(--ink)}
.card-stack{position:relative;height:240px}
.card-stack span{position:absolute;inset:auto;width:58%;aspect-ratio:5/7;background:var(--sheet);border-radius:4px;display:grid;place-items:center;font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--ink);box-shadow:0 14px 30px -14px rgba(0,0,0,.6);padding:16px;text-align:center}
.card-stack span:nth-child(1){left:6%;top:12%;transform:rotate(-8deg);background:#f1dcd6}
.card-stack span:nth-child(2){left:24%;top:0;transform:rotate(2deg);background:#dfe6da}
.card-stack span:nth-child(3){left:40%;top:16%;transform:rotate(9deg)}
@media (max-width:760px){.invite .wrap{grid-template-columns:1fr}.card-stack{height:220px;max-width:340px}}

/* About + FAQ */
.about{padding:72px 0 8px}
.about .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:48px}
.about p{margin:0 0 14px;max-width:62ch}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--ink-soft)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0;color:var(--ink-soft);max-width:64ch}
@media (max-width:760px){.about .wrap{grid-template-columns:1fr;gap:16px}}

/* Footer */
.site-foot{margin-top:80px;border-top:1px solid var(--line);padding:36px 0 48px;font-size:.93rem;color:var(--ink-soft)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--ink);text-decoration:underline}

/* Simple text pages */
.page{padding:56px 0 24px}
.page .wrap{max-width:760px}
.page h1{font-size:clamp(2.4rem,5vw,3.4rem);max-width:none}
.page h2{font-family:var(--display);font-size:1.7rem;margin:34px 0 8px}
.page p,.page li{color:var(--ink-soft)}

/* Unlock form */
.unlock{background:var(--sheet);border-radius:6px;padding:26px;margin:30px 0;box-shadow:0 8px 20px -16px rgba(38,34,32,.5)}
.unlock label{display:block;font-weight:600;margin:0 0 6px}
.unlock .row{display:flex;gap:10px;flex-wrap:wrap}
.unlock input,.unlock select{flex:1 1 240px;font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.unlock input:focus,.unlock select:focus{border-color:var(--ink);outline:none}
.status{margin:14px 0 0;font-weight:500}
.status.ok{color:var(--sage)}
.status.err{color:var(--terracotta)}
.item img,.pin img{height:auto}
.hero{padding-bottom:72px}
.site-nav .btn-solid{color:var(--sheet)}
.site-nav .btn-solid:hover{color:#fff}
@media (max-width:760px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -24px;padding:6px 24px 0}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap}
  .tabs-bar{border-bottom-width:5px}
  .shelf-head{flex-direction:column;align-items:flex-start;gap:8px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .item{padding:7px 7px 12px}
  .item h3{font-size:.95rem;margin-top:10px}
  .item p{font-size:.84rem}
  .item .buy{flex-direction:column;align-items:flex-start;gap:8px}
  .item .btn{width:100%;justify-content:center}
}
.card-stack{height:300px}
.card-stack span{width:min(200px,46%)}
.card-stack span:nth-child(1){left:4%;top:14%}
.card-stack span:nth-child(2){left:28%;top:2%}
.card-stack span:nth-child(3){left:50%;top:12%}

/* ---------- Blog ---------- */
.blog, .post { padding: 3.5rem 0 4.5rem; max-width: 760px; }
.blog h1, .post h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.08; margin: 0 0 .6rem; }
.post-list { display: grid; gap: 1.6rem; margin-top: 2rem; }
.post-card { display: grid; grid-template-columns: 160px 1fr; gap: 1.2rem; align-items: start; padding-bottom: 1.6rem; border-bottom: 1px solid rgba(38,34,32,.14); }
.post-card:not(:has(img)) { grid-template-columns: 1fr; }
.post-card img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.post-card h2 { font-family: var(--display); font-size: 1.6rem; margin: .2rem 0 .4rem; line-height: 1.15; }
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover { color: var(--terracotta); }
.post-card p { margin: 0; color: rgba(38,34,32,.75); }
.blog time, .post time { font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.blog .empty { margin-top: 2rem; }
.post .crumb a { font-size: .9rem; color: var(--gold); text-decoration: none; }
.post .cover { width: 100%; height: auto; border-radius: 8px; margin: 1.6rem 0 .4rem; }
.prose { font-size: 1.08rem; line-height: 1.75; margin-top: 1.6rem; }
.prose h2, .prose h3 { font-family: var(--display); line-height: 1.2; margin: 2.2rem 0 .6rem; }
.prose h2 { font-size: 1.9rem; } .prose h3 { font-size: 1.45rem; }
.prose img { max-width: 100%; height: auto; border-radius: 6px; }
.prose blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--gold); font-style: italic; }
.prose code { background: rgba(38,34,32,.07); padding: .1em .35em; border-radius: 4px; font-size: .92em; }
.prose a { color: var(--terracotta); }
.prose hr { border: 0; border-top: 1px solid rgba(38,34,32,.18); margin: 2.4rem 0; }
.post-picks { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(38,34,32,.14); }
.post-picks h2 { font-family: var(--display); font-size: 1.6rem; margin: 0 0 1rem; }
.post-picks .picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.post-picks .pick { display: grid; gap: .3rem; color: inherit; text-decoration: none; }
.post-picks .pick img { width: 100%; height: auto; border-radius: 6px; }
.post-picks .pick span { color: var(--gold); font-size: .9rem; }
@media (max-width: 560px) { .post-card { grid-template-columns: 1fr; } }
.prose img[src^="/assets/pins/"] { display: block; max-width: 420px; margin: 1rem auto; box-shadow: 0 6px 24px rgba(38,34,32,.12); }