/* Eight Takes + Family Notes on Sugarlaws. Shares tokens with style.css and
   the section/tile language of sugarlaws.css (.sl-eyebrow, .sl-kicker,
   .sl-photo, .sl-tile-cap, .sl-guide, .sl-note, .sl-section-head). */
.et-main{padding:56px 0 0}
.et-page h1{font-size:54px;line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.et-page .sl-section-head{margin-top:72px}
.et-crumb{font-family:var(--sl-sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--sl-muted);margin-bottom:22px}
.et-crumb a:hover{color:var(--tone-ink,var(--tone))}
.et-empty{padding:40px 0 80px;max-width:560px}
.et-empty h1{font-size:40px;margin:14px 0 12px}
.et-empty p{color:var(--sl-muted);font-weight:300;margin-bottom:24px}
.et-none{color:var(--sl-muted);font-weight:300;padding:40px 0}

/* ---- prose from the editor ------------------------------------------ */
.et-prose{font-family:var(--sl-serif);font-size:18px;line-height:1.8;color:#1f1f1f;max-width:720px}
.et-prose p,.et-prose div{margin:0 0 1.2em}
.et-prose div:last-child,.et-prose p:last-child{margin-bottom:0}
.et-prose strong{font-weight:600}
.et-prose h2,.et-prose h3{font-family:var(--sl-serif);font-weight:400;font-size:28px;line-height:1.2;margin:1.6em 0 .5em}
.et-prose h3{font-size:22px}
.et-prose ul,.et-prose ol{padding-left:22px;margin:0 0 1.2em}
.et-prose li{margin-bottom:.35em}
.et-prose blockquote{border-left:2px solid var(--tone,var(--sl-ink));margin:1.4em 0;padding:4px 0 4px 20px;font-style:italic;color:#444}
.et-prose img{max-width:100%;height:auto;display:block;margin:28px 0}
.et-prose figure{margin:28px 0}
.et-prose figure.attachment--preview{text-align:center}
.et-prose figure img{margin:0 auto}
.et-prose figcaption,.et-prose .attachment__caption{font-family:var(--sl-sans);font-size:13px;color:var(--sl-muted);font-weight:300;margin-top:8px;text-align:center}
.et-prose .video-embed{position:relative;width:100%;margin:28px 0;padding-top:56.25%;background:#000;overflow:hidden}
.et-prose .video-embed iframe,.et-prose .video-embed video{position:absolute;inset:0;width:100%;height:100%;border:0}
.et-prose a{border-bottom:1px solid var(--sl-hair)}
.et-prose a:hover{border-color:var(--tone,var(--sl-pink));color:var(--tone-ink,var(--tone,var(--sl-pink)))}

/* ---- guide page ------------------------------------------------------ */
.et-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start;margin-bottom:64px}
.et-hero-cover .sl-photo{aspect-ratio:2/3}
.et-hero-cover .sl-photo img{width:100%;height:100%;object-fit:cover}
.et-hero-text h1{margin:12px 0 18px}
.et-blurb{font-family:var(--sl-serif);font-size:19px;line-height:1.6;color:#333;max-width:600px}
.et-chosen{margin-top:36px;padding:26px 28px;background:var(--tint,var(--sl-paper));}
.et-chosen .sl-kicker{color:var(--tone-ink,var(--tone))}
.et-chosen-in{display:grid;grid-template-columns:170px minmax(0,1fr);gap:26px;align-items:start;margin-top:8px}
.et-chosen h2{font-size:24px;line-height:1.25}
.et-prod-img{display:block;aspect-ratio:1/1;background:#fff;padding:12px}
.et-prod-img img{width:100%;height:100%;object-fit:contain;display:block}
.et-prod-meta{font-family:var(--sl-sans);font-size:13px;color:var(--sl-muted);margin:8px 0 12px;letter-spacing:.02em}
.et-prod-blurb{font-size:15px;color:#333;font-weight:300;line-height:1.7;margin-bottom:18px}
.et-chosen .sl-btn{margin-top:4px}
.et-page .sl-btn{display:inline-block;font-family:var(--sl-sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding:14px 22px;border:1px solid var(--sl-ink);line-height:1;transition:background .2s,color .2s}
.et-intro{margin-bottom:24px}
.et-products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.et-prod .et-prod-img{background:var(--sl-paper);margin-bottom:16px}
.et-prod .sl-kicker{color:var(--tone-ink,var(--tone))}
.et-prod h3{font-size:20px;line-height:1.3}
.et-prod .et-prod-meta{margin:6px 0 10px}
.et-prod-link{display:inline-block;font-family:var(--sl-sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--sl-ink);padding-bottom:3px}
.et-prod-link:hover{border-color:var(--tone);color:var(--tone-ink,var(--tone))}
.et-story{margin-top:72px;padding:56px 0;border-top:1px solid var(--sl-hair);border-bottom:1px solid var(--sl-hair)}
.et-story h2{font-size:36px;margin:12px 0 24px}
.et-bottom{margin-top:48px}

/* ---- related tiles --------------------------------------------------- */
.et-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.et-tile{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start;padding:18px 0;border-top:1px solid var(--sl-hair)}
.et-tile-img{display:block;aspect-ratio:2/3;background:var(--sl-paper-deep);overflow:hidden}
.et-tile-img img{width:100%;height:100%;object-fit:cover;display:block}
.et-tile-body{display:block}
.et-tile-title{display:block;font-family:var(--sl-serif);font-size:18px;line-height:1.3}
.et-tile-blurb{display:block;font-size:13px;color:var(--sl-muted);font-weight:300;line-height:1.6;margin-top:6px}
.et-tile-cta{display:inline-block;margin-top:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--sl-ink);padding-bottom:2px}
.et-tile:hover .et-tile-title{color:var(--tone-ink,var(--tone))}
.et-tile:hover .et-tile-cta{border-color:var(--tone);color:var(--tone-ink,var(--tone))}

/* ---- index pages ----------------------------------------------------- */
.et-index-head{max-width:720px;margin-bottom:36px}
.et-index-head h1{margin:12px 0 16px}
.et-index-head .sl-lede a{border-bottom:1px solid var(--sl-hair)}
.et-index-head .sl-lede a:hover{color:var(--tone-ink,var(--tone));border-color:var(--tone)}
.et-chips{display:flex;flex-wrap:wrap;gap:8px 8px;align-items:center;padding-bottom:28px;margin-bottom:40px;border-bottom:2px solid var(--tone,var(--sl-ink))}
.et-chips a{font-family:var(--sl-sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:8px 12px;border:1px solid var(--sl-hair);line-height:1}
.et-chips a:hover{border-color:var(--sl-ink)}
.et-chips a.is-on{background:var(--sl-ink);border-color:var(--sl-ink);color:#fff}
.et-chips-sep{width:1px;height:22px;background:var(--sl-hair);margin:0 8px}
.et-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}
.et-grid .sl-guide .sl-photo{aspect-ratio:2/3}
.et-grid .sl-guide .sl-photo img{width:100%;height:100%;object-fit:cover}
.et-grid .sl-guide.is-product .sl-photo{background:var(--sl-paper)}
.et-grid .sl-guide.is-product .sl-photo img{object-fit:contain;padding:14%}
.et-grid .sl-guide .sl-kicker{color:var(--tone-ink,var(--tone))}
.et-grid .sl-guide h3{font-size:19px;line-height:1.3}
.et-grid .sl-guide:hover h3{color:var(--tone-ink,var(--tone))}
.fn-grid{margin-top:8px}

/* ---- family note ----------------------------------------------------- */
.fn-head{max-width:720px;margin-bottom:36px}
.fn-head h1{margin:12px 0 16px}
.fn-deck{font-family:var(--sl-serif);font-size:20px;line-height:1.5;color:#444}
.fn-hero{margin:0 0 44px;max-width:640px}
.fn-hero img{width:100%;height:auto;display:block;background:var(--sl-paper)}
.fn-body{max-width:720px}
.fn-body div{margin:0}
.fn-body>div:first-child>br:first-child{display:none}
.fn-chosen{max-width:720px;margin-top:48px}

@media (max-width:900px){
  .et-main{padding-top:36px}
  .et-page h1{font-size:36px}
  .et-hero{grid-template-columns:minmax(0,1fr);gap:28px;margin-bottom:44px}
  .et-hero-cover{max-width:360px}
  .et-chosen{padding:20px}
  .et-chosen-in{grid-template-columns:110px minmax(0,1fr);gap:16px}
  .et-chosen h2{font-size:20px}
  .et-products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .et-tiles{grid-template-columns:minmax(0,1fr);gap:0}
  .et-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .et-story{margin-top:48px;padding:40px 0}
  .et-story h2{font-size:28px}
  .et-prose{font-size:17px}
  .et-page .sl-section-head{margin-top:48px}
}
@media (max-width:560px){
  .et-products-grid{gap:24px 12px}
  .et-prod h3{font-size:16px}
  .et-prod-blurb{font-size:13px}
  .et-chosen-in{grid-template-columns:minmax(0,1fr)}
  .et-chosen .et-prod-img{max-width:160px}
}