/* Shared stylesheet — Privacy & Terms pages
   Matches the Journday homepage design language:
   - cool blue-white palette
   - Instrument Serif display + Geist body
   - minimal, editorial feel */

:root{
  --bg:           rgb(241, 248, 255);
  --bg-2:         rgb(228, 238, 249);
  --ink:          rgb(4, 18, 35);
  --ink-dim:      rgb(46, 63, 82);
  --ink-mute:     rgb(103, 115, 128);
  --line:         rgba(4, 18, 35, 0.16);
  --line-soft:    rgba(4, 18, 35, 0.09);
  --accent:       rgb(0, 99, 186);
  --accent-soft:  rgb(205, 232, 255);
  --maxw:         1680px;
  --pad:          clamp(20px, 3.5vw, 72px);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:"Geist", ui-sans-serif, system-ui, sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";}
body{overflow-x:hidden;line-height:1.55}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}

/* Subtle background ornament — same family as the homepage */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(0, 99, 186, 0.07), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(0, 99, 186, 0.05), transparent 60%);
}
.grain{
  position:fixed; inset:-50%; z-index:0; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
}

main, header, footer{position:relative;z-index:3}

/* ---------- Type ---------- */
.serif{font-family:"Instrument Serif", "Iowan Old Style", Georgia, serif;font-weight:400;letter-spacing:-0.01em}
.mono{font-family:"Geist Mono", ui-monospace, monospace;}
.eyebrow{
  font-family:"Geist Mono", ui-monospace, monospace;
  font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-dim); display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--accent); display:inline-block;}

.h-display{font-family:"Instrument Serif", serif; font-weight:400; font-size:clamp(48px, 7vw, 108px); line-height:0.98; letter-spacing:-0.03em}
.h-display em{font-style:italic; color:var(--accent)}

/* ---------- Wrap / Layout ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 var(--pad)}

/* ---------- Header ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:18px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  background:linear-gradient(180deg, rgba(241, 248, 255, 0.78), rgba(241, 248, 255, 0));
  border-bottom:1px solid var(--line-soft);
}

.wordmark{
  display:inline-flex; align-items:center;
  font-family:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  font-style:italic;
  font-weight:400;
  font-size:26px;
  line-height:1;
  color:var(--ink);
  letter-spacing:-0.02em;
  text-transform:none;
}

.nav-back{
  font-family:"Geist Mono", monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  padding:10px 18px; border:1px solid var(--ink);
  border-radius:99px; color:var(--ink);
  transition:all .25s ease;
  display:inline-flex; align-items:center; gap:10px;
}
.nav-back:hover{background:var(--ink); color:var(--bg)}

/* ---------- Legal Page ---------- */
.legal{padding:160px 0 96px}

.legal-head{
  position:relative;
  padding-bottom:48px;
  border-bottom:1px solid var(--line);
  margin-bottom:72px;
  display:flex; flex-direction:column; gap:28px;
}
.legal-head .h-display{max-width:14ch}
.legal-head .updated{
  font-family:"Geist Mono", monospace;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-mute);
  margin-top:4px;
  display:inline-flex; align-items:center; gap:10px;
}
.legal-head .updated::before{
  content:""; width:14px; height:1px; background:var(--accent); display:inline-block;
}

@media (max-width:680px){
  .legal-head{padding-bottom:36px; margin-bottom:48px}
}

/* ---------- Document body ---------- */
.doc{
  display:flex;
  flex-direction:column;
  gap:56px;
  max-width:760px;
}

.doc section{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-bottom:8px;
  scroll-margin-top:120px;
}

.doc h2{
  font-family:"Instrument Serif", serif;
  font-weight:400;
  font-size:clamp(26px, 2.6vw, 34px);
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--ink);
  display:flex; align-items:baseline; gap:18px;
  margin-bottom:6px;
}
.doc h2 .num{
  font-family:"Geist Mono", monospace;
  font-style:normal;
  font-size:11px; letter-spacing:0.22em;
  color:var(--accent);
  padding-top:6px;
  flex:0 0 auto;
  position:relative; top:-2px;
}

.doc p{
  color:var(--ink-dim);
  font-size:16px;
  line-height:1.7;
  font-weight:300;
  max-width:68ch;
  text-wrap:pretty;
}
.doc p strong{color:var(--ink); font-weight:500}
.doc p a{
  color:var(--accent);
  border-bottom:1px solid rgba(0, 99, 186, 0.35);
  transition:border-color .2s ease, color .2s ease;
}
.doc p a:hover{border-bottom-color:var(--accent)}

.doc ul{
  list-style:none;
  display:flex; flex-direction:column;
  gap:10px;
  padding:6px 0 6px 0;
  max-width:68ch;
}
.doc ul li{
  position:relative;
  padding-left:24px;
  color:var(--ink-dim);
  font-size:16px;
  line-height:1.6;
  font-weight:300;
}
.doc ul li::before{
  content:"";
  position:absolute;
  left:0; top:0.7em;
  width:10px; height:1px;
  background:var(--accent);
}
.doc ul li strong{color:var(--ink); font-weight:500}
.doc ul li a{
  color:var(--accent);
  border-bottom:1px solid rgba(0, 99, 186, 0.35);
}

/* ---------- Contact card ---------- */
.contact-card{
  margin-top:8px;
  padding:24px 28px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(241, 248, 255, 0.25));
  backdrop-filter:blur(10px);
  display:flex; flex-direction:column; gap:6px;
  max-width:380px;
}
.contact-label{
  font-family:"Geist Mono", monospace;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-mute);
}
.contact-mail{
  font-family:"Instrument Serif", serif;
  font-size:24px; letter-spacing:-0.01em;
  color:var(--accent);
  font-style:italic;
}
.contact-mail:hover{text-decoration:underline}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:48px var(--pad) 36px;
  display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center;
  font-family:"Geist Mono", monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-mute);
}
footer .wordmark{font-size:24px}
footer .links{display:flex; gap:28px; justify-content:center}
footer .links a[aria-current="page"]{color:var(--ink)}
footer .mail{justify-self:end}
footer a:hover{color:var(--ink)}

/* ---------- Responsive ---------- */
@media (max-width:680px){
  .legal{padding:120px 0 72px}
  .legal-head{margin-bottom:48px}
  .doc{gap:44px}
  .doc h2{flex-direction:column; gap:6px; align-items:flex-start}
  .doc h2 .num{padding-top:0}
  footer{grid-template-columns:1fr; text-align:center; justify-items:center}
  footer .mail{justify-self:center}
}