/*
Theme Name: Poke Hollow
Theme URI: https://pokehollow.com
Author: Emily & Brandon
Description: A storybook theme for Poke Hollow: pen-and-ink on cream paper, with cards shown as binder pages.
Version: 0.25.3
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: poke-hollow
WC requires at least: 8.0
*/
/* Nadira Pro by Konstantina Louka, licensed from Fontspring for this website (web font license). */
@font-face{font-family:'Nadira Pro';src:url("assets/fonts/nf-nadira-pro-regular-webfont.woff2") format("woff2"),url("assets/fonts/nf-nadira-pro-regular-webfont.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nadira Pro';src:url("assets/fonts/nf-nadira-pro-bold-webfont.woff2") format("woff2"),url("assets/fonts/nf-nadira-pro-bold-webfont.woff") format("woff");font-weight:600 800;font-style:normal;font-display:swap}


/* ---------- Tokens: the site is a page in a picture book ---------- */
:root{
  --paper:#F4EDDB; --paper-deep:#EAE0C6; --paper-edge:#DCCFAE;
  --ink:#2B2419; --ink-soft:#5E5240; --ink-faint:rgba(43,36,25,.18);
  --dusk:#16241A; --moss:#4B6B3F; --moss-deep:#3A5531; --amber:#C79A45; --amber-soft:#E4C170; --mist:#D3DEC7; --parchment:#F1E9D2;
  --serif:'EB Garamond',Garamond,'Iowan Old Style',Georgia,serif; --sans:var(--serif); --hand:'Nadira Pro','EB Garamond',Georgia,serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
@supports (overflow:clip){body{overflow-x:clip}}
html{font-size:112.5%}
body{overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.6;font-variant-numeric:oldstyle-nums;-webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .16 0 0 0 .22 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  padding-bottom:env(safe-area-inset-bottom,0)}
a{color:var(--moss-deep)}
a:hover{color:var(--moss)}
img{max-width:100%;height:auto}
h1,h2,h3,.display{font-family:var(--serif);color:var(--dusk);line-height:1.2}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed!important;top:.5rem;left:.5rem;width:auto;height:auto;clip:auto;z-index:1000;background:var(--dusk);color:var(--parchment);padding:.6rem 1rem;border-radius:8px;font-weight:700}

/* ---------- Header: a clearing in a watercolour forest ---------- */
.hero{position:relative;overflow:hidden;text-align:center;padding:calc(2.2rem + env(safe-area-inset-top,0px)) .25rem 3.4rem;
  background:url("assets/images/forest-2160.webp") 50% 100%/cover no-repeat}
.hero-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto}

/* the illustration sits in a pool of light in the clearing */
.wordmark-link{position:relative;display:block;width:min(98vw,1040px);margin:0 auto;text-decoration:none}
.wordmark-link::before{content:'';position:absolute;inset:-14% -10% -16%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 52%,rgba(246,239,220,.92) 0,rgba(246,239,220,.75) 45%,rgba(246,239,220,0) 100%)}
.hero-title{margin:0;font-size:inherit;line-height:0}
.hero-logo{position:relative;display:block;width:100%;height:auto}

/* fireflies: a few rise out of the hollow, more wander the clearing */
.fireflies{position:absolute;left:43%;top:22%;width:14%;height:18%;pointer-events:none;z-index:2}
.glade{position:absolute;inset:0;pointer-events:none;z-index:2}
.firefly{position:absolute;width:5px;height:5px;border-radius:50%;background:#F3D27E;box-shadow:0 0 6px 2px rgba(228,193,112,.85),0 0 14px 4px rgba(199,154,69,.35);opacity:0;animation:rise 6.5s ease-out infinite}
.fireflies .f1{left:30%;top:70%;--dx:-38px;animation-delay:.4s}.fireflies .f2{left:55%;top:60%;--dx:30px;animation-delay:1.7s}
.fireflies .f3{left:42%;top:80%;--dx:-12px;animation-delay:3s}.fireflies .f4{left:68%;top:75%;--dx:46px;animation-delay:4.1s}
.fireflies .f5{left:20%;top:55%;--dx:-54px;animation-delay:5.2s}.fireflies .f6{left:50%;top:45%;--dx:16px;animation-delay:2.4s}
.glade .firefly{animation:wander 9s ease-in-out infinite}
.glade .g1{left:12%;top:58%;animation-delay:.2s}.glade .g2{left:24%;top:30%;animation-delay:2.6s}.glade .g3{left:31%;top:72%;animation-delay:5.1s}
.glade .g4{left:69%;top:66%;animation-delay:1.3s}.glade .g5{left:77%;top:34%;animation-delay:3.8s}.glade .g6{left:88%;top:62%;animation-delay:6.4s}
.glade .g7{left:6%;top:24%;animation-delay:7.2s}.glade .g8{left:94%;top:40%;animation-delay:4.6s}
@keyframes rise{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1;transform:translate(calc(var(--dx)*.15),-10px) scale(1)}
  60%{opacity:.85;transform:translate(calc(var(--dx)*.7),-70px)}100%{opacity:0;transform:translate(var(--dx),-120px) scale(.7)}}
@keyframes wander{0%,100%{opacity:0;transform:translate(0,0)}25%{opacity:.95}50%{transform:translate(18px,-22px)}75%{opacity:.6;transform:translate(-10px,-34px)}}

/* the opening moment, home page only: the illustration settles into the clearing */
.is-home .hero-logo{animation:settle 1.6s cubic-bezier(.22,.8,.3,1) .25s both}
.is-home .fireflies,.is-home .glade{animation:appear .8s ease-out 1.5s both}
@keyframes settle{from{opacity:0;transform:translateY(-34px);filter:blur(3px)}60%{filter:blur(0)}to{opacity:1;transform:none}}
@keyframes appear{from{opacity:0}to{opacity:1}}

/* navigation reads like a table of contents, resting on the mossy bank */
.quicknav{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.2rem 1.4rem;margin:1rem auto 0}
.quicknav ul{display:contents;list-style:none;margin:0;padding:0}
.quicknav li{display:contents}
.quicknav a{font-family:var(--serif);font-style:normal;font-weight:500;font-size:1.22rem;color:var(--ink);text-decoration:none;padding:.3rem .2rem .7rem;
  text-shadow:0 0 10px rgba(246,239,220,.95),0 0 3px rgba(246,239,220,.9);
  background:url("assets/images/streak.webp") no-repeat 0 100%/0 11px;transition:background-size .35s ease-out}
.quicknav a:hover,.quicknav a:focus-visible,.quicknav a[aria-current="page"],.quicknav .current-menu-item>a{background-size:100% 11px;color:var(--dusk)}
/* account and basket: simple dark green outline icons */
.quicknav .ph-icon-link{display:inline-flex;align-items:center;gap:.45rem;align-self:center;background:none;padding:.3rem .15rem;
  font-family:var(--serif);font-style:normal;font-weight:500;font-size:1.05rem;color:#1C1B19}
.quicknav .ph-basket{margin-left:.4rem}
.ph-icon{width:1.6rem;height:1.6rem;fill:none;stroke:#1C1B19;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.quicknav .ph-icon-link:hover,.quicknav .ph-icon-link[aria-current="page"]{background:none;color:#000}
.quicknav .ph-icon-link:hover .ph-icon{transform:translateY(-1px);stroke:#000}
.ph-account-pic{width:2rem;height:2rem;border-radius:50%;object-fit:cover;display:block}

/* inner pages: the same clearing, smaller and still */
.hero.is-compact{padding:calc(1.4rem + env(safe-area-inset-top,0px)) 1rem 2rem}
.hero.is-compact .wordmark-link{width:min(94vw,600px)}
.hero.is-compact .quicknav{margin-top:.5rem}
.hero.is-compact .quicknav a{font-size:1.12rem}
.hero.is-compact .quicknav .ph-icon-link{font-size:.98rem}

/* ---------- Page shell ---------- */
.site-main{min-height:50vh;padding-top:.6rem}
.page-view{max-width:760px;margin:0 auto;padding:1.6rem 1.5rem 4rem}
.page-view h1{font-family:var(--hand);font-style:normal;font-weight:500;font-size:clamp(1.7rem,5vw,2.3rem);margin:0 0 1rem}
.entry-content{line-height:1.75}
.entry-content>*{max-width:66ch}
.entry-content h2{font-weight:600;font-size:1.35rem;margin:2rem 0 .6rem}
.entry-content h3{font-weight:600;font-size:1.1rem;margin:1.6rem 0 .5rem}
.entry-content img{border-radius:4px}
.entry-meta{color:var(--ink-soft);font-size:.85rem;margin:-.5rem 0 1.4rem}
.post-list{display:grid;gap:1.2rem;margin:0;padding:0;list-style:none}
.post-list-item{border-bottom:1px solid var(--ink-faint);padding-bottom:1.2rem}
.post-list-item h2{font-size:1.3rem;font-weight:600;margin:0 0 .3rem}
.post-list-item h2 a{color:var(--dusk);text-decoration:none}
.post-list-item h2 a:hover{color:var(--moss)}
.pagination{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2rem}
.pagination .page-numbers{color:var(--ink-soft);text-decoration:none;font-weight:700;padding:.3rem .6rem;border-radius:6px}
.pagination .current{background:var(--moss);color:var(--parchment)}
.empty{text-align:center;padding:3rem 1.5rem 4rem;color:var(--ink-soft)}
.empty h1,.empty h2{font-family:var(--hand);font-style:normal;font-weight:500}
.empty-glyph{font-size:2.6rem;margin:0}

/* ---------- Buttons + form fields ---------- */
.btn-primary,.btn-secondary,.add-btn,
.wp-element-button,.wp-block-button__link,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link){font-family:var(--sans);font-weight:700;border-radius:8px;text-decoration:none}
.btn-primary,.wp-element-button,.wp-block-button__link,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.wc-block-components-button:not(.is-link){background:var(--moss);color:var(--parchment);border:none;padding:.8rem 1.4rem}
.btn-primary:hover,.wp-element-button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.wc-block-components-button:not(.is-link):hover{background:var(--moss-deep);color:var(--parchment)}
.btn-secondary,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{background:transparent;color:var(--ink);border:1px solid rgba(43,36,25,.35);padding:.8rem 1.2rem}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--paper-deep);color:var(--ink)}
.add-btn{background:var(--moss);color:var(--parchment);border:none;padding:.3rem .55rem;font-size:.72rem}
.field,input[type=text],input[type=email],input[type=search],input[type=tel],input[type=password],input[type=number],select,textarea{
  background:#FFFBF1;border:1px solid rgba(43,36,25,.28);color:var(--ink);border-radius:8px;padding:.55rem .7rem;font:inherit;font-size:.95rem}

/* ---------- WooCommerce baseline (cart, checkout, account, product pages) ---------- */
.ph-wc{max-width:1100px;margin:0 auto;padding:1.5rem 1.5rem 4rem}
.ph-wc .page-title,.ph-wc .product_title{font-family:var(--hand);font-style:normal;font-weight:500}
.woocommerce .price,.woocommerce div.product p.price,.woocommerce div.product span.price,.woocommerce ul.products li.product .price{color:var(--moss-deep)!important;font-family:var(--serif);font-weight:600}
.woocommerce ul.products li.product .woocommerce-loop-product__title{color:var(--dusk);font-family:var(--serif)}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner{background:var(--paper-deep)!important;color:var(--ink)!important;border-top-color:var(--moss)!important}
.woocommerce-message::before,.woocommerce-info::before{color:var(--moss)!important}
.woocommerce table.shop_table,.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-color:var(--ink-faint)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--paper-deep);border-color:var(--ink-faint)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--paper)}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--ink)}
.woocommerce span.onsale{background:var(--moss);color:var(--parchment)}
.wc-block-components-text-input input,.wc-block-components-combobox input,.wc-blocks-components-select select{background:#FFFBF1!important;color:var(--ink)!important}

/* ---------- Footer ---------- */
.site-footer{text-align:center;padding:2.5rem 1.5rem calc(2rem + env(safe-area-inset-bottom,0px));color:var(--ink-soft);font-size:.82rem}
.site-footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:.6rem}
.site-footer nav a{color:var(--ink-soft);text-decoration:none;font-weight:700}
.site-footer nav a:hover{color:var(--moss)}
.site-footer p{margin:0}

@media (max-width:480px){.quicknav{gap:.1rem 1rem}.quicknav a{font-size:1.1rem}}
@media (max-width:700px){.hero{background-image:url("assets/images/forest-narrow-1200.webp")}}
@media (min-width:1700px){.hero{background-image:url("assets/images/forest-2880.webp")}}
@media (prefers-reduced-motion:reduce){
  .firefly{animation:none;opacity:.8}
  .is-home .hero-logo,.is-home .fireflies,.is-home .glade{animation:none}
  .quicknav a{transition:none}
}

/* ---------- Home page: features across the top, then the bio with a large photo ---------- */
.ph-home{padding:1.4rem 0 0}
.home-features{max-width:1180px;margin:0 auto;padding:0 1.25rem 4rem}
.home-heading{font-family:var(--hand);font-style:normal;font-weight:500;font-size:clamp(1.6rem,4.4vw,2.1rem);margin:0 0 1.1rem}
.features-layout{display:grid;gap:2.4rem}

.feature-art{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:3px;border:1px solid rgba(43,36,25,.45);outline:1px solid rgba(43,36,25,.2);outline-offset:5px;background:var(--paper-deep)}
.feature-art img{display:block;width:100%;height:100%;object-fit:cover}
.feature-lead-title{font-weight:600;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.2;margin:1.3rem 0 .2rem}
.feature-lead-title a,.feature-small-title a{color:var(--dusk);text-decoration:none}
.feature-lead-title a:hover,.feature-small-title a:hover{color:var(--moss)}
.feature-date{color:var(--ink-soft);font-size:.84rem;margin:0 0 .5rem}
.feature-excerpt p{margin:0;font-size:1.05rem;line-height:1.7;max-width:62ch}
.feature-read{display:inline-block;margin-top:.8rem;font-weight:700;color:var(--moss-deep)}
.feature-list{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem}
.feature-thumb{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:3px;border:1px solid var(--ink-faint)}
.feature-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.feature-small-title{font-weight:600;font-size:1.15rem;line-height:1.25;margin:.7rem 0 .15rem}
.features-more{margin:1.4rem 0 0;font-weight:700}
.feature-lead-text{padding-bottom:1.4rem;border-bottom:1px solid var(--ink-faint)}
.feature-more-label{margin:1.2rem 0 .8rem;font-family:var(--hand);font-size:1.2rem;color:var(--dusk)}
.feature-side .feature-list{gap:1rem}
.feature-side .feature-small{display:grid;grid-template-columns:110px 1fr;gap:1rem;align-items:center}
.feature-side .feature-small-title{margin:0 0 .15rem;font-size:1.05rem}
.feature-side .feature-small .feature-date{margin:0}
.feature-lead.is-placeholder .feature-art{opacity:.8}
.admin-hint{margin:0;padding:.9rem 1.1rem;border:1px dashed rgba(43,36,25,.35);border-radius:6px;color:var(--ink-soft);font-size:.9rem}

/* bio: text on the left, a large photo of Emily and Brandon running to the edge of the page */
.home-bio{display:grid;align-items:center}
.bio-text{padding:4rem 1.75rem 3.5rem;text-align:center}
.bio-text .home-heading{font-size:clamp(1.35rem,2.4vw,1.7rem);margin-bottom:1rem}
.bio-text p{font-size:1rem;line-height:1.55;margin:0 auto .9rem;max-width:60ch}
.bio-text .bio-cta{margin-top:2.2rem}
.btn-plate{display:inline-block;background:#4B5034;color:var(--paper);text-decoration:none;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;padding:.55rem 1.1rem .5rem;border-radius:0}
.btn-plate:hover{background:var(--dusk);color:var(--paper)}
.bio-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 35%}
.bio-photo.is-placeholder{aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;padding:2rem;text-align:center;
  border:1px dashed rgba(43,36,25,.4);background:rgba(250,245,232,.6);color:var(--ink-soft);font-size:.9rem}

@media (min-width:900px){
  /* newest feature's photo on the left; its title, date, and link on the right, with the other posts listed under it */
  .features-layout{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:3rem;align-items:start}
  .feature-lead-title{margin-top:0}
  .features-more{text-align:right}
  .home-bio{grid-template-columns:44fr 56fr}
  .home-bio.no-photo{grid-template-columns:1fr}
  .bio-text{padding:4rem clamp(2rem,5vw,5.5rem)}
  .bio-text p{max-width:66ch}
  .bio-photo img,.bio-photo.is-placeholder{width:100%;aspect-ratio:4/3;max-height:88vh;object-position:50% 40%}
}

/* ---------- Cards: the binder ---------- */
.binder-view{max-width:760px;margin:0 auto;padding:1rem 1rem 4rem}
.binder-title{font-family:var(--hand);font-style:normal;font-weight:500;font-size:clamp(1.7rem,5vw,2.3rem);text-align:center;margin:0 0 1rem}

/* search, filter, sort */
.binder-tools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-start;margin:0 0 1.6rem}
.binder-search{display:flex;gap:.4rem;flex:1 1 260px}
.binder-search .field{flex:1;min-width:0}
.binder-search .btn-secondary{padding:.55rem .9rem}
.binder-filter{position:relative}
.binder-filter summary{list-style:none;user-select:none;padding-right:2rem;position:relative;white-space:nowrap}
.binder-filter summary::-webkit-details-marker{display:none}
.binder-filter summary::after{content:'';position:absolute;right:.8rem;top:50%;width:.45rem;height:.45rem;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:translateY(-70%) rotate(45deg)}
.binder-filter[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.filter-panel{display:grid;gap:.8rem;margin-top:.5rem;padding:1rem;background:#FBF7EC;border:1px solid rgba(43,36,25,.25);border-radius:8px;box-shadow:0 10px 24px rgba(54,42,27,.12)}
.filter-field{display:grid;gap:.25rem;font-size:.85rem;font-weight:700;color:var(--ink-soft)}
.filter-field select{width:100%;font-weight:400}
.filter-actions{display:flex;align-items:center;gap:1rem;font-weight:700;font-size:.9rem}
@media (min-width:640px){
  .binder-filter .filter-panel{position:absolute;z-index:20;right:0;top:100%;width:min(86vw,520px);grid-template-columns:1fr 1fr}
  .filter-actions{grid-column:1/-1}
}

/* index tabs sticking up from the top of the binder */
.binder-tabs{display:flex;gap:.3rem;padding:0 .6rem 0 1.4rem;overflow-x:auto;scrollbar-width:none;position:relative;z-index:1}
.binder-tabs::-webkit-scrollbar{display:none}
.binder-tab{flex:0 0 auto;font-family:var(--serif);font-family:var(--hand);font-style:normal;font-weight:500;font-size:1rem;color:var(--ink);text-decoration:none;
  padding:.45rem .95rem .55rem;border-radius:9px 9px 0 0;border:1px solid rgba(43,36,25,.3);border-bottom:none;margin-top:.45rem;
  background:var(--tab,#E7DDC2);box-shadow:inset 0 -6px 8px -6px rgba(54,42,27,.25);transition:margin-top .15s ease}
.binder-tab:hover{margin-top:.2rem;color:var(--dusk)}
.binder-tab[aria-current="page"]{margin-top:0;padding-bottom:.75rem;box-shadow:none;color:var(--dusk)}
.tab-all{--tab:#F4EDDB}.tab-singles{--tab:#DCE5CF}.tab-cutie{--tab:#F1D9CF}.tab-clay{--tab:#EBD9AE}.tab-crochet{--tab:#D6E1DD}.tab-bulk{--tab:#E2D5BC}

/* the binder cover, rings, and page */
.binder{position:relative;margin-top:-1px;padding:16px 14px 16px 26px;border-radius:14px;
  background:#2F4A2C 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='.9 .25' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 14px 34px rgba(30,40,25,.35);touch-action:pan-y}
.binder::before{content:'';position:absolute;inset:7px;border:1px dashed rgba(228,214,170,.35);border-radius:10px;pointer-events:none}
.binder-ring{position:absolute;left:4px;z-index:3;width:44px;height:15px;border-radius:9px;border:3px solid #C9C2AE;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 60%);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.binder-ring.r1{top:15%}.binder-ring.r2{top:50%;transform:translateY(-50%)}.binder-ring.r3{bottom:15%}
.binder-page{list-style:none;margin:0;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  padding:12px 10px 12px 30px;background:#FBF7EC;border-radius:6px;box-shadow:0 2px 0 #E9E0C9,0 4px 0 #E0D5B9;transform-origin:left center}
.binder-page::before{content:'';position:absolute;left:9px;top:12px;bottom:12px;width:10px;
  background:radial-gradient(circle,rgba(54,42,27,.28) 40%,transparent 44%) 0 0/10px 34px repeat-y}

/* pockets: clear sleeves holding each card */
.pocket{position:relative;display:flex;flex-direction:column;gap:.2rem;min-width:0;padding:6px 6px 7px;border-radius:6px;
  background:rgba(255,255,255,.55);border:1px solid rgba(43,36,25,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.pocket.is-empty{background:repeating-linear-gradient(115deg,rgba(255,255,255,.5) 0 10px,rgba(255,255,255,.25) 10px 20px);border-style:dashed;min-height:140px}
.pocket-photo{position:relative;display:block;aspect-ratio:63/88;border-radius:4px;overflow:hidden;background:rgba(75,107,63,.1)}
.pocket-photo img{display:block;width:100%;height:100%;object-fit:cover}
.pocket-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.38) 0,rgba(255,255,255,.08) 28%,transparent 42%,transparent 70%,rgba(255,255,255,.12) 100%)}
.no-photo{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.6rem}
.pocket-name{font-family:var(--serif);font-weight:600;font-size:.78rem;line-height:1.2;color:var(--dusk);text-decoration:none;overflow-wrap:break-word;hyphens:auto;font-variant-numeric:lining-nums;margin-top:.15rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pocket-name:hover{color:var(--moss)}
.pocket-meta{font-size:.66rem;line-height:1.25;display:block;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pocket-bottom{margin-top:auto;padding-top:.25rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.2rem .4rem}
.pocket-price{font-family:var(--serif);font-weight:600;font-size:.9rem;color:var(--dusk)}
.pocket-price del{opacity:.55;font-size:.75rem}
.pocket-price ins{text-decoration:none}
.pocket .add-btn{padding:.28rem .6rem;font-size:.72rem;line-height:1.2}
.pocket .add-btn.loading{opacity:.6}
.pocket .add-btn.added{background:var(--moss-deep)}
.pocket .added_to_cart{display:none}
.pocket-qty{font-size:.66rem;color:var(--ink-soft);margin-right:auto}
.sold-out{font-size:.7rem;font-weight:700;color:#8E4F34}

.binder-page[hidden]{display:none}
.binder-page.is-blank{display:block;text-align:center;padding:3rem 1.5rem 3rem 3rem;color:var(--ink-soft)}
.binder-empty-title{font-family:var(--serif);font-family:var(--hand);font-style:normal;font-size:1.35rem;color:var(--dusk);margin:0 0 .4rem}

/* page flips */
.binder-nav{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:1.4rem}
.binder-nav.is-top{margin:0 0 .8rem;gap:.8rem}
.binder-nav.is-top .flip-btn{width:2.3rem;height:2.3rem;font-size:1.35rem}
.flip-btn{display:flex;align-items:center;justify-content:center;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--moss);color:var(--parchment);text-decoration:none;font-size:1.6rem;line-height:1;padding-bottom:.15rem}
.flip-btn:hover{background:var(--moss-deep);color:var(--parchment)}
.flip-btn.is-disabled{opacity:.3}
.page-indicator{font-family:var(--serif);font-family:var(--hand);font-style:normal;color:var(--ink-soft);min-width:8rem;text-align:center}
.turn-out-next{animation:turnOutNext .22s cubic-bezier(.4,0,1,1) forwards}
.turn-out-prev{animation:turnOutPrev .22s cubic-bezier(.4,0,1,1) forwards}
.turn-in-next{animation:turnInNext .32s cubic-bezier(.2,.7,.3,1) both}
.turn-in-prev{animation:turnInPrev .32s cubic-bezier(.2,.7,.3,1) both}
@keyframes turnOutNext{to{transform:perspective(1600px) translateX(-28px) rotateY(10deg);opacity:0}}
@keyframes turnOutPrev{to{transform:perspective(1600px) translateX(28px) rotateY(-10deg);opacity:0}}
@keyframes turnInNext{from{transform:perspective(1600px) translateX(36px) rotateY(-10deg);opacity:0}to{transform:none;opacity:1}}
@keyframes turnInPrev{from{transform:perspective(1600px) translateX(-36px) rotateY(10deg);opacity:0}to{transform:none;opacity:1}}
/* tabs, filters, and sort: a quick soft fade instead of a page reload */
.is-fading{animation:binderFade .15s ease-in forwards}
.is-arriving{animation:binderArrive .22s ease-out both}
@keyframes binderFade{to{opacity:.35}}
@keyframes binderArrive{from{opacity:.35}to{opacity:1}}
.binder.is-loading{cursor:progress}

@media (min-width:640px){
  .binder-tabs{padding:0 1.2rem 0 3rem}
  .binder{padding:22px 20px 22px 34px}
  .binder-ring{left:6px;width:52px;height:17px}
  .binder-page{gap:12px;padding:16px 14px 16px 38px}
  .binder-page::before{left:12px}
  .pocket{padding:8px 8px 9px}
  .pocket-name{font-size:.88rem}
  .pocket-meta{font-size:.72rem}
  .pocket-price{font-size:1rem}
}
/* phones: keep each pocket short so a whole page fits on screen */
@media (max-width:639px){
  .binder-view{padding-top:.4rem}
  .binder-tabs{gap:2px;padding:0 4px;overflow:visible;justify-content:space-between}
  .binder-tab{flex:1 1 auto;min-width:0;text-align:center;font-size:clamp(.66rem,3.3vw,.8rem);line-height:1.15;padding:.4rem .3rem .45rem;border-radius:7px 7px 0 0}
  .binder-tab[aria-current="page"]{padding-bottom:.6rem}
  .binder-title{font-size:1.6rem;margin-bottom:.6rem}
  .binder-tools{margin-bottom:1rem}
  .binder{padding:10px 8px 10px 22px}
  .binder-ring{width:36px;height:13px;left:3px}
  .binder-page{gap:5px;padding:8px 6px 8px 22px}
  .binder-page::before{left:6px;width:8px;background-size:8px 30px}
  .pocket{padding:4px 4px 5px;gap:.05rem;border-radius:5px}
  .pocket-name{font-size:.68rem;line-height:1.15;-webkit-line-clamp:2}
  .pocket-meta{font-size:.58rem}
  .pocket-qty{display:none}
  .pocket-bottom{flex-wrap:nowrap;padding-top:.15rem}
  .pocket-price{font-size:.74rem}
  .pocket .add-btn{padding:.18rem .4rem;font-size:.62rem}
  .sold-out{font-size:.6rem}
  .pocket.is-empty{min-height:0}
}
/* wide screens: the binder lies open, two pages side by side with the rings down the middle */
.binder .binder-page+.binder-page{margin-top:14px}
@media (min-width:1000px){
  .binder-view{max-width:1340px}
  .binder-tools,.binder-title{max-width:1100px;margin-left:auto;margin-right:auto}
  .binder-nav.is-top{justify-content:flex-end;height:0;margin:0;position:relative;z-index:2;top:.15rem;padding-right:.4rem}
  .binder-nav.is-top>*{transform:translateY(1.2rem)}
  .binder{display:grid;grid-template-columns:1fr 1fr;column-gap:46px;padding:22px 22px}
  .binder.is-empty{display:block}
  .binder .binder-page+.binder-page{margin-top:0}
  .binder::after{content:'';position:absolute;top:10px;bottom:10px;left:50%;width:46px;transform:translateX(-50%);pointer-events:none;
    background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.06) 45%,rgba(255,255,255,.06) 55%,rgba(0,0,0,.25))}
  .binder-ring{left:50%;width:74px;height:18px;margin-left:-37px}
  .binder-ring.r2{transform:translateY(-50%)}
  .binder-page{gap:10px;padding:14px 12px 14px 36px}
  .binder-page.is-left{padding:14px 36px 14px 12px}
  .binder-page.is-left::before{left:auto;right:12px}
  .pocket{padding:6px 6px 7px}
  .pocket-name{font-size:.8rem;-webkit-line-clamp:1}
  .pocket-photo{margin-bottom:.1rem}
  .pocket-meta{font-size:.68rem}
  .pocket-price{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){.binder-tab{transition:none}.turn-in-next,.turn-in-prev,.turn-out-next,.turn-out-prev,.is-fading,.is-arriving{animation:none}}

/* ---------- Binders and Mystery Bundles: a shelf of one-of-a-kind things ---------- */
.shelf-view{max-width:1080px;margin:0 auto;padding:1rem 1rem 4rem}
.shelf-intro{text-align:center;color:var(--ink-soft);margin:-.4rem auto 1.2rem;max-width:52ch}
.shelf-tools{display:flex;justify-content:flex-end;gap:.6rem;margin:0 0 1rem}
.shelf-tabs .binder-tab{--tab:#E7DDC2}
.shelf-tabs .size-1{--tab:#DCE5CF}.shelf-tabs .size-2{--tab:#EBD9AE}.shelf-tabs .size-3{--tab:#F1D9CF}.shelf-tabs .size-4{--tab:#D6E1DD}.shelf-tabs .size-5{--tab:#E2D5BC}
.shelf{position:relative;padding:18px;background:#FBF7EC;border:1px solid rgba(43,36,25,.45);outline:1px solid rgba(43,36,25,.2);outline-offset:-7px;border-radius:6px;box-shadow:0 12px 28px rgba(54,42,27,.12)}
.shelf.has-tabs{margin-top:-1px}
.shelf-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.shelf-item{display:flex;flex-direction:column;min-width:0}
.shelf-photo{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:var(--paper-deep);border:1px solid var(--ink-faint)}
/* square frame; keep more of the top of each photo and trim from the bottom, where there's extra space */
.shelf-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .35s ease}
.shelf-item:hover .shelf-photo img{transform:scale(1.03)}
.shelf-item.is-sold .shelf-photo img{filter:grayscale(.6) opacity(.7)}
.sold-ribbon{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);white-space:nowrap;font-family:var(--serif);font-family:var(--hand);font-style:normal;font-size:.9rem;
  background:var(--dusk);color:var(--parchment);padding:.25rem .8rem;border-radius:3px}
.shelf-body{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .15rem 0;flex:1}
.shelf-name{font-family:var(--serif);font-weight:600;font-size:1rem;line-height:1.25;color:var(--dusk);text-decoration:none}
.shelf-name:hover{color:var(--moss)}
.shelf-meta{font-size:.78rem;color:var(--ink-soft)}
.shelf-bottom{margin-top:auto;padding-top:.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem}
.shelf .add-btn{padding:.4rem .75rem;font-size:.8rem}
.shelf .added_to_cart{display:none}
.shelf .add-btn.added{background:var(--moss-deep)}
.shelf-empty{text-align:center;padding:3rem 1rem;color:var(--ink-soft)}
@media (min-width:760px){
  .shelf{padding:26px}
  .shelf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
  .shelf-name{font-size:1.12rem}
}
@media (prefers-reduced-motion:reduce){.shelf-photo img{transition:none}.shelf-item:hover .shelf-photo img{transform:none}}

/* ---------- Cursor: a little green blob, squishing over anything clickable ---------- */
html{
  cursor:url("assets/cursor/blob-32.png") 16 16,auto;
  cursor:-webkit-image-set(url("assets/cursor/blob-32.png") 1x,url("assets/cursor/blob-64.png") 2x) 16 16,auto;
  cursor:image-set(url("assets/cursor/blob-32.png") 1x,url("assets/cursor/blob-64.png") 2x) 16 16,auto}
a,button,select,summary,label[for],[role="button"],input[type="submit"],input[type="checkbox"],input[type="radio"],.add-btn{
  cursor:url("assets/cursor/blob-hover-32.png") 16 16,pointer;
  cursor:-webkit-image-set(url("assets/cursor/blob-hover-32.png") 1x,url("assets/cursor/blob-hover-64.png") 2x) 16 16,pointer;
  cursor:image-set(url("assets/cursor/blob-hover-32.png") 1x,url("assets/cursor/blob-hover-64.png") 2x) 16 16,pointer}
input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="password"],input[type="number"],textarea{cursor:text}
/* while something is loading: the blob with a little green loading ring (replaces the blue system one) */
body.wp-customizer-unloading,body.wp-customizer-unloading *,
.blockUI,.blockUI.blockOverlay,.blockOverlay,.processing,.loading,.is-loading,
[style*="cursor: wait"],[style*="cursor:wait"],[style*="cursor: progress"],[style*="cursor:progress"],
html.ph-busy,html.ph-busy *{
  cursor:url("assets/cursor/blob-busy-32.png") 12 12,progress!important;
  cursor:-webkit-image-set(url("assets/cursor/blob-busy-32.png") 1x,url("assets/cursor/blob-busy-64.png") 2x) 12 12,progress!important;
  cursor:image-set(url("assets/cursor/blob-busy-32.png") 1x,url("assets/cursor/blob-busy-64.png") 2x) 12 12,progress!important}

/* ---------- Account side window ---------- */
html.ph-drawer-lock{overflow:hidden}
.ph-drawer{position:fixed;inset:0;z-index:1000}
.ph-drawer[hidden]{display:none}
.ph-drawer-backdrop{position:absolute;inset:0;background:rgba(28,27,25,.45);opacity:0;transition:opacity .3s ease}
.ph-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,92vw);overflow-y:auto;overscroll-behavior:contain;
  background:#FBF6E8;box-shadow:-12px 0 40px rgba(28,27,25,.18);
  padding:calc(2.2rem + env(safe-area-inset-top,0px)) 2rem calc(2rem + env(safe-area-inset-bottom,0px));
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.8,.3,1)}
.ph-drawer.is-open .ph-drawer-backdrop{opacity:1}
.ph-drawer.is-open .ph-drawer-panel{transform:none}
.ph-drawer-panel:focus{outline:none}
.ph-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.8rem}
.ph-drawer-title{margin:0;font-family:var(--hand);font-style:normal;font-weight:500;font-size:1.9rem;letter-spacing:.04em;text-transform:uppercase;color:#1C1B19}
.ph-drawer-close{flex:none;width:2.4rem;height:2.4rem;padding:.4rem;margin:-.2rem -.4rem 0 0;background:none;border:none}
.ph-drawer-close svg{width:100%;height:100%;fill:none;stroke:#1C1B19;stroke-width:1.2;stroke-linecap:round}
.ph-drawer-form{display:grid;gap:1rem}
.ph-drawer .ph-drawer-input{width:100%;padding:.85rem 1rem;font-size:1.05rem;background:#F3F1EC;border:1px solid rgba(28,27,25,.14);border-radius:0;color:#1C1B19}
.ph-drawer .ph-drawer-input::placeholder{color:#6F6A61}
.ph-drawer-remember{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--ink-soft)}
.ph-drawer-btn{display:block;width:100%;text-align:center;padding:.85rem 1rem .8rem;border:1px solid #3D3B38;border-radius:0;background:#3D3B38;color:#FBF6E8;
  font-family:var(--serif);font-size:1rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.ph-drawer-btn:hover{background:#1C1B19;color:#FBF6E8}
.ph-drawer-btn.is-outline{background:transparent;color:#1C1B19;margin-top:1.6rem}
.ph-drawer-btn.is-outline:hover{background:#1C1B19;color:#FBF6E8}
.ph-drawer-forgot{text-align:center;margin:1.1rem 0 0}
.ph-drawer-forgot a{color:#1C1B19;text-decoration:none}
.ph-drawer-forgot a:hover{text-decoration:underline}
.ph-drawer-rule{border:none;border-top:1px solid rgba(28,27,25,.15);margin:1.4rem 0}
.ph-drawer-note{margin:1rem 0 0;text-align:center;font-size:.92rem;color:var(--ink-soft)}
.ph-drawer-hello{font-size:1.15rem;margin:-.6rem 0 1.2rem}
.ph-drawer-links{display:flex;flex-direction:column;border-top:1px solid rgba(28,27,25,.15)}
.ph-drawer-links a{padding:.85rem .1rem;border-bottom:1px solid rgba(28,27,25,.15);color:#1C1B19;text-decoration:none;font-size:1.08rem}
.ph-drawer-links a:hover{color:var(--moss-deep);padding-left:.4rem;transition:padding .15s ease}
@media (prefers-reduced-motion:reduce){.ph-drawer-panel,.ph-drawer-backdrop{transition:none}}

/* ---------- My Account page: a quiet list on the left, the page on the right ---------- */
.woocommerce-account .entry-content>*{max-width:none}
.woocommerce-account .page-view{max-width:1040px}
.woocommerce-account .woocommerce{display:grid;gap:2rem}
.woocommerce-account .woocommerce::before,.woocommerce-account .woocommerce::after{display:none}
.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(28,27,25,.15)}
.woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-MyAccount-navigation a{display:block;padding:.75rem .1rem;border-bottom:1px solid rgba(28,27,25,.15);color:#1C1B19;text-decoration:none;font-size:1.05rem}
.woocommerce-MyAccount-navigation a:hover{color:var(--moss-deep)}
.woocommerce-MyAccount-navigation .is-active a{font-weight:600;color:var(--dusk);
  background:url("assets/images/streak.webp") no-repeat 0 92%/7.5em 9px}
.woocommerce-MyAccount-content{line-height:1.7}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{font-family:var(--hand);font-style:normal;font-weight:500}
.woocommerce-account .woocommerce-Button,.woocommerce-account button.button{background:#3D3B38;color:#FBF6E8;border:none;border-radius:0;
  letter-spacing:.12em;text-transform:uppercase;padding:.75rem 1.3rem}
.woocommerce-account .woocommerce-Button:hover,.woocommerce-account button.button:hover{background:#1C1B19;color:#FBF6E8}
@media (min-width:800px){.woocommerce-account .woocommerce{grid-template-columns:220px 1fr;gap:3.5rem;align-items:start}}

/* ---------- Footer policy links and their pop-ups ---------- */
.footer-policies{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;margin:0 auto 1.2rem;max-width:1100px}
.site-footer .footer-policies a{color:#5A564E;font-weight:400;font-size:1.05rem;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.site-footer .footer-policies a:hover{color:#1C1B19}
.ph-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:4vh 1rem}
.ph-modal[hidden]{display:none}
.ph-modal-backdrop{position:absolute;inset:0;background:rgba(28,27,25,.55);opacity:0;transition:opacity .22s ease}
.ph-modal-card{position:relative;display:flex;flex-direction:column;width:min(960px,100%);max-height:88vh;background:#FDF9EF;border-radius:20px;
  box-shadow:0 24px 60px rgba(28,27,25,.3);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .22s ease,transform .22s ease}
.ph-modal.is-open .ph-modal-backdrop{opacity:1}
.ph-modal.is-open .ph-modal-card{opacity:1;transform:none}
.ph-modal-card:focus{outline:none}
.ph-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.8rem 2rem .6rem}
.ph-modal-title{margin:0;font-style:normal;font-weight:600;font-size:1.75rem;color:#1C1B19}
.ph-modal-close{flex:none;width:2.4rem;height:2.4rem;padding:.35rem;margin:-.2rem -.4rem 0 0;background:none;border:none}
.ph-modal-close svg{width:100%;height:100%;fill:none;stroke:#5A564E;stroke-width:1.4;stroke-linecap:round}
.ph-modal-close:hover svg{stroke:#1C1B19}
.ph-modal-body{overflow-y:auto;overscroll-behavior:contain;padding:.6rem 2rem 2rem;color:#1C1B19;line-height:1.65}
.ph-modal-body>*{max-width:none}
.ph-modal-body h2,.ph-modal-body h3{font-style:normal;font-weight:600;color:#1C1B19;margin:1.6rem 0 .6rem}
.ph-modal-body h2{font-size:1.3rem}.ph-modal-body h3{font-size:1.1rem}
.ph-modal-body table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.95rem}
.ph-modal-body th,.ph-modal-body td{border:1px solid rgba(28,27,25,.18);padding:.5rem .6rem;text-align:left;vertical-align:top}
@media (max-width:600px){.ph-modal-head{padding:1.4rem 1.3rem .4rem}.ph-modal-body{padding:.4rem 1.3rem 1.6rem}.ph-modal-title{font-size:1.45rem}}
@media (prefers-reduced-motion:reduce){.ph-modal-backdrop,.ph-modal-card{transition:none}}

/* ---------- Bundle & save note ---------- */
.ph-save-note{display:flex;align-items:center;gap:.8rem;padding:.75rem 1.1rem;background:#EEF2E4;border:1px solid rgba(58,85,49,.35);border-radius:8px;color:#1C1B19}
.ph-save-note p{margin:0;line-height:1.5}
.ph-save-note strong{color:var(--moss-deep)}
.ph-save-note a{color:var(--moss-deep);font-weight:600;margin-left:.25rem;white-space:nowrap}
.ph-save-icon{flex:none;width:1.7rem;height:1.7rem;fill:none;stroke:var(--moss-deep);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ph-save-note--shelf{max-width:640px;margin:0 auto 1.4rem;justify-content:center}
.ph-save-note--product{margin:1rem 0 1.2rem}

/* ---------- Wishlist hearts on cards, binders, and bundles ---------- */
.pocket,.shelf-item{position:relative}
.pocket .phc-heart,.shelf-item .phc-heart{position:absolute;z-index:3;margin:0}
.pocket .phc-heart{top:12px;right:12px;width:1.9rem;height:1.9rem}
.pocket .phc-heart svg{width:1.05rem;height:1.05rem}
.shelf-item .phc-heart{top:10px;right:10px;width:2.4rem;height:2.4rem}
.shelf-item .phc-heart svg{width:1.3rem;height:1.3rem}
@media (max-width:639px){
  .pocket .phc-heart{top:8px;right:8px;width:1.5rem;height:1.5rem}
  .pocket .phc-heart svg{width:.85rem;height:.85rem}
}

/* stock photo note on card product pages */
.ph-stock-note{margin:-.2rem 0 1rem;font-size:.95rem;font-family:var(--hand);font-style:normal;color:var(--ink-soft)}

/* Set filter: dropdown you can type in */
.ph-combo{position:relative}
.ph-combo-input{width:100%;padding-right:2rem;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.ph-combo-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);max-height:260px;overflow-y:auto;margin:0;padding:.3rem 0;list-style:none;
  background:#FFFBF1;border:1px solid rgba(43,36,25,.28);border-radius:8px;box-shadow:0 10px 24px rgba(54,42,27,.15)}
.ph-combo-list li{padding:.45rem .8rem;font-weight:400;color:var(--ink)}
.ph-combo-list li.is-active,.ph-combo-list li:hover{background:#EEF2E4;color:var(--dusk)}
.ph-combo-list li[aria-selected="true"]{font-weight:700;color:var(--moss-deep)}
.ph-combo-list li.is-empty{font-family:var(--hand);font-style:normal;color:var(--ink-soft)}

/* ---------- Home page reviews carousel ---------- */
.home-reviews{max-width:1180px;margin:0 auto;padding:0 1.25rem 4rem}
.reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.reviews-head .home-heading{margin:0}
.reviews-arrows{display:flex;gap:.6rem}
.reviews-arrows .flip-btn{border:none;width:2.4rem;height:2.4rem;font-size:1.4rem}
.reviews-track{list-style:none;margin:0;padding:.3rem .1rem 1rem;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.reviews-track::-webkit-scrollbar{display:none}
.reviews-track:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.review-card{scroll-snap-align:start;display:flex;flex-direction:column;padding:1.4rem 1.5rem 1.2rem;background:#FBF6E8;
  border:1px solid rgba(43,36,25,.4);outline:1px solid rgba(43,36,25,.18);outline-offset:-6px;border-radius:4px}
.review-stars{margin:0 0 .6rem;color:var(--amber);letter-spacing:.12em;font-size:1.05rem}
.review-stars-off{color:rgba(43,36,25,.18)}
.review-text{margin:0;font-family:var(--hand);font-style:normal;font-size:1.06rem;line-height:1.6;color:var(--ink);flex:1}
.review-text p{margin:0 0 .6rem}
.review-name{margin:.8rem 0 0;font-weight:600;color:var(--dusk)}
.review-source{font-weight:400;color:var(--ink-soft)}
@media (max-width:899px){.reviews-track{grid-auto-columns:calc((100% - 20px)/2)}}
@media (max-width:599px){.reviews-track{grid-auto-columns:86%}.reviews-head{align-items:center}}
@media (prefers-reduced-motion:reduce){.reviews-track{scroll-behavior:auto}}

/* reviews: buttons beside the carousel, the all-reviews window, and the write form */
.reviews-body{display:grid;gap:1.4rem}
.reviews-actions{display:flex;flex-direction:column;align-items:stretch;gap:.7rem}
.reviews-actions .btn-plate{width:100%;text-align:center;border:1px solid #4B5034;cursor:inherit;font-family:var(--serif)}
.btn-plate.is-outline{background:transparent;color:#4B5034}
.btn-plate.is-outline:hover{background:#4B5034;color:var(--paper)}
.reviews-summary{margin:.2rem 0 0;text-align:center;color:var(--ink-soft);font-size:.95rem}
.reviews-summary .review-stars{display:inline;margin:0;font-size:.95rem}
.reviews-summary.in-drawer{text-align:left;margin:1rem 0 .4rem}
.reviews-none{margin:0;padding:1.6rem;text-align:center;font-family:var(--hand);font-style:normal;color:var(--ink-soft);border:1px dashed rgba(43,36,25,.3);border-radius:6px}
.reviews-list{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:14px}
.reviews-list .review-card{outline-offset:-5px}
.review-form{display:grid;gap:1rem}
.review-form-stars{border:none;margin:0;padding:0}
.review-form-stars legend,.review-form-field>span{display:block;font-weight:600;margin-bottom:.35rem}
.star-pick{display:inline-flex;flex-direction:row-reverse;gap:.15rem}
.star-pick input{position:absolute;opacity:0;width:1px;height:1px}
.star-pick label{font-size:2rem;line-height:1;color:rgba(43,36,25,.2);transition:color .1s ease}
.star-pick label:hover,.star-pick label:hover~label,.star-pick input:checked~label{color:var(--amber)}
.star-pick input:focus-visible+label{outline:2px solid var(--amber);outline-offset:2px;border-radius:3px}
.review-form-field{display:block}
.ph-drawer textarea.ph-drawer-input{resize:vertical;font-family:var(--serif)}
.review-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.review-form-status{margin:0;min-height:1.2em;text-align:center}
.review-form-status.is-ok{color:var(--moss-deep);font-weight:600}
.review-form-status.is-error{color:#8E4F34;font-weight:600}
@media (min-width:900px){
  .reviews-body{grid-template-columns:minmax(0,1fr) 220px;align-items:start}
  .reviews-track{grid-auto-columns:calc((100% - 40px)/3)}
}
@media (min-width:900px) and (max-width:1100px){.reviews-track{grid-auto-columns:calc((100% - 20px)/2)}}

/* review photos: small preview in the card, big view on click, and the picker in the form */
.review-photo{display:inline-block;align-self:flex-start;margin:.7rem 0 0;border-radius:6px;overflow:hidden;border:1px solid rgba(43,36,25,.25);line-height:0}
.review-photo img{display:block;width:64px;height:64px;object-fit:cover;transition:transform .2s ease}
.review-photo:hover img{transform:scale(1.05)}
.review-photo:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ph-lightbox{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;background:rgba(28,27,25,.8);opacity:0;transition:opacity .2s ease}
.ph-lightbox[hidden]{display:none}
.ph-lightbox.is-open{opacity:1}
.ph-lightbox img{max-width:100%;max-height:88vh;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.4);background:#FBF6E8}
.ph-lightbox-close{position:absolute;top:calc(1rem + env(safe-area-inset-top,0px));right:1rem;width:2.6rem;height:2.6rem;padding:.5rem;border:none;border-radius:50%;background:rgba(251,246,232,.92)}
.ph-lightbox-close svg{width:100%;height:100%;fill:none;stroke:#1C1B19;stroke-width:1.6;stroke-linecap:round}
.review-photo-pick{display:flex;align-items:center;gap:.8rem}
.review-photo-pick input{position:absolute;opacity:0;width:1px;height:1px}
.review-photo-btn{display:inline-block;padding:.55rem 1rem;border:1px dashed rgba(43,36,25,.4);border-radius:6px;background:#F3F1EC;color:var(--ink)}
.review-photo-pick input:focus-visible+.review-photo-btn{outline:2px solid var(--amber);outline-offset:2px}
.review-photo-preview{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid rgba(43,36,25,.25)}
.review-photo-remove{margin-top:.4rem;padding:0;background:none;border:none;color:var(--ink-soft);text-decoration:underline;font:inherit;font-size:.9rem}
@media (prefers-reduced-motion:reduce){.ph-lightbox{transition:none}.review-photo img{transition:none}}

/* ---------- Blog posts (Collector of the Month and other features): a scrapbook page ---------- */
:root{--sb-pink:#D49A93;--sb-green:#8FA36A;--sb-green-deep:#6F8650}
body.single-post{background:#F1E9D9 url("assets/images/scrapbook/paper.webp") center top/100% auto repeat-y}
.ph-post{position:relative;overflow:hidden;padding:1.6rem 1rem 4rem}
.post-hero{max-width:1100px;margin:0 auto 1rem}
.post-hero-img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 14px 34px rgba(54,42,27,.18)}

/* title in a scatter of stars */
.post-head{position:relative;max-width:1100px;margin:0 auto;min-height:260px;display:flex;align-items:center;justify-content:center;padding:3rem 1rem}
.post-title-stars{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.post-title{position:relative;margin:0;max-width:760px;text-align:center;font-family:var(--hand);font-style:normal;font-weight:500;font-size:clamp(2.2rem,6.4vw,4rem);line-height:1.15;
  color:#F4EDDD;-webkit-text-stroke:2px #7F9660;paint-order:stroke fill}
@supports not (-webkit-text-stroke:1px black){.post-title{color:var(--sb-green)}}

/* questions and answers */
.post-body{position:relative;max-width:1000px;margin:0 auto;color:var(--sb-green-deep);font-family:var(--hand);font-style:normal;font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.42}
.post-body>*{max-width:none;position:relative;z-index:1}
.post-body p{margin:0 0 1.2rem;text-align:center;padding-left:clamp(0rem,8vw,7rem)}
.post-body h2,.post-body h3{clear:both;color:var(--sb-pink);font-family:var(--hand);font-style:normal;font-weight:500;text-align:left;margin:2.4rem 0 .9rem;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.2;max-width:560px}
.post-body strong{color:var(--sb-green-deep)}
.post-body a{color:var(--sb-green-deep)}
/* card photos sit at the left beside the answer, like in the design */
.post-body figure,.post-body .wp-block-image{margin:0;clear:left}
.post-body img:not(.post-doodle),.post-body .wp-block-image img{width:200px;max-width:34%;height:auto;float:left;margin:.2rem 1.4rem .8rem 0;border-radius:8px;box-shadow:0 6px 16px rgba(54,42,27,.2);transform:rotate(-2deg)}
.post-body figure:nth-of-type(even) img{transform:rotate(1.5deg)}
.post-body p:has(+ figure),.post-body figure + p{padding-left:0}
.post-body::after{content:'';display:block;clear:both}
.post-doodle{position:absolute;z-index:0;pointer-events:none;width:120px;height:auto;opacity:.95}
.doodle-left{left:-60px;top:6%;transform:rotate(-12deg)}
.doodle-right{right:-50px;top:30%;transform:scaleX(-1) rotate(-8deg)}

.post-nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;max-width:900px;margin:3.6rem auto 0;font-family:var(--hand);font-style:normal}
.post-nav a{color:var(--sb-green-deep);text-decoration:none}
.post-nav a:hover{color:var(--sb-pink)}
.post-nav-home{font-style:normal;letter-spacing:.14em;text-transform:uppercase;font-size:.9rem;padding:.55rem 1rem;border:1.5px solid var(--sb-pink);border-radius:999px}
.post-nav-prev,.post-nav-next{flex:1 1 0;min-width:0}
.post-nav-next{text-align:right}
@media (max-width:760px){
  .post-head{min-height:180px;padding:2rem .5rem}
  .post-body{font-size:1.12rem}
  .post-body p{padding-left:0}
  .post-body img:not(.post-doodle),.post-body .wp-block-image img{float:none;display:block;width:60%;max-width:240px;margin:.4rem auto 1rem}
  .post-doodle{width:70px}.doodle-left{left:-30px}.doodle-right{right:-28px}
  .post-nav{flex-direction:column;text-align:center}.post-nav-next{text-align:center}
}

/* Design mode: Emily's own designed images, shown exactly as made, stacked edge to edge */
/* a little narrower than the screen on computers, so the paper frames the design */
.ph-post.is-design{padding:1.6rem 1rem 4rem}
.ph-post.is-design .design-img,.design-pages img{display:block;width:100%!important;max-width:100%;height:auto!important;margin:0 auto;border-radius:0;box-shadow:none;float:none;transform:none}
.design-pages{max-width:960px;margin:0 auto;box-shadow:0 14px 34px rgba(54,42,27,.16)}
.design-pages>*{margin:0 auto!important;max-width:100%!important;width:100%}
@media (max-width:760px){.ph-post.is-design{padding:0 0 3rem}.design-pages{box-shadow:none}}
.design-pages figure{margin:0 auto}
.design-pages p:empty{display:none}
.ph-post.is-design .post-nav{padding:0 1rem}

/* version picker beside the Add button (cards that come in more than one condition) */
.ph-var-add{display:inline-flex;align-items:center;gap:.3rem;max-width:100%}
.ph-var-pick{max-width:7.5rem;padding:.2rem 1.4rem .2rem .4rem;font-size:.72rem;border-radius:6px;background-position:right .3rem center}
@media (max-width:639px){.ph-var-add{flex-direction:column;align-items:stretch}.ph-var-pick{max-width:100%;font-size:.6rem}}

/* footer: thin outline Instagram and TikTok icons above the policy links */
.footer-social{display:flex;justify-content:center;gap:1.4rem;margin:0 auto 1.1rem}
.footer-social a{display:inline-flex;padding:.3rem;border-radius:50%}
.footer-social svg{width:1.6rem;height:1.6rem;fill:none;stroke:#1C1B19;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.footer-social svg .dot{fill:#1C1B19;stroke:none}
.footer-social a:hover svg{transform:translateY(-2px);stroke:var(--moss-deep)}
.footer-social a:hover svg .dot{fill:var(--moss-deep)}
@media (prefers-reduced-motion:reduce){.footer-social svg{transition:none}}