/* Document previews: quiet paper compositions, with honest preparation labels. */
.materials-showcase { margin-top: 48px; color: var(--ink); }
.materials-intro { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 26px; }
.materials-intro h3 { font-size: 38px; line-height: 1.1; }
.materials-intro > p { margin: 0; font-size: 12px; color: #685555; }
.materials-collections { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.materials-collection { min-width: 0; padding-top: 15px; border-top: 1px solid #b99d98; }
.materials-collection-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 21px; }
.materials-collection-heading h4 { margin: 0; font: 500 30px/1.1 var(--serif); color: var(--wine); letter-spacing: -.5px; }
.materials-collection-heading > p { margin: 0; font-size: 12px; color: #5c4248; }
.materials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px 20px; }
.material-item { min-width: 0; }
.material-scene { height: 175px; display: flex; justify-content: center; align-items: center; padding: 12px; background: #e5d5ca; overflow: hidden; }
.material-item figcaption { margin-top: 11px; }
.material-item figcaption strong, .material-extra-examples figcaption strong { display: block; font-size: 13px; line-height: 1.4; font-weight: 600; }
.material-item figcaption > span, .material-extra-examples figcaption > span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: #675555; }
.material-sheet { background: #fffdf9; width: 100%; max-width: 225px; padding: 14px 13px 10px; box-shadow: 1px 3px 8px #573c3424; }
.material-masthead { display: block; color: #73515a; font: 500 7px/1.4 var(--sans); letter-spacing: 1px; text-transform: uppercase; }
.material-sheet > strong { display: block; margin-top: 6px; font: 500 21px/1.1 var(--serif); color: var(--wine); }
.material-workbook { transform: rotate(-3deg); max-width: 260px; }
.material-mini-table { display: grid; grid-template-columns: 1.4fr 1fr 1fr; margin-top: 10px; font-size: 7px; line-height: 1.3; }
.material-mini-table > * { padding: 5px 4px; border-right: 1px solid #dfd1c8; border-bottom: 1px solid #dfd1c8; }
.material-mini-table > :nth-child(-n+3) { background: #692b3e; color: #fff7f0; }
.material-mini-table > :nth-child(6n+4), .material-mini-table > :nth-child(6n+5), .material-mini-table > :nth-child(6n+6) { background: #f3ece5; }
.material-sheet-tabs { display: flex; gap: 8px; font-size: 6px; color: #73515a; margin-top: 6px; }
.material-sheet-tabs > :first-child { border-bottom: 1px solid #692b3e; }
.material-scene-guide { background: #e3cec5; }
.material-guide { position: relative; width: 165px; height: 153px; padding: 14px 15px 10px; border-left: 4px solid #512032; background: #692b3e; color: #fff8f0; transform: rotate(5deg); box-shadow: 2px 1px 0 #eee3d6, 4px 2px 0 #86555d, 8px 5px 9px #573c3429; }
.material-guide .material-masthead { color: #f5dcd2; font-size: 6px; letter-spacing: .6px; }
.material-guide > strong { display: block; margin-top: 13px; font: 500 22px/1.05 var(--serif); }
.material-guide em { color: #f1cabd; }
.material-guide-rule { display: block; width: 31px; margin-top: 11px; border-top: 1px solid #ba8d87; }
.material-guide-subtitle { display: block; margin-top: 8px; font-size: 7px; line-height: 1.4; color: #f4e0d8; }
.material-guide-edition { display: block; margin-top: 11px; font-size: 5px; letter-spacing: 1.3px; color: #f4e0d8; }
.material-scene-example { background: #e6d9cf; }
.material-example { transform: rotate(2deg); }
.material-example > strong { font-size: 20px; margin-bottom: 10px; }
.material-example-line { display: flex; justify-content: space-between; gap: 4px; align-items: center; border-bottom: 1px solid #e5d8cd; padding: 5px 0; font-size: 8px; }
.material-example-line b { font-weight: 500; }
.material-example-line i { font-style: normal; font-size: 7px; background: #f0e1d6; padding: 2px 4px; }
.material-margin-note { width: fit-content; padding: 5px 8px; margin: 7px 0 0 auto; background: #f4e6ca; color: #694537; font: italic 13px/1.1 var(--serif); transform: rotate(-4deg); }
.material-scene-lessons { background: #dfc9c1; }
.material-lesson-outline { width: 100%; max-width: 225px; padding: 12px; border: 1px solid #bda09a; background: #f4e9e0; }
.material-lesson-outline > strong { display: block; color: var(--wine); font: 500 21px/1.1 var(--serif); margin: 7px 0 6px; }
.material-lesson-outline > div { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #d9c7bb; font-size: 8px; }
.material-lesson-outline > div > span { color: #835963; font: italic 15px/1 var(--serif); }
.material-lesson-outline p { margin: 0; font-size: inherit; line-height: 1.4; }
.material-preparation { display: block; margin-top: 8px; color: #694651; font-size: 8px; }
.material-scene-questions { position: relative; background: #e1ccc3; }
.material-question-card { z-index: 1; position: relative; width: 190px; background: #fff9f1; padding: 15px 12px 12px; border: 1px solid #d7c2b6; transform: rotate(-4deg); box-shadow: 1px 3px 8px #573c341c; }
.material-question-back { position: absolute; z-index: 0; width: 180px; height: 110px; transform: rotate(8deg); background: #bd9390; border-color: #b28583; }
.material-question-card > strong { display: block; margin: 8px 0 5px; font: 500 23px/1 var(--serif); color: var(--wine); }
.material-question-card > p { font-size: 9px; line-height: 1.5; }
.material-answer-line { display: block; color: #7a625f; font-size: 7px; border-bottom: 1px solid #cbb5a8; margin-top: 10px; padding-bottom: 4px; }
.material-scene-email { background: #e7dad0; }
.material-email { transform: rotate(3deg); }
.material-email-subject { display: block; padding: 7px 0; margin-bottom: 6px; border-bottom: 1px solid #decec4; font-size: 8px; line-height: 1.4; color: #692b3e; }
.material-email p, .material-email-signoff { font-size: 8px; line-height: 1.5; }
.material-email p + p { margin-top: 5px; }
.material-email-signoff { display: block; margin-top: 7px; color: #73515a; }
.material-scene-payments { background: #e4d6ca; }
.material-payments { transform: rotate(-3deg); }
.material-payment-heading, .material-payment-row { display: grid; grid-template-columns: 1.3fr 1fr 25px; gap: 9px; align-items: center; font-size: 8px; }
.material-payment-heading { margin-top: 10px; padding: 4px 0; color: #692b3e; border-block: 1px solid #ceb9aa; }
.material-payment-row { padding: 7px 0; border-bottom: 1px solid #ded0c5; }
.material-payment-row i { border-bottom: 1px solid #ceb9aa; }
.material-payment-row b { width: 8px; height: 8px; border: 1px solid #bda195; }
.material-payment-note { display: block; margin-top: 8px; color: #73515a; font: italic 13px/1.2 var(--serif); }
.material-scene-priorities { background: #dec5bc; }
.material-priorities { position: relative; width: 167px; height: 146px; transform: rotate(4deg); }
.material-priorities > strong { font-size: 29px; line-height: .92; margin-top: 8px; }
.material-priority-prompt { display: block; font-size: 8px; margin-top: 12px; }
.material-writing-line { display: block; margin-top: 8px; width: 76%; border-bottom: 1px solid #d7c3b4; }
.material-priorities img { position: absolute; right: 9px; top: 41px; width: 39px; height: 40px; object-fit: contain; background: transparent; }
.material-extra-examples { display: flex; align-items: center; gap: 20px; margin-top: 20px; padding: 14px 0 0; border-top: 1px solid #c5aaa0; }
.material-example-stack { position: relative; display: flex; align-items: center; flex: 0 0 100px; height: 68px; }
.material-example-stack > span { display: block; position: absolute; top: 3px; width: 45px; height: 60px; padding: 8px 5px; background: #fffaf3; border: 1px solid #cbb3a3; color: #692b3e; font-size: 5px; letter-spacing: .7px; box-shadow: 1px 2px 3px #69443519; transform: rotate(-9deg); }
.material-example-stack > span:nth-child(2) { left: 26px; top: 0; transform: rotate(0); }
.material-example-stack > span:nth-child(3) { left: 51px; transform: rotate(9deg); }
.material-example-stack b { font: italic 27px/1.2 var(--serif); }
.materials-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #b99d98; margin-top: 26px; padding-top: 12px; }
.materials-footer > p { font-size: 12px; color: #675555; }
.materials-footer .text-link { font-size: 12px; gap: 10px; }
@media (min-width: 900px) { .materials-essential { padding-right: 36px; border-right: 1px solid #d2bdb2; } }
@media (max-width: 899px) {
  .materials-intro { display: block; margin-bottom: 22px; }
  .materials-intro > p { margin-top: 9px; }
  .materials-collections { display: block; }
  .materials-complete { margin-top: 26px; }
  .materials-grid { gap: 19px 12px; }
  .material-scene { height: 150px; padding: 10px; }
  .materials-collection-heading h4 { font-size: 27px; }
  .materials-collection-heading > p { font-size: 11px; }
  .material-extra-examples { gap: 12px; }
  .materials-footer { align-items: flex-start; flex-direction: column; gap: 0; }
}
@media (max-width: 640px) {
  .materials-showcase { margin-top: 30px; }
  .materials-intro { margin-bottom: 12px; }
  .materials-intro h3 { max-width: 300px; font-size: 31px; }
  .materials-intro > p { font-size: 11px; }
  .materials-collections { display: block; }
  .materials-collection { padding-top: 12px; }
  .materials-complete { margin-top: 18px; }
  .materials-collection-heading { margin-bottom: 12px; }
  .materials-collection-heading h4 { font-size: 24px; }
  .materials-collection-heading > p { font-size: 11px; }
  .materials-grid { gap: 12px; }
  .material-scene { height: 122px; padding: 9px; }
  .material-item figcaption { margin-top: 8px; }
  .material-item figcaption strong, .material-extra-examples figcaption strong { font-size: 12px; line-height: 1.35; }
  .material-item figcaption > span, .material-extra-examples figcaption > span { margin-top: 3px; font-size: 11px; line-height: 1.45; }
  .material-sheet { padding: 9px 9px 7px; }
  .material-masthead { font-size: 6px; letter-spacing: .7px; }
  .material-sheet > strong { font-size: 17px; }
  .material-mini-table { margin-top: 7px; font-size: 6px; }
  .material-mini-table > * { padding: 3px; }
  .material-sheet-tabs { margin-top: 4px; gap: 7px; font-size: 5px; }
  .material-guide { width: 126px; height: 111px; padding: 10px; }
  .material-guide .material-masthead { font-size: 4.5px; letter-spacing: .4px; }
  .material-guide > strong { font-size: 17px; margin-top: 9px; }
  .material-guide-rule { margin-top: 8px; }
  .material-guide-subtitle { font-size: 5.5px; margin-top: 6px; }
  .material-guide-edition { font-size: 4px; margin-top: 6px; }
  .material-example > strong { font-size: 16px; margin-bottom: 5px; }
  .material-example-line { font-size: 6px; padding: 3px 0; }
  .material-example-line i { font-size: 5.5px; padding: 2px; }
  .material-margin-note { font-size: 11px; padding: 4px 6px; margin-top: 5px; }
  .material-lesson-outline { padding: 9px 8px; }
  .material-lesson-outline .material-masthead { font-size: 5px; letter-spacing: .3px; }
  .material-lesson-outline > strong { font-size: 18px; margin: 6px 0 4px; }
  .material-lesson-outline > div { padding: 4px 0; font-size: 7px; gap: 6px; }
  .material-lesson-outline > div > span { font-size: 12px; }
  .material-preparation { font-size: 7px; margin-top: 6px; }
  .material-question-card { padding: 10px 9px 8px; }
  .material-question-card > strong { font-size: 20px; margin: 7px 0 5px; }
  .material-question-card > p { font-size: 7px; }
  .material-question-back { width: 135px; height: 90px; }
  .material-answer-line { margin-top: 7px; font-size: 6px; padding-bottom: 3px; }
  .material-email-subject { font-size: 6px; padding: 5px 0; margin-bottom: 5px; }
  .material-email p, .material-email-signoff { font-size: 6px; }
  .material-email-signoff { margin-top: 5px; }
  .material-payment-heading, .material-payment-row { font-size: 6px; gap: 5px; grid-template-columns: 1.3fr 1fr 18px; }
  .material-payment-heading { margin-top: 7px; }
  .material-payment-row { padding: 5px 0; }
  .material-payment-note { margin-top: 6px; font-size: 10px; }
  .material-priorities { width: 120px; height: 110px; }
  .material-priorities > strong { font-size: 23px; margin-top: 5px; }
  .material-priority-prompt { font-size: 6px; margin-top: 9px; }
  .material-writing-line { margin-top: 6px; }
  .material-priorities img { top: 29px; right: 7px; width: 28px; height: 29px; }
  .material-extra-examples { margin-top: 15px; padding-top: 10px; gap: 15px; }
  .material-example-stack { flex-basis: 84px; height: 62px; }
  .material-example-stack > span { width: 39px; height: 53px; font-size: 4px; padding: 6px 4px; }
  .material-example-stack > span:nth-child(2) { left: 21px; }
  .material-example-stack > span:nth-child(3) { left: 42px; }
  .material-example-stack b { font-size: 25px; }
  .materials-footer { margin-top: 12px; padding-top: 6px; }
  .materials-footer > p { font-size: 11px; }
  .materials-footer .text-link { font-size: 11px; line-height: 1.4; }
}