/* HDL article layout rotation — 10 styles, selected daily (by day-of-year) by
   article-enhance.js. Applied via body.hdl-layout-1 ... body.hdl-layout-10.
   Targets universal elements (body, h1) plus .hdl-hero-photo / .hdl-trailer-slot,
   which article-enhance.js inserts on every page regardless of that page's own
   hero markup — so the same 10 styles work across every book/article template.
   The hero photo itself now rotates through up to 100 real, topic-relevant
   Unsplash search results per book (see /api/unsplash-pool in _worker.js),
   picked by the same day-of-year counter, instead of a fixed 3-photo pool. */

.hdl-hero-photo{width:100%;max-width:900px;margin:0 auto 8px;border-radius:10px;overflow:hidden;
  height:280px;background-size:cover;background-position:center}
.hdl-photo-credit{max-width:900px;margin:0 auto 24px;font:.72rem/1.4 sans-serif;color:#9a9385;text-align:right}
.hdl-photo-credit a{color:#9a9385;text-decoration:underline}
.hdl-trailer-slot{margin:28px auto;max-width:900px;border-radius:10px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.18)}
.hdl-trailer-slot iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.hdl-trailer-caption{font:.78rem/1.4 sans-serif;color:#6B7280;text-align:center;margin-top:6px}

/* 1. Classic Serif */
body.hdl-layout-1 h1{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.01em}
body.hdl-layout-1 .hdl-hero-photo{border-radius:4px;height:320px}
body.hdl-layout-1 p{font-family:Georgia,serif}

/* 2. Magazine Grid — pull-quote accent bar on the photo caption, wide crop */
body.hdl-layout-2 .hdl-hero-photo{height:220px;border-left:4px solid #C9A94C}
body.hdl-layout-2 h1{font-size:clamp(2.1rem,5vw,3.2rem)}

/* 3. Immersive Hero — tall full-bleed photo, dark overlay gradient */
body.hdl-layout-3 .hdl-hero-photo{height:420px;position:relative}
body.hdl-layout-3 .hdl-hero-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%)}

/* 4. Sidebar Rail — accent rule beside heading, square framed photo */
body.hdl-layout-4 h1{border-left:6px solid #1B2B4B;padding-left:18px}
body.hdl-layout-4 .hdl-hero-photo{height:260px;border-radius:14px}

/* 5. Card Stack — soft card framing, warm page tint */
body.hdl-layout-5{background:#F5F3EE}
body.hdl-layout-5 .hdl-hero-photo{border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.12)}
body.hdl-layout-5 .hdl-trailer-slot{border-radius:16px}

/* 6. Editorial Columns — newspaper-style heading, wide photo strip */
body.hdl-layout-6 h1{font-family:'Times New Roman',serif;font-weight:700}
body.hdl-layout-6 .hdl-hero-photo{height:200px;border-radius:2px}

/* 7. Minimalist Mono — small photo, mono caption accents, lots of whitespace */
body.hdl-layout-7 .hdl-hero-photo{height:200px;max-width:620px}
body.hdl-layout-7 .hdl-trailer-caption{font-family:'Courier New',monospace}
body.hdl-layout-7 h1{font-weight:400}

/* 8. Dark Editorial — dark photo treatment via filter, gold caption */
body.hdl-layout-8 .hdl-hero-photo{filter:brightness(.75) saturate(1.1)}
body.hdl-layout-8 .hdl-trailer-caption{color:#C9A94C}

/* 9. Photo Essay — largest photo presence, airy spacing */
body.hdl-layout-9 .hdl-hero-photo{height:380px;margin-bottom:32px}
body.hdl-layout-9 .hdl-trailer-slot{margin-top:40px}

/* 10. Timeline Flow — marker rule beside heading, circular framed photo accent */
body.hdl-layout-10 h1{position:relative;padding-left:18px}
body.hdl-layout-10 h1::before{content:'';position:absolute;left:0;top:.15em;bottom:.15em;width:3px;background:#C9A94C}
body.hdl-layout-10 .hdl-hero-photo{height:240px;border-radius:22px}