/* ---------------------------------------------------------------------------
   Net Bybel Pret — public archive ("lees" = read).
   Deliberately NOT the admin portal's stylesheet. The portal is a dense control
   surface; this is a reading surface, opened almost entirely from a WhatsApp
   link on a phone. So: one narrow column, large type, generous leading, warm
   paper, and touch targets that a thumb can hit.
   --------------------------------------------------------------------------- */
:root{
  --paper:#FAF6EE;      /* warm off-white page */
  --card:#FFFDF9;
  --ink:#2A2724;
  --ink-soft:#6B6459;
  --line:#E8DFCE;
  --deep:#2C4A3B;       /* deep olive — headings, masthead */
  --deep-2:#3E6551;
  --sun:#B9741B;        /* the morning message */
  --moon:#5B4B8A;       /* the evening reflection */
  --gold:#C89B3C;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  font-size:18px;line-height:1.68;
}
a{color:var(--deep-2)}
img{max-width:100%;height:auto}

/* ---- masthead ---- */
.masthead{
  background:linear-gradient(160deg,var(--deep),var(--deep-2));
  color:#fff;padding:26px 20px 22px;text-align:center;
}
.masthead .mark{font-size:34px;line-height:1;display:block;margin-bottom:6px}
.masthead h1{
  margin:0;font-size:27px;letter-spacing:.4px;font-weight:400;color:#fff;
}
.masthead p{margin:8px auto 0;max-width:34em;font-size:15.5px;opacity:.86;line-height:1.5}
.masthead a{color:#fff}

.wrap{max-width:44rem;margin:0 auto;padding:26px 18px 10px}

/* ---- breadcrumb / back ---- */
.back{display:inline-block;font-size:15px;text-decoration:none;color:var(--ink-soft);margin-bottom:14px}
.back:hover{color:var(--deep);text-decoration:underline}

/* ---- section headings ---- */
h2.section{
  font-size:15px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink-soft);font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  margin:34px 0 4px;display:flex;align-items:center;gap:12px;
}
h2.section::after{content:"";flex:1;height:1px;background:var(--line)}
h2.section:first-of-type{margin-top:6px}
.section-note{margin:0 0 16px;font-size:15px;color:var(--ink-soft);line-height:1.5}

/* ---- study cards on the landing page ---- */
.cards{display:grid;gap:14px;margin:0 0 8px}
.card-link{
  display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;box-shadow:0 1px 2px rgba(60,45,20,.05);
  transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;
}
.card-link:hover,.card-link:focus-visible{
  box-shadow:0 6px 18px rgba(60,45,20,.11);transform:translateY(-1px);border-color:var(--gold);
}
.card-link .cover{
  flex:0 0 68px;width:68px;aspect-ratio:4/5;object-fit:cover;
  border-radius:9px;border:1px solid var(--line);background:#F1EADC;
}
.card-link .cover.blank{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--gold)}
.card-body{flex:1;min-width:0}
.card-body .when{
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;font-size:12.5px;
  letter-spacing:.7px;text-transform:uppercase;color:var(--gold);font-weight:700;
}
.card-body h3{margin:2px 0 3px;font-size:20px;font-weight:400;color:var(--deep);line-height:1.3}
.card-body .sub{margin:0;font-size:15.5px;color:var(--ink-soft);line-height:1.45}

/* ---- study page ---- */
.study-head{margin:0 0 6px}
.study-head h1{margin:0;font-size:29px;font-weight:400;color:var(--deep);line-height:1.25}
.study-head .sub{margin:6px 0 0;font-size:17px;color:var(--ink-soft);font-style:italic}
.study-head .when{
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;font-size:12.5px;letter-spacing:.7px;
  text-transform:uppercase;color:var(--gold);font-weight:700;
}
.intro{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:0 12px 12px 0;padding:12px 16px;margin:18px 0 6px;
  font-size:16.5px;color:var(--ink-soft);line-height:1.55;
}

/* ---- one day / one part ---- */
.day{margin:32px 0 0}
.day > h2{
  margin:0 0 12px;font-size:19px;font-weight:400;color:var(--deep);
  border-bottom:2px solid var(--line);padding-bottom:6px;
}
.day > h2 .date{font-size:15px;color:var(--ink-soft);font-family:"Segoe UI",Helvetica,Arial,sans-serif}
/* The day-card is a 4:5 portrait. Left at full column width it swamps the page
   and pushes the message itself below the fold, so cap it — it accompanies the
   message, it is not the message. */
.daycard{margin:0 0 16px;text-align:center}
.daycard img{
  max-width:min(280px,72%);border-radius:12px;border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(60,45,20,.08);
}
.daycard figcaption{font-size:14.5px;color:var(--ink-soft);margin-top:7px;font-style:italic}

.msg{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 17px 4px;margin:0 0 14px;box-shadow:0 1px 2px rgba(60,45,20,.05);
}
.msg.boodskap{border-left:4px solid var(--sun)}
.msg.nadenke{border-left:4px solid var(--moon)}
.msg.deel{border-left:4px solid var(--deep-2)}
.msg .tag{
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;
}
.msg.boodskap .tag{color:var(--sun)}
.msg.nadenke .tag{color:var(--moon)}
.msg.deel .tag{color:var(--deep-2)}
.msg .tag .when{color:var(--ink-soft);font-weight:400;letter-spacing:.4px;text-transform:none}
.msg h3{margin:3px 0 0;font-size:19px;font-weight:400;color:var(--deep);line-height:1.3}

/* the rendered message body */
.body p{margin:.85em 0}
/* Every source line is its own block, so a list item's hanging indent applies
   to that item alone — not just to the first line of the paragraph. */
.body .ln{display:block}
.body .ln.li{padding-left:1.25em;text-indent:-1.25em}
.body strong{font-weight:700;color:#1F1C19}
.body em{font-style:italic}
.body code{
  font-family:Consolas,"Courier New",monospace;font-size:.92em;
  background:#F1EADC;padding:1px 5px;border-radius:4px;
}
.body hr{border:0;border-top:1px solid var(--line);margin:1.5em auto;width:60%}

/* ---- prev / next ---- */
.pager{display:flex;gap:12px;justify-content:space-between;margin:34px 0 0;flex-wrap:wrap}
.pager a{
  flex:1;min-width:44%;text-decoration:none;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:11px 15px;color:inherit;
}
.pager a:hover{border-color:var(--gold)}
.pager .dir{
  display:block;font-family:"Segoe UI",Helvetica,Arial,sans-serif;font-size:11.5px;
  letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);
}
.pager .name{display:block;font-size:16.5px;color:var(--deep);line-height:1.35;margin-top:2px}
.pager a.next{text-align:right}

.empty{
  background:var(--card);border:1px dashed var(--line);border-radius:12px;
  padding:22px;text-align:center;color:var(--ink-soft);font-size:16px;
}

/* ---- footer ---- */
.pubfoot{
  margin-top:44px;padding:22px 18px 30px;text-align:center;
  color:var(--ink-soft);font-size:14.5px;border-top:1px solid var(--line);
}
.pubfoot a{color:var(--ink-soft)}

@media (max-width:480px){
  body{font-size:17.5px}
  .wrap{padding:20px 15px 6px}
  .masthead h1{font-size:24px}
  .study-head h1{font-size:25px}
  .card-link{padding:12px 13px;gap:12px}
  .card-link .cover{flex-basis:58px;width:58px}
  .pager a{min-width:100%}
}

@media print{
  .masthead,.pager,.back,.pubfoot{display:none}
  body{background:#fff;font-size:12pt}
  .msg{break-inside:avoid;box-shadow:none}
}

/* NIV attribution on the English site — required wherever the text is reproduced. */
.scripture-notice{max-width:34rem;margin:14px auto 0;font-size:.72rem;line-height:1.5;
  color:#8a8275;text-align:center;}