/* steffi-justina.com — "Timeline" dark theme (site-wide). Loads after style.css. */
:root{--bg:#272b30;--surface:#31363c;--ink:#eceae5;--muted:#a3aab4;--line:#3e444c;--accent:#8fb8c9;
  --dark:#eceae5;--anthracite:#1f2226;--anthracite-dark:#191b1e;
  --shadow:0 4px 14px rgba(0,0,0,.4);--shadow-lg:0 22px 50px rgba(0,0,0,.55)}
body{background:var(--bg);color:var(--ink)}
.site-head{background:linear-gradient(180deg,rgba(20,20,20,.96),rgba(20,20,20,.9))}
.banner img{width:100%;display:block}

/* type */
.display,.hero__title{color:#fff}
.section__sub{color:var(--muted)}
.lede{color:var(--ink);opacity:.85}
.intro__text p{color:var(--ink);opacity:.85}
.mail{color:var(--accent)}
.pagehead{padding-top:64px}
.intro-home{padding:56px 0 24px;text-align:center}
.intro-home__kicker{margin:0 0 6px;font-family:var(--ui);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 35%,rgba(39,43,48,.85) 100%)}

/* buttons */
.btn{background:#fff;color:#1d2024}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.pager{border-color:var(--line)}
.pager a{color:var(--muted)}.pager a:hover{color:#fff}

/* galleries */
.shot{background:#1e2226;box-shadow:none}
.shot:focus-visible{outline-color:var(--accent)}

/* books — zig-zag timeline */
.section--books{padding:56px 0 80px}
.books{display:block;position:relative;counter-reset:book;padding:20px 0}
.books::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background:repeating-linear-gradient(180deg,var(--accent) 0 8px,transparent 8px 16px);opacity:.6}
.book{display:grid;grid-template-columns:1fr 1fr;gap:0 104px;align-items:center;background:transparent;box-shadow:none;
  overflow:visible;position:relative;margin:0 0 54px;border-radius:0}
.book:hover{transform:none;box-shadow:none}
.book::before{content:counter(book,decimal-leading-zero);counter-increment:book;position:absolute;left:50%;top:50%;
  width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);
  color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--hand);font-weight:var(--hand-weight);font-size:26px;z-index:2}
.book__cover{border-radius:8px;overflow:hidden;box-shadow:var(--shadow-lg);background:#1e2226;transition:transform .35s ease}
.book:hover .book__cover{transform:scale(1.02)}
.book__meta{padding:0;text-align:left}
.book:nth-child(even) .book__cover{order:2}
.book:nth-child(even) .book__meta{text-align:right}
.book:nth-child(even) .book__links{justify-content:flex-end}
.book:nth-child(odd) .book__links{justify-content:flex-start}
.book__num{color:var(--accent)}
.book__title{color:#fff;font-size:44px;margin:0 0 14px}

/* eyecandies tiles — grid on sub pages */
.section--tiles{background:var(--surface);border-color:var(--line)}
.tiles{gap:12px}
.tile{aspect-ratio:1/1;border-radius:6px;align-items:flex-end;justify-content:flex-start;box-shadow:none}
.tile::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.7) 100%)}
.tile:hover::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%)}
.tile__label{background:none;color:#fff;box-shadow:none;padding:14px 16px;font-size:12px;letter-spacing:.22em}
/* — panorama strip on the home page */
.section--tiles{overflow:hidden}
.strip{padding:6px 0 26px}
.strip .tiles{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding:0 calc((100vw - var(--wrap-wide))/2 + 24px) 18px;
  scrollbar-width:thin;scrollbar-color:#555 transparent}
.strip .tile{flex:0 0 320px;aspect-ratio:1/1;scroll-snap-align:start}
.strip .tile__label{padding:16px 18px}

/* footer */
.site-foot{background-image:url('../img/site/poly-foot.webp')!important;background-size:cover;background-position:center;background-color:var(--anthracite)}
.foot__copy{background:var(--anthracite-dark)}

@media (max-width:820px){.books::before{left:26px}.book{grid-template-columns:1fr;gap:16px;padding-left:64px}
  .book::before{left:26px;top:20px;margin-top:0}.book:nth-child(even) .book__cover{order:0}
  .book:nth-child(even) .book__meta{text-align:left}.book:nth-child(even) .book__links{justify-content:flex-start}
  .strip{padding:0 24px 8px}.strip .tiles{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible;padding:0;gap:12px}.strip .tile{flex:none;aspect-ratio:1/1}}

/* one-page navigation */
html{scroll-behavior:smooth}
#home,#travel-books,#eyecandies,#contact{scroll-margin-top:64px}
.section--contact{background:var(--bg);padding:96px 0 110px}
.section--contact .section__sub{margin-bottom:10px}
.section--contact .lede{margin-top:0}
.mail{font-size:24px;text-decoration:none;border-bottom:1px solid rgba(143,184,201,.5);padding-bottom:2px}
.mail:hover{border-color:var(--accent)}

/* home collage (rebuilt in CSS: polygon backdrop + five framed photos) */
.collage{position:relative;aspect-ratio:1920/645;overflow:hidden;background:var(--bg)}
.collage__poly{position:absolute;left:0;right:0;top:0;height:59.4%;
  background:url('../img/site/poly-top.webp') center/cover no-repeat}
.collage__p{position:absolute;box-sizing:border-box;object-fit:cover;border:5px solid #fff;border-radius:11px;
  box-shadow:0 16px 36px rgba(0,0,0,.45);background:#fff}
.collage__p1{left:12.71%;top:42.33%;width:12.81%;height:39.22%}
.collage__p2{left:26.61%;top:31.94%;width:14.58%;height:53.49%}
.collage__p3{left:42.40%;top:27.44%;width:15.31%;height:62.95%}
.collage__p4{left:58.85%;top:32.25%;width:14.48%;height:53.49%}
.collage__p5{left:74.53%;top:42.33%;width:12.92%;height:39.22%}
@media (max-width:720px){.collage__p{border-width:2px;border-radius:5px;box-shadow:0 6px 16px rgba(0,0,0,.45)}}