/* Officium support site — illuminated-breviary editorial style.
   Shared by index / privacy / terms. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --charcoal:   #1F262F;
  --charcoal-2: #151A21;
  --ink:        #2A241C;
  --parchment:  #F4ECDA;
  --card:       #FBF6EA;
  --gold:       #C9A227;
  --gold-deep:  #9E7E1A;
  --rubric:     #A32020;
  --rubric-deep:#7C1616;
  --muted:      #6E6455;
  --hairline:   rgba(124, 22, 22, .16);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:"EB Garamond", Georgia, 'Times New Roman', serif;
  font-size:19px; line-height:1.72; color:var(--ink);
  background-color:var(--parchment);
  /* faint parchment grain */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a { color:var(--rubric); text-decoration:none; border-bottom:1px solid var(--hairline);
    transition:color .15s, border-color .15s; }
a:hover { color:var(--rubric-deep); border-color:var(--rubric); }

/* ---- Hero ---- */
.hero {
  position:relative; text-align:center; color:var(--parchment);
  padding:76px 24px 60px;
  background:
    radial-gradient(130% 90% at 50% -20%, #2B3542 0%, var(--charcoal) 52%, var(--charcoal-2) 100%);
  border-bottom:3px solid var(--gold);
  overflow:hidden;
}
.hero::after { /* gold hairline just above the base border */
  content:""; position:absolute; left:0; right:0; bottom:3px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,162,39,.55), transparent);
}
.crest {
  width:136px; height:136px; margin:0 auto 26px; position:relative;
  border-radius:30px;
  background:#1F262F center/cover url('app-icon.png');
  box-shadow:0 18px 44px rgba(0,0,0,.5),
             inset 0 0 0 1px rgba(201,162,39,.45);
}
.crest::before { /* soft gold glow behind the icon */
  content:""; position:absolute; inset:-34px; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,39,.28), transparent 68%);
}
.wordmark {
  font-family:"Cormorant Garamond", serif; font-weight:600;
  font-size:clamp(48px, 9vw, 74px); line-height:1; letter-spacing:.5px;
  color:#F7F1E3;
}
.hero .sub {
  margin-top:12px; font-size:clamp(17px,3.4vw,22px); font-style:italic;
  color:var(--gold); letter-spacing:.3px;
}
.hero .rule {
  width:120px; height:2px; margin:22px auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---- Layout ---- */
main { max-width:820px; margin:0 auto; padding:56px 24px 40px; }
section { margin-bottom:46px; }

.eyebrow {
  display:flex; align-items:center; gap:12px;
  font-family:"EB Garamond", serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.22em; font-size:.82rem;
  color:var(--rubric); margin-bottom:18px;
}
.eyebrow::before { content:"\2720"; font-size:1rem; color:var(--gold); line-height:1; }
.eyebrow::after {
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--hairline), transparent);
}

h1.doc { /* privacy / terms title */
  font-family:"Cormorant Garamond", serif; font-weight:700;
  font-size:clamp(34px,6vw,46px); color:var(--rubric); line-height:1.05;
}
h2 {
  font-family:"Cormorant Garamond", serif; font-weight:600;
  font-size:1.6rem; color:var(--rubric); margin:0 0 8px;
}
p { margin-bottom:14px; }
.lede { font-size:1.14rem; }
.lede .drop {
  float:left; font-family:"Cormorant Garamond", serif; font-weight:700;
  font-size:4.4rem; line-height:.72; color:var(--rubric);
  margin:8px 12px 0 0;
}
.tag { color:var(--muted); font-style:italic; margin-bottom:24px; }

/* ---- Feature grid ---- */
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.card {
  background:var(--card); border:1px solid var(--hairline); border-radius:14px;
  padding:22px 22px 20px; position:relative;
  box-shadow:0 6px 20px rgba(31,38,47,.06);
}
.card h3 {
  font-family:"Cormorant Garamond", serif; font-weight:600; font-size:1.32rem;
  color:var(--ink); margin-bottom:4px; display:flex; align-items:baseline; gap:9px;
}
.card h3 .mk { color:var(--gold); font-size:1rem; }
.card p { font-size:.98rem; line-height:1.6; color:#4A4235; margin:0; }
.card.gild { border-top:3px solid var(--gold); }

/* ---- Hours strip ---- */
.hours {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
}
.hours span {
  font-family:"Cormorant Garamond", serif; font-size:1.05rem;
  padding:5px 13px; border:1px solid var(--hairline); border-radius:999px;
  background:#fff8ec; color:var(--rubric-deep);
}

/* ---- FAQ ---- */
.faq details {
  border-bottom:1px solid var(--hairline); padding:14px 2px;
}
.faq summary {
  cursor:pointer; list-style:none; font-weight:600; color:var(--ink);
  font-size:1.08rem; display:flex; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"\002B"; color:var(--gold); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after { content:"\2212"; }
.faq details[open] summary { color:var(--rubric); }
.faq .a { margin-top:10px; color:#4A4235; font-size:1rem; }

/* ---- Contact card ---- */
.contact {
  background:var(--charcoal); color:var(--parchment); border-radius:16px;
  padding:28px 30px; text-align:center;
  box-shadow:0 12px 34px rgba(31,38,47,.28);
}
.contact h2 { color:#F7F1E3; }
.contact a { color:var(--gold); border-color:rgba(201,162,39,.4); }
.contact a:hover { color:#E4C24E; border-color:var(--gold); }

/* ---- Footer ---- */
footer {
  text-align:center; padding:30px 24px 40px; color:var(--muted); font-size:.9rem;
}
footer .brand { color:var(--rubric); font-family:"Cormorant Garamond",serif;
  font-weight:600; font-size:1.05rem; }
footer nav { margin-top:8px; }
footer nav a { margin:0 8px; border:none; }

@media (max-width:640px) {
  body { font-size:18px; }
  .grid { grid-template-columns:1fr; }
  main { padding:40px 20px 32px; }
}