/* Grammar of Poetry (0.18.0, look "product_poetry"): /store/grammar-of-poetry/ and /poetry/, after product.css. The
   course's own art: the watercolour sky with the branch and the balloon, the red Bodoni title (Bodoni Moda), Source
   Serif for reading, Nunito Sans for the box. Sections in lib/render/sections/poetry.js; the product kit's look
   inside, questions and shelf take the palette from the variables below. */

@font-face{font-family:"Bodoni Moda";src:url(fonts/bodoni-moda-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(fonts/bodoni-moda-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(fonts/bodoni-moda-italic.woff2) format("woff2");font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

.th-product_poetry{
  --po-red:#A3182E;--po-red2:#861225;--po-sky:#E6F3FA;--po-sky2:#BFE0F1;--po-sea:#2D7FB0;--po-leaf:#4F7A22;--po-navy:#1B2540;--po-amber:#F0A65E;
  --po-ink:#1B2532;--po-ink2:#46505E;--po-ink3:#5F6875;--po-rule:#E3E7EC;--po-rule2:#CDD5DE;
  --po-bod:"Bodoni Moda",Didot,"Times New Roman",serif;--po-read:"Source Serif 4",Georgia,serif;
  --cta:var(--po-red);--ctah:var(--po-red2);--tint:var(--po-sky);--link:var(--po-red);--rule:var(--po-rule);
  --pd-red:var(--po-red);--pd-soft:#FFF5F6;--pd-text:var(--po-ink2);--disp:var(--po-bod);
}
.th-product_poetry .bg-tint{background:var(--po-sky)}

/* ---------- the shared heads ---------- */
.po-eb{margin:0 0 10px;font:800 12.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--po-red)}
.po-h2{margin:0 0 14px;font:500 clamp(32px,4vw,44px)/1.1 var(--po-bod);color:var(--po-ink);letter-spacing:-.005em}
.po-h2 em{font-weight:400}
.po-intro{margin:0 0 34px;max-width:720px;font:18px/1.55 var(--po-read);color:var(--po-ink2)}
.po-src{font:700 13px/1.3 var(--sans);color:var(--po-ink3);white-space:nowrap}
.po-cta{display:flex;justify-content:center;align-items:center;min-height:52px;border-radius:999px;background:var(--po-red);color:#fff;font:800 17px/1.2 var(--sans);text-decoration:none;border:0;cursor:pointer;width:100%;padding:0 22px}
.po-cta:hover{background:var(--po-red2);color:#fff}
.po-cta:disabled{background:#B6BDC6;cursor:default}
.po-cta.inline{display:inline-flex;width:auto;min-height:46px;font-size:15.5px}
.po-cta.gold{background:var(--po-amber);color:var(--po-navy)}
.po-cta.gold:hover{background:#fff;color:var(--po-navy)}

/* ---------- the sky ---------- */
.po-sky{position:relative;min-height:400px;background:var(--po-sky);border-bottom:1px solid var(--po-sky2);overflow:hidden}
.po-sky-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center}
.po-sky-in{position:relative;min-height:400px}
.po-crumbs{position:absolute;top:16px;left:max(var(--gut), calc((100% - 1120px) / 2 + var(--gut)));display:flex;flex-wrap:wrap;gap:6px 9px;background:rgba(255,255,255,.88);border-radius:999px;padding:6px 14px;font:700 14px/1.3 var(--sans);color:var(--po-ink)}
.po-crumbs a{color:var(--po-red);text-decoration:none}
.po-crumbs a:hover{text-decoration:underline}
.po-crumbs span[aria-hidden]{color:var(--po-ink3);font-weight:400}
/* the title sits where the art leaves room for it, right of the branch: two thirds across the picture */
.po-sky-in{position:static}
.po-ttl{position:absolute;left:66%;right:2%;top:24%}
.po-title{margin:0;display:flex;flex-direction:column;color:var(--po-red);font-family:var(--po-bod);font-weight:500}
.po-t1{font-size:min(46px,3.2vw);line-height:1;letter-spacing:-.005em}
.po-t1 i{font-weight:400}
.po-t2{margin-top:2px;font-size:min(104px,7vw);line-height:.95;letter-spacing:.02em}
.po-by{margin-top:14px;font:800 min(13px,1.1vw)/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--po-ink)}

/* ---------- under the sky: the words, and the box rising into it ---------- */
.po-main{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:56px;align-items:start;padding-bottom:64px}
.po-main.alone{grid-template-columns:minmax(0,760px)}
.po-main.cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:48px}
.po-main.cards .po-words{padding-top:0}
.po-words{padding-top:40px;display:flex;flex-direction:column;gap:18px}
.po-lede{font:21px/1.5 var(--po-read);color:var(--po-ink)}
.po-lede strong,.po-lede b{font-weight:600}
.po-p{font:17px/1.6 var(--po-read);color:var(--po-ink2)}
.po-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;font:700 14px/1.3 var(--sans);color:var(--po-ink)}
.po-pills li{background:var(--po-sky);border:1px solid var(--po-sky2);border-radius:999px;padding:6px 12px}
.po-vid{display:flex;flex-direction:row;gap:16px;align-items:center;text-decoration:none;color:var(--po-ink);border:1px solid var(--po-rule);border-radius:10px;padding:10px;max-width:470px;background:#fff}
.po-vid:hover{border-color:var(--po-red)}
.po-vid .vimg{position:relative;flex:0 0 150px;width:150px;height:84px;display:block;border-radius:6px}
.po-vid .vimg img{width:150px;height:84px;object-fit:cover;border-radius:6px}
.po-pb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--po-red);color:#fff;display:flex;align-items:center;justify-content:center}
.po-pb.big{width:64px;height:64px}
.po-pb svg{margin-left:2px}
.po-vt b{display:block;font:800 15px/1.3 var(--sans)}
.po-vt small{font:13px/1.3 var(--sans);color:var(--po-ink3)}

/* the box */
.po-side{min-width:0}
.po-box{margin-top:-70px;position:relative;background:#fff;border:1px solid var(--po-rule2);border-radius:14px;box-shadow:0 18px 50px rgba(27,37,50,.14);padding:24px;display:flex;flex-direction:column;gap:14px;font-family:var(--sans);color:var(--po-ink)}
.po-box-h{margin:0;font:600 26px/1.15 var(--po-bod);color:var(--po-ink)}
.po-hint{margin-top:4px;font-size:14.5px;color:var(--po-ink3)}
.po-rowwrap{display:flex;flex-direction:column;gap:10px}
.po-row{display:grid;grid-template-columns:24px 46px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1.5px solid var(--po-rule);border-radius:10px;cursor:pointer;background:#fff}
.po-row.on{border-color:var(--po-red);background:#FFF8F8}
.po-row.off{cursor:default;opacity:.7}
.po-row input{width:20px;height:20px;margin:0;accent-color:var(--po-red)}
.po-row-img{width:46px;height:64px;object-fit:cover;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.25);background:var(--po-sky)}
.po-n{font-weight:800;font-size:15.5px;line-height:1.25}
.po-n small{display:block;font-weight:400;font-size:13px;line-height:1.35;color:var(--po-ink3);margin-top:2px}
.po-pr{font-weight:800;font-size:16px;white-space:nowrap}
.po-step{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-left:36px;font-size:14px;font-weight:700;color:var(--po-ink2)}
.po-ctl{display:inline-flex;align-items:center;border:1.5px solid var(--po-rule2);border-radius:999px;overflow:hidden;background:#fff}
.po-ctl button{width:44px;height:40px;border:0;background:#fff;font-size:20px;line-height:1;color:var(--po-ink);cursor:pointer}
.po-ctl button:disabled{color:#B6BDC6;cursor:default}
.po-ctl output{min-width:30px;text-align:center;font-size:16px;font-weight:800;color:var(--po-ink)}
.po-ea{font-weight:400;color:var(--po-ink3)}
.po-note{display:flex;gap:10px;align-items:flex-start;background:var(--po-sky);border:1px solid var(--po-sky2);border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.45;color:var(--po-ink)}
.po-note svg{flex:0 0 auto;margin-top:1px;color:var(--po-sea)}
.po-sum{font-size:14px;line-height:1.45;color:var(--po-ink2)}
.po-sum b{color:var(--po-ink)}
.po-tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--po-rule);padding-top:14px;font-size:15px;font-weight:800}
.po-tv{font:600 34px/1 var(--po-bod);color:var(--po-ink)}
.po-cta.busy{opacity:.7}
.po-msg{font-size:14px;color:var(--po-red);min-height:0}
.po-msg:empty{display:none}
.po-afterline{margin:0;font-size:13.5px;color:var(--po-ink3);text-align:center}
.po-afterline a{color:var(--po-ink2)}

/* the ways to buy (/poetry/) */
.po-ways{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.po-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%}
.po-card{border:1.5px solid var(--po-rule);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px;font-family:var(--sans);background:#fff;text-decoration:none;color:var(--po-ink)}
.po-card:hover{border-color:var(--po-red);color:var(--po-ink)}
.po-card.star{border-color:var(--po-red);background:#FFF8F8}
.po-card b{font-size:15.5px}
.po-card small{font-size:13px;color:var(--po-ink3)}
.po-card-pr{margin-top:6px;font:600 28px/1.1 var(--po-bod)}
.po-card-sv{font-size:13px;font-weight:800;color:#2D6A1F}

/* ---------- cards with a word ---------- */
.po-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.po-trio.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.po-trio.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.po-pm{background:#fff;border-radius:14px;padding:26px 26px 24px;border:1px solid var(--po-sky2);display:flex;flex-direction:column;gap:10px}
.po-w{font:400 34px/1 var(--po-bod);color:var(--po-red)}
.po-pm p{font:16px/1.55 var(--po-read);color:var(--po-ink2)}
.po-tags{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.po-tags li{font:700 12.5px/1.3 var(--sans);background:var(--po-sky);border-radius:999px;padding:4px 10px;color:var(--po-ink)}
.bg-tint .po-tags li{background:#EEF6FB}

/* ---------- the parts ---------- */
.po-piece{display:flex;flex-direction:column;gap:14px;border:1px solid var(--po-rule);border-radius:14px;padding:22px;background:#fff}
.po-piece-pic{height:210px;display:flex;align-items:flex-end;justify-content:center;background:var(--po-sky);border-radius:10px;padding-top:18px;overflow:hidden}
.po-piece-pic img{height:190px;width:auto;box-shadow:0 6px 18px rgba(0,0,0,.22);border-radius:2px}
.po-piece-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.po-piece h3{font:600 23px/1.2 var(--po-bod);color:var(--po-ink)}
.po-piece .po-pr{font-family:var(--sans);font-size:17px}
.po-piece p{font:15.5px/1.55 var(--po-read);color:var(--po-ink2)}
.po-piece ul{margin:0;padding-left:18px;font:15px/1.5 var(--po-read);color:var(--po-ink2);display:flex;flex-direction:column;gap:4px}
.po-bunline{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--po-ink);color:#D7DEE6;border-radius:14px;padding:18px 24px;font:15px/1.4 var(--sans)}
.po-bunline strong,.po-bunline b{color:#fff;font-size:17px}

/* ---------- free videos ---------- */
.po-fv{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.po-fv-stage .vcard{position:relative;display:block;border-radius:10px;overflow:hidden;background:#000;color:#fff;text-decoration:none}
.po-fv-stage .vimg{display:block;position:relative}
.po-fv-stage img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.94}
.po-cap{position:absolute;left:0;right:0;bottom:0;padding:24px 18px 14px;background:linear-gradient(transparent,rgba(0,0,0,.65));font:800 15px/1.3 var(--sans);color:#fff}
.po-fv-list{display:flex;flex-direction:column;gap:10px}
.po-fvi{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;text-align:left;border:1.5px solid transparent;border-radius:10px;background:#fff;padding:8px;cursor:pointer;font-family:var(--sans);color:var(--po-ink)}
.po-fvi:hover{border-color:var(--po-rule2)}
.po-fvi.on{border-color:var(--po-red)}
.po-fvi img,.po-fvi-blank{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--po-sky2)}
.po-fvi b{display:block;font-size:14.5px;line-height:1.3}
.po-fvi small{font-size:13px;color:var(--po-ink3)}

/* ---------- the lessons ---------- */
.po-mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px}
.po-mod{border-top:2px solid var(--po-ink);padding-top:12px}
.po-mod h3{margin:0 0 8px;font:800 13px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--po-red)}
.po-mod ol{margin:0;padding:0;list-style:none;font:15px/1.4 var(--sans)}
.po-mod li{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--po-rule)}
.po-no{color:var(--po-ink3);font-weight:700}
.po-lt{font-weight:700;color:var(--po-ink)}
.po-lt small{font-weight:400;color:var(--po-ink3)}
.po-len{color:var(--po-ink3);font-variant-numeric:tabular-nums}
.po-free{font-size:12px;font-weight:800;color:#fff;background:var(--po-leaf);border-radius:999px;padding:2px 8px}

/* ---------- the quotation and the close, on the sky ---------- */
.po-qt,.po-close{position:relative;overflow:hidden;background:var(--po-sky)}
.po-qt .po-sky-img{object-position:center 70%}
.po-qt-in{position:relative;padding-block:96px}
.po-qt blockquote{margin:0 0 0 auto;max-width:620px;background:rgba(255,255,255,.93);border-radius:14px;padding:30px 34px}
.po-qt blockquote p{margin:0 0 12px;font:500 30px/1.3 var(--po-bod);color:var(--po-ink)}
.po-qt cite{font:normal 700 14px/1.3 var(--sans);color:var(--po-ink3)}
.po-close{border-top:1px solid var(--po-sky2)}
.po-close-in{position:relative;min-height:300px;display:flex;align-items:center;justify-content:flex-end;padding-block:40px}
.po-close-card{background:#fff;border-radius:16px;padding:28px 32px;max-width:440px;box-shadow:0 18px 50px rgba(27,37,50,.14);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.po-close-card h2{font:500 34px/1.1 var(--po-bod);color:var(--po-red)}
.po-close-card p{font:17px/1.5 var(--po-read);color:var(--po-ink2)}

/* ---------- steps ---------- */
.po-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.po-steps.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.po-steps.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.po-steps.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
.po-stp{border:1px solid var(--po-rule);border-radius:12px;padding:18px;background:#fff;display:flex;flex-direction:column;gap:6px}
.po-stp b{font:800 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--po-red)}
.po-stp p{font:15px/1.5 var(--po-read);color:var(--po-ink2)}

/* ---------- the teacher, the facts ---------- */
.po-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.po-who{display:flex;gap:22px;align-items:flex-start}
.po-mono{flex:0 0 auto;width:96px;height:96px;border-radius:50%;background:#fff;border:2px solid var(--po-sky2);display:flex;align-items:center;justify-content:center;font:500 36px/1 var(--po-bod);color:var(--po-red)}
.po-photo{flex:0 0 auto;width:96px;height:96px;border-radius:50%;object-fit:cover}
.po-who h3{margin:0 0 4px;font:600 28px/1.2 var(--po-bod)}
.po-role{margin:0 0 10px;font:700 14px/1.4 var(--sans);color:var(--po-ink3)}
.po-who p:not(.po-role){font:16.5px/1.6 var(--po-read);color:var(--po-ink2)}
.po-glance{margin:0;display:grid;grid-template-columns:160px minmax(0,1fr);font:15px/1.45 var(--sans)}
.po-glance dt,.po-glance dd{padding:10px 0;border-bottom:1px solid var(--po-rule2);margin:0}
.po-glance dt{font-weight:800;color:var(--po-ink)}
.po-glance dd{color:var(--po-ink2)}

/* ---------- what comes next ---------- */
.po-after{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:32px;align-items:center;background:var(--po-navy);color:#fff;border-radius:16px;padding:30px 36px}
.po-after-cv{width:170px;height:auto;border-radius:3px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.po-after .po-eb{color:var(--po-amber)}
.po-after h3{margin:0 0 8px;font:500 32px/1.15 var(--po-bod);color:#fff}
.po-after p:not(.po-eb){font:17px/1.55 var(--po-read);color:#D5DBE6}

/* ---------- the grid of small cards ---------- */
.po-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.po-m9{background:#fff;border:1px solid var(--po-sky2);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:2px;font-family:var(--sans)}
.po-m9-k{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--po-red)}
.po-m9-t{font:600 22px/1.25 var(--po-bod);color:var(--po-ink)}
.po-m9-s{font-size:14px;color:var(--po-ink2)}

/* ---------- the product kit's sections, in this look ---------- */
.th-product_poetry .pd-spread-frame,.th-product_poetry .bg-tint .pd-spread-frame{background:#D5E6F0}
.th-product_poetry .pd-eyebrow{color:var(--po-red);letter-spacing:.2em}
.th-product_poetry .pd-h2{font:500 clamp(30px,3.6vw,40px)/1.15 var(--po-bod);color:var(--po-ink)}
.th-product_poetry .pd-h2.barred::before{background:var(--po-red)}
.th-product_poetry .pd-aside{border-top-color:var(--po-red);border-radius:0 0 12px 12px}
.th-product_poetry .pd-faq{border-radius:12px;overflow:hidden}
.th-product_poetry .pd-faq-a p,.th-product_poetry .pd-set-head p{font-family:var(--po-read)}
.th-product_poetry .pd-bk h3{font:600 17px/1.3 var(--po-bod)}
.th-product_poetry .pd-ul{border-bottom-color:var(--po-red)}

@media (max-width:900px){
  .po-sky,.po-sky-in{min-height:300px}
  .po-sky .po-sky-img{object-position:100% center}
  .po-ttl{left:auto;right:var(--gut);top:auto;bottom:24px}
  .po-t1{font-size:30px}
  .po-t2{font-size:62px}
  .po-by{font-size:11.5px}
  .po-main,.po-main.cards{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:20px}
  .po-side{order:-1}
  .po-box{margin-top:0}
  .po-words{padding-top:0}
  .po-step{margin-left:0}
  .po-trio,.po-trio.n2,.po-trio.n4,.po-two,.po-fv,.po-mods,.po-steps,.po-steps.n3,.po-steps.n4,.po-steps.n6,.po-grid{grid-template-columns:minmax(0,1fr)}
  .po-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .po-after{grid-template-columns:minmax(0,1fr);padding:24px}
  .po-after-cv{width:120px}
  .po-qt-in{padding-block:48px}
  .po-qt blockquote p{font-size:23px}
  .po-glance{grid-template-columns:120px minmax(0,1fr)}
}
@media (max-width:420px){
  .po-row{grid-template-columns:22px 38px minmax(0,1fr) auto;gap:10px;padding:10px}
  .po-row-img{width:38px;height:53px}
}