/* Sinus archive. Dark, after rainbow.sejler.nu; layout from docs/mockups/layout-1.html. */
:root { --bg:#111417; --panel:#1a1f24; --line:#2a3138; --text:#e8ecef; --muted:#9aa5ae; --accent:#2b9be0; --wide:1180px; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter, system-ui, sans-serif; line-height:1.5; }
a { color:var(--accent); }
img { max-width:100%; height:auto; }

/* header */
.top { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; max-width:var(--wide); margin:0 auto; padding:18px 32px; border-bottom:1px solid var(--line); }
.logo { display:block; line-height:0; }
.logo img { width:120px; height:40px; }
.nav a { color:var(--muted); text-decoration:none; font:500 13px Montserrat, sans-serif; letter-spacing:.12em; text-transform:uppercase; margin-left:26px; }
.nav a:first-child { margin-left:0; }
.nav a:hover, .nav a:focus-visible { color:#fff; }

/* front page */
.hero { position:relative; height:340px; max-width:var(--wide); margin:0 auto; background:center 60%/cover no-repeat; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,13,15,.15), rgba(17,20,23,.95)); }
.hero h1 { position:absolute; left:32px; bottom:30px; z-index:1; margin:0; font:300 46px Montserrat, sans-serif; }
.hero p { position:absolute; left:34px; bottom:10px; z-index:1; margin:0; color:var(--muted); font-size:15px; }
.trips { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:var(--wide); margin:0 auto; padding:32px; }
.trip { position:relative; display:block; height:300px; border-radius:8px; overflow:hidden; color:#fff; text-decoration:none; }
.trip img { width:100%; height:100%; object-fit:cover; }
.trip::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,.85)); }
.trip .t { position:absolute; left:22px; right:22px; bottom:18px; z-index:1; }
.trip h2 { margin:0 0 4px; font:500 26px Montserrat, sans-serif; }
.trip small { color:#cfd6db; font-size:14px; }

/* trip page */
.trip-head, .posts { max-width:var(--wide); margin:0 auto; }
.trip-head { padding:34px 32px 8px; }
.crumb { color:var(--muted); font-size:13px; }
.crumb a { color:var(--muted); }
.trip-head h1 { margin:6px 0 6px; font:300 38px Montserrat, sans-serif; }
.trip-head p { margin:0; color:var(--muted); max-width:640px; line-height:1.55; }
.posts { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; padding:26px 32px 40px; }
.post { display:block; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; color:inherit; text-decoration:none; }
.post:hover, .post:focus-visible { border-color:#3a4650; }
.post > img, .post .noimg { width:100%; height:160px; object-fit:cover; display:block; }
.post .noimg { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#16324a,#1c2730); }
.post .noimg img { width:96px; height:auto; opacity:.6; }
.post .b { padding:14px 16px 18px; }
time { color:var(--accent); font:500 12px Inter, sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.post h3 { margin:6px 0 8px; font:500 17px Montserrat, sans-serif; }
.post p { margin:0; color:var(--muted); font-size:14px; }

/* post page */
.article { max-width:720px; margin:0 auto; padding:34px 24px 48px; }
.article h1 { margin:4px 0 20px; font:300 36px Montserrat, sans-serif; line-height:1.2; }
.prose { font-size:17px; line-height:1.7; overflow-wrap:anywhere; }
.prose p { margin:0 0 1em; }
.prose figure { margin:1.4em 0; }
.prose figcaption { color:var(--muted); font-size:14px; margin-top:6px; }
.prose img { display:block; border-radius:6px; }
.prose table { border-collapse:collapse; width:100%; font-size:15px; }
.prose td, .prose th { padding:4px 8px; border-bottom:1px solid var(--line); text-align:left; }
.pager { display:flex; justify-content:space-between; gap:16px; margin:36px 0 28px; padding-top:20px; border-top:1px solid var(--line); }
.pager a { max-width:48%; color:var(--text); text-decoration:none; font:500 15px Montserrat, sans-serif; }
.pager a.next { text-align:right; margin-left:auto; }
.pager small { display:block; color:var(--muted); font:500 11px Inter, sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.toggle-comments { font:500 13px Montserrat, sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:10px 16px; cursor:pointer; }
.toggle-comments:hover { border-color:#3a4650; }
.comments h2 { font:500 20px Montserrat, sans-serif; margin:28px 0 12px; }
.comment { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px 18px; margin:0 0 12px; }
.comment header { margin-bottom:6px; }
.comment .prose { font-size:15px; }
.comments[hidden] { display:none; }

/* modals: <dialog>, opened by site.js; without JS, by the #fragment */
dialog { max-width:min(720px, calc(100vw - 32px)); max-height:85vh; overflow:auto; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:26px 30px; }
dialog::backdrop { background:rgba(0,0,0,.65); }
dialog h2 { margin:0 0 14px; font:300 28px Montserrat, sans-serif; }
dialog .close { position:sticky; top:0; float:right; color:var(--muted); text-decoration:none; font-size:26px; line-height:1; }
dialog:target { display:block; position:fixed; inset:0; margin:auto; z-index:10; height:fit-content; }

.foot { max-width:var(--wide); margin:0 auto; padding:16px 32px 28px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }

@media (max-width: 900px) { .posts { grid-template-columns:1fr 1fr; } }
@media (max-width: 640px) {
  .trips, .posts { grid-template-columns:1fr; padding:20px 16px; }
  .top, .trip-head { padding-left:16px; padding-right:16px; }
  .nav a { margin-left:14px; }
  .hero { height:240px; }
}

/* motion only for those who want it */
@media (prefers-reduced-motion: no-preference) {
  .nav a { transition:color .2s; }
  .trip img { transition:transform .6s ease; }
  .trip:hover img, .trip:focus-visible img { transform:scale(1.06); }
  .post { transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
  .post:hover, .post:focus-visible { transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.4); }
  /* fill-mode both: hidden only while the animation is pending, so a card can never stay invisible */
  html.js .post { animation:rise .6s ease both; animation-delay:calc(var(--i, 0) * 60ms); }
  dialog[open] { animation:rise .3s ease; }
  .comments.opening { animation:rise .35s ease; }
}
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }