/* ==========================================================================
   Late Bloomer — handmade layer
   Everything Elementor can't express through its own controls: paper grain,
   tape, tilted cards, the hand-drawn flourishes and the seed packet.
   Colours mirror the Elementor global colors so both stay in step.
   ========================================================================== */

:root{
  --lb-paper:#FAF7EF;
  --lb-card:#FFFFFF;
  --lb-cream:#F7EDD8;
  --lb-ink:#3A2E1C;
  --lb-soft:#6B5A3A;
  --lb-faint:#9A8B6C;
  --lb-sage:#7E8C5A;
  --lb-sage-dk:#5E6B3C;
  --lb-tomato:#C6452F;
  --lb-ochre:#E0A63F;
  --lb-rule:#E6DAC0;
  --lb-dark:#2E2515;
  --lb-shadow:0 1px 0 rgba(58,46,28,.06), 0 12px 26px -20px rgba(58,46,28,.55);
  --lb-hand:"Shantell Sans","Bradley Hand","Segoe Print",cursive;
}

/* --- paper grain over the whole page ------------------------------------ */
body.lb-grain::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  z-index:-1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
/* The grain sits behind the page rather than promoting every body child into
   its own stacking context. The old rule (`body.lb-grain > * {position:relative;
   z-index:1}`) put header, content and footer on the SAME z-index, so DOM order
   decided paint order and the page content covered anything opening out of the
   header — a mega-menu dropdown could never escape, whatever z-index Elementor
   gave it. Only the header is lifted, and only above the content. */
body.lb-grain > header.elementor,
body.lb-grain > .elementor-location-header{position:relative; z-index:100}

/* --- display type: Fraunces' soft + wonk axes are what make it look drawn - */
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-theme-post-title h1,
.elementor-widget-theme-post-title h2,
.lb-display{
  font-variation-settings:"SOFT" 50,"WONK" 1;
  text-wrap:balance;
}
.lb-hero-title{font-variation-settings:"SOFT" 70,"WONK" 1; letter-spacing:-.03em}
.lb-hero-title em{font-style:italic; color:var(--lb-tomato); font-variation-settings:"SOFT" 95,"WONK" 1}

/* --- eyebrow + handwritten note ----------------------------------------- */
.lb-eyebrow p, .lb-eyebrow{margin:0}
.lb-note, .lb-note p{
  font-family:var(--lb-hand) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:15px !important;
  font-weight:400 !important;
}

/* --- buttons ------------------------------------------------------------- */
.lb-btn .elementor-button{
  border-radius:999px;
  font-weight:700;
  padding:13px 26px;
  border:2px solid transparent;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.lb-btn--solid .elementor-button{background:var(--lb-sage-dk); color:#FFFAF0}
.lb-btn--solid .elementor-button:hover{background:var(--lb-sage); color:#FFFAF0}
.lb-btn--accent .elementor-button{background:var(--lb-tomato); color:#FFF6EE}
.lb-btn--accent .elementor-button:hover{background:#A93A26; color:#FFF6EE}
.lb-btn--quiet .elementor-button{background:transparent; color:var(--lb-ink); border-color:var(--lb-rule)}
.lb-btn--quiet .elementor-button:hover{border-color:var(--lb-sage); background:var(--lb-cream); color:var(--lb-ink)}

/* --- flourishes ---------------------------------------------------------
   These are Elementor Divider widgets now (curly / wavy styles), so the shape
   comes from Elementor. Only the spacing is ours. */
.lb-underline{margin-top:-2px}
.lb-horizon{opacity:.85}

/* --- cards --------------------------------------------------------------- */
.lb-card{
  background:var(--lb-card);
  border:1px solid var(--lb-rule);
  border-radius:3px;
  box-shadow:var(--lb-shadow);
}
.lb-tilt-l{transform:rotate(-.7deg)}
.lb-tilt-r{transform:rotate(.6deg)}
.lb-tilt-l,.lb-tilt-r{transition:transform .25s ease}
.lb-tilt-l:hover,.lb-tilt-r:hover{transform:rotate(0) translateY(-4px)}

/* taped corner on the featured episode */
.lb-tape{position:relative}
.lb-tape::before{
  content:"";
  position:absolute; top:-13px; left:50%; margin-left:-56px;
  width:112px; height:26px;
  background:rgba(224,166,63,.5);
  border-left:1px dashed rgba(58,46,28,.22);
  border-right:1px dashed rgba(58,46,28,.22);
  transform:rotate(-2.4deg);
  z-index:2;
}

/* --- loop item: the episode card ---------------------------------------- */
.lb-episode{height:100%}
.lb-episode .elementor-widget-theme-post-featured-image img{
  aspect-ratio:4/3; object-fit:cover; width:100%; border-radius:2px; display:block;
}
.lb-episode:hover{transform:rotate(0) translateY(-4px)}
.lb-episode-title a{color:var(--lb-ink); text-decoration:none}
.lb-episode-title a:hover{color:var(--lb-tomato)}

/* the little play badge sitting on an episode thumbnail */
.lb-thumb{position:relative}
.lb-thumb::after{
  content:"";
  position:absolute; right:14px; bottom:14px;
  width:46px; height:46px; border-radius:50%;
  background:var(--lb-tomato) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFF6EE'><path d='M8 5.5v13l11-6.5-11-6.5Z'/></svg>") no-repeat 55% 50%/16px 16px;
  box-shadow:var(--lb-shadow);
  pointer-events:none;
}

/* --- sow rows (the seasonal band) ---------------------------------------
   Each row is a container with three heading widgets. Only type detail here. */
.lb-sow-crop .elementor-heading-title{font-variation-settings:"SOFT" 40,"WONK" 1}
.lb-sow-days .elementor-heading-title,
.lb-sow-depth .elementor-heading-title{font-variant-numeric:tabular-nums}
.lb-sow-days .elementor-heading-title{white-space:nowrap}

/* The zone pill is a heading widget; the pill is drawn on the title itself so
   it hugs the text instead of stretching across the container. */
.lb-zone .elementor-heading-title{
  display:inline-block;
  font-family:var(--lb-hand) !important;
  font-size:15px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:400 !important;
  border:1.5px dashed var(--lb-rule);
  border-radius:999px;
  padding:5px 16px;
}

/* --- seed packet (e-book offer) -----------------------------------------
   A container of native widgets. The tilt and the inset dashed rule are the
   only things CSS adds; everything inside is editable in the panel. */
.lb-packet{position:relative; box-shadow:var(--lb-shadow); transform:rotate(1.2deg)}
.lb-packet::after{
  content:""; position:absolute; inset:7px;
  border:1px dashed rgba(107,90,58,.45); border-radius:2px; pointer-events:none;
}
.lb-packet > *{position:relative; z-index:1}
.lb-packet .elementor-heading-title{font-variation-settings:"SOFT" 50,"WONK" 1}
.lb-pair:last-child{border-bottom:0 !important}
.lb-pair .elementor-heading-title{font-variant-numeric:tabular-nums}

/* --- category lists: library page and the mega-menu panel ---------------- */
.lb-cat-list .elementor-icon-list-item{padding-block:1px}
.lb-cat-list .elementor-icon-list-text{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px; width:100%;
}
.lb-count{
  font-size:12px; font-weight:700; color:var(--lb-faint);
  font-variant-numeric:tabular-nums;
  background:rgba(224,166,63,.16);
  border-radius:999px; padding:1px 8px; flex:none;
}
.lb-cat-list .elementor-icon-list-item:hover .lb-count{background:rgba(198,69,47,.16); color:var(--lb-tomato)}

/* --- taxonomy filter -----------------------------------------------------
   Pill shape, colours and spacing come from the widget's own controls. What is
   left here is the scroll affordance: a fade at the right edge so a scrolling
   row visibly has more in it, and a hidden scrollbar so it reads as a filter
   bar rather than a scroll pane. */
.lb-filter{position:relative}
.lb-filter .e-filter{
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-block:2px;
  scroll-padding-inline:24px;
}
.lb-filter .e-filter::-webkit-scrollbar{display:none}
.lb-filter::after{
  content:"";
  position:absolute; top:0; right:0; bottom:0;
  width:56px; pointer-events:none;
  background:linear-gradient(to right, rgba(250,247,239,0), var(--lb-paper) 82%);
}
.lb-filter .e-filter-item{
  white-space:nowrap;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.lb-filter .e-filter-item:focus-visible{outline:2.5px solid var(--lb-ochre); outline-offset:2px}

/* --- mega menu panel ------------------------------------------------------ */
.lb-megapanel{border-top:1px solid var(--lb-rule); box-shadow:0 18px 30px -24px rgba(58,46,28,.5)}


/* --- forms --------------------------------------------------------------- */
.lb-form .elementor-field-group .elementor-field{
  background:var(--lb-card);
  border:1.5px solid var(--lb-rule);
  border-radius:2px;
  padding:12px 14px;
  color:var(--lb-ink);
}
.lb-form .elementor-field:focus{border-color:var(--lb-sage); outline:none; box-shadow:0 0 0 3px rgba(126,140,90,.22)}
.lb-form .elementor-field-label{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lb-faint);
}
.lb-form .elementor-button[type="submit"]{
  background:var(--lb-sage-dk); color:#FFFAF0; border-radius:999px; font-weight:700; padding:13px 26px;
}

/* --- single post reading column ----------------------------------------- */
.lb-article p{max-width:68ch}
.lb-article h2, .lb-article h3{margin-top:1.6em}
.lb-article blockquote{
  border-left:3px solid var(--lb-ochre);
  margin:1.8em 0; padding:2px 0 2px 22px;
  font-style:italic; font-size:1.1em; color:var(--lb-ink);
}
.lb-article img{border-radius:3px}
.lb-meta{font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--lb-faint)}

/* --- footer -------------------------------------------------------------- */
.lb-footer a{color:inherit; text-decoration:none; opacity:.82}
.lb-footer a:hover{opacity:1; text-decoration:underline; text-underline-offset:3px}
.lb-footer .elementor-icon-list-item{margin-bottom:9px}
.lb-foot-head{
  font-size:13px !important; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--lb-ochre) !important;
}

/* --- header -------------------------------------------------------------- */
.lb-header{border-bottom:1px solid var(--lb-rule); background:rgba(250,247,239,.92); backdrop-filter:blur(6px)}
.lb-logo .elementor-heading-title{font-size:22px; letter-spacing:-.015em; line-height:1}
.lb-logo em{font-style:normal; color:var(--lb-tomato)}
.lb-tagline, .lb-tagline p{font-family:var(--lb-hand) !important; font-size:11.5px !important; color:var(--lb-faint) !important; text-transform:none !important; letter-spacing:0 !important; margin:2px 0 0}

/* --- responsive ----------------------------------------------------------
   Tilts, tape and the paper grain are desktop garnish. On a phone they cost
   legibility and horizontal space, so they come off. */
@media (max-width:1024px){
  .lb-packet{max-width:none; transform:none; margin-inline:auto}
  .lb-tilt-l,.lb-tilt-r,.lb-episode{transform:none}
  .lb-tilt-l:hover,.lb-tilt-r:hover,.lb-episode:hover{transform:translateY(-3px)}
  .lb-article p{max-width:none}
}

@media (max-width:767px){
  /* No tape on a phone — it collides with the card edge at narrow widths. */
  .lb-tape::before{display:none}

  /* Grain is nearly invisible at phone DPI and costs a fixed layer. */
  body.lb-grain::before{opacity:.03}

  /* Sow rows lose the right gutter once they are full width. */
  .lb-sow-row{padding-right:0 !important}

  /* Smaller play badge so it does not cover the thumbnail. */
  .lb-thumb::after{width:38px; height:38px; right:10px; bottom:10px; background-size:13px 13px}

  /* Long words in display type must not force a sideways scroll. */
  .lb-hero-title .elementor-heading-title,
  .elementor-widget-heading h1,
  .elementor-widget-theme-post-title h1{overflow-wrap:break-word; hyphens:auto}

  /* Buttons go full width so they are thumb-sized, and stack cleanly. */
  .lb-btn .elementor-button{width:100%; justify-content:center; padding:14px 20px}
  .lb-subscribe .elementor-button{width:auto; padding:9px 16px}

  /* The header wordmark and its subscribe button share one tight row. */
  .lb-logo .elementor-heading-title{font-size:19px}

  /* Footer stacks; keep the columns readable rather than hairline-thin. */
  .lb-footer .elementor-icon-list-item{margin-bottom:11px}

  /* Packet inset rule tightens with the smaller padding. */
  .lb-packet::after{inset:5px}

  /* Let the filter row run to the screen edge so it reads as scrollable. */
  .lb-filter .e-filter{margin-inline:-16px; padding-inline:16px}
  .lb-filter::after{width:36px}
  .lb-megapanel{box-shadow:none; padding:20px 16px !important}
}

/* Nothing may push the page sideways. */
html, body{overflow-x:hidden}
img, iframe, video{max-width:100%}
@media (prefers-reduced-motion: reduce){
  .lb-tilt-l,.lb-tilt-r,.lb-episode,.lb-btn .elementor-button{transition:none}
}