/* ===========================
   JOURNAL — founder's notes (loads on top of style.css)
   Reuses the :root tokens: --teal --coral --ink --text --gray --gray-2
   =========================== */

img{max-width:100%;height:auto;display:block}

.journal-page{
  min-height:100vh;
  padding:96px 20px calc(40px + env(safe-area-inset-bottom));
}
.journal-container{
  max-width:880px;margin:0 auto;
  background:#fff;border-radius:28px;
  padding:72px 64px;
}

/* Back link (same look as legal pages) */
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--gray);font-size:14px;font-weight:500;
  margin-bottom:48px;transition:color 0.2s ease;
}
.back-link:hover{color:var(--text)}

/* ── Index header ── */
.j-head{margin-bottom:64px}
.j-eyebrow{
  display:flex;align-items:center;gap:9px;
  font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gray-2);margin-bottom:18px;
}
.j-title{
  font-size:clamp(40px,7vw,64px);font-weight:800;
  letter-spacing:-0.035em;line-height:1.05;margin-bottom:18px;
  background:linear-gradient(180deg,#000 0%,#8a8a8e 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.j-sub{
  font-size:clamp(16px,2vw,19px);font-weight:400;line-height:1.6;
  color:var(--gray);max-width:520px;
}
.j-byline{
  margin-top:20px;font-size:13.5px;font-weight:600;color:var(--text);
}
.j-byline em{font-style:normal;font-weight:500;color:var(--gray-2)}

/* ── Entry list ── */
.j-list{border-top:1px solid rgba(0,0,0,0.08)}
.j-empty{
  padding:44px 4px;border-bottom:1px solid rgba(0,0,0,0.08);
  font-size:15px;font-weight:500;color:var(--gray-2);
}
.j-entry{
  display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:22px;
  padding:26px 4px;border-bottom:1px solid rgba(0,0,0,0.08);
  transition:background 0.2s ease;
}
.j-entry:hover{background:rgba(0,0,0,0.02)}
.j-date{display:flex;flex-direction:column;line-height:1.1}
.j-date .jd-m{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gray-2)}
.j-date .jd-d{font-size:26px;font-weight:800;letter-spacing:-0.02em;color:var(--text);font-variant-numeric:tabular-nums}
.j-entry-title{display:block;font-size:19px;font-weight:700;letter-spacing:-0.02em;color:var(--text);line-height:1.3;margin-bottom:9px}
.j-entry-teaser{display:block;font-size:14.5px;font-weight:500;color:var(--gray);line-height:1.55}
.j-arrow{color:var(--gray-2);transition:transform 0.25s cubic-bezier(0.22,1,0.36,1),color 0.2s}
.j-entry:hover .j-arrow{transform:translateX(4px);color:var(--teal-deep)}

/* ── Article page ── */
.a-wrap{max-width:720px;margin:0 auto}
.a-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gray-2);margin-bottom:20px;
}
.a-title{
  font-size:clamp(34px,6vw,56px);font-weight:800;
  letter-spacing:-0.035em;line-height:1.08;margin-bottom:40px;
  background:linear-gradient(180deg,#000 0%,#8a8a8e 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.a-body p{
  font-size:17px;line-height:1.75;color:var(--text);
  margin-bottom:26px;letter-spacing:-0.003em;
}
.a-body p strong{font-weight:700}
.a-body p:first-child{font-size:19px;line-height:1.65;color:var(--text)}

/* Placeholder block — obviously unfinished, remove when real copy lands */
.a-placeholder{
  border:1.5px dashed rgba(0,0,0,0.18);border-radius:16px;
  padding:24px 26px;margin-bottom:26px;
}
.a-placeholder p{
  font-size:15px;font-style:italic;color:var(--gray-2);
  line-height:1.6;margin-bottom:0;
}
.a-placeholder p+p{margin-top:14px}

/* Signature */
.a-sign{
  margin-top:60px;padding-top:32px;
  border-top:1px solid rgba(0,0,0,0.08);
}
.a-sign-name{font-size:19px;font-weight:800;letter-spacing:-0.02em;color:var(--text);line-height:1.3}
.a-sign-role{font-size:13.5px;font-weight:500;color:var(--gray-2);margin-top:4px}

/* ── Desktop — full-width layout, same treatment as the legal pages ── */
@media (min-width:960px){
  .journal-page{padding:128px 40px calc(64px + env(safe-area-inset-bottom))}
  .journal-container{max-width:1180px;padding:96px 104px}

  /* Index: wider header + roomier rows */
  .j-sub{max-width:640px}
  .j-entry{grid-template-columns:96px 1fr auto;gap:32px;padding:32px 8px}
  .j-entry-title{font-size:20px}
  .j-entry-teaser{font-size:15px}

  /* Article: one clean reading column — the container sets the measure */
  .article .journal-container{max-width:940px;padding:96px 110px 88px}
  .a-title{font-size:clamp(44px,4.5vw,64px);margin-bottom:48px}
  .a-body p{font-size:18px}
  .a-body p:first-child{font-size:21px;line-height:1.6}
}

/* ── Mobile ── */
@media (max-width:640px){
  .journal-page{padding:80px 12px calc(32px + env(safe-area-inset-bottom))}
  .journal-container{padding:48px 24px;border-radius:22px}
  .j-head{margin-bottom:44px}
  .j-entry{grid-template-columns:60px 1fr auto;gap:14px;padding:22px 2px}
  .j-date .jd-d{font-size:22px}
  .j-entry-title{font-size:16px}
  .a-body p{font-size:16px}
}