*{box-sizing:border-box}
:root{--ink:#111;--paper:#f4e7c7;--pink:#ff2c8c;--yellow:#ffda16;--brick:#723025}
html{background:var(--brick)}
body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;background:repeating-linear-gradient(0deg,#783528 0,#783528 42px,#5a251e 43px,#5a251e 46px)}
body.modal-open{overflow:hidden}

.examples-hero{width:min(1180px,96vw);margin:14px auto 12px;padding:12px 18px;background:var(--paper);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.eyebrow{margin:0 0 4px;font-size:12px;font-weight:1000;letter-spacing:.10em}
.examples-hero h1{margin:0;font-size:clamp(30px,5vw,55px);line-height:.9;letter-spacing:-.05em}
.examples-hero h1 span{color:var(--pink)}
.intro{margin:7px 0 0;font-size:13px;line-height:1.2;font-weight:700}

.examples-grid{width:min(1180px,96vw);margin:0 auto 40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.example-card{min-width:0;overflow:hidden;background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.example-card-bonus{grid-column:2}

.example-open{position:relative;display:block;width:100%;height:116px;margin:0;padding:0;overflow:hidden;border:0;border-bottom:3px solid var(--ink);background:#000;cursor:pointer}
.example-thumb{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;background:#000;pointer-events:none}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:38px;height:38px;padding-left:2px;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);font-size:18px;font-weight:1000;box-shadow:2px 2px 0 var(--ink)}

.example-copy{padding:8px 10px 9px}
.example-copy h2{margin:0 0 4px;font-size:14px;line-height:1.08;font-weight:1000}
.example-copy p{display:-webkit-box;margin:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:11px;line-height:1.22;font-weight:600;opacity:.74}

.video-modal[hidden]{display:none}
.video-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88)}
.video-modal-box{position:relative;z-index:1;width:min(500px,94vw);max-height:94vh;padding:12px;background:var(--paper);border:5px solid #fff;box-shadow:9px 9px 0 var(--pink)}
.video-modal-box h2{margin:0 46px 8px 0;font-size:19px;line-height:1.1}
.video-modal-box video{display:block;width:100%;max-height:82vh;background:#000;object-fit:contain}
.video-modal-close{position:absolute;right:8px;top:7px;z-index:2;width:34px;height:34px;border:3px solid var(--ink);background:var(--yellow);font-size:21px;font-weight:1000;line-height:1;cursor:pointer}

@media(max-width:850px){
    .examples-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .example-card-bonus{grid-column:auto}
}
@media(max-width:520px){
    .examples-grid{gap:8px}
    .example-open{height:104px}
    .example-copy{padding:7px 8px}
    .example-copy h2{font-size:12px}
    .example-copy p{font-size:10px}
}


/* ONE BOX around the entire bottom information section */
.book-bot {
    width: min(1200px, 92vw);
    margin: 20px auto 60px;
    padding: 28px 36px;

    background: #fff8df;
    color: #111;

    border: 4px solid #fff;
    box-shadow: 0 14px 32px rgba(0,0,0,.35);

    box-sizing: border-box;
}

/* DIY stays INSIDE that box */
.diy-own-site {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,.25);
}

/* Keep DIY badge SMALL */
.diy-own-badge {
    width: 42px;
    height: auto;
    flex: 0 0 42px;
}

/* SEO text — white */
.examples-seo,
.examples-seo h1,
.examples-seo h2,
.examples-seo h3,
.examples-seo p,
.examples-seo strong {
    color: #fff;
}