/* Meditimer LLC — shared styles for themeditimer.com */
:root{
  --ink:#1b1b18; --ink-2:#4a4a44; --ink-3:#7d7d75;
  --paper:#f6f3ec; --card:#fffefa; --line:#e3ddcf; --hair:#c4b795;
  --wood:#b08a4e; --accent:#8a6d3f; --tea:#2f6a5a;
  --serif:"TeX Gyre Pagella","Palatino Linotype",Palatino,"Book Antiqua","Iowan Old Style",Georgia,serif;
  --sans:"TeX Gyre Heros","Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(138,109,63,.35)}
a:hover{border-bottom-color:var(--accent)}
p{margin:0 0 18px}

/* ---------- site header ---------- */
.site-head{
  position:sticky; top:0; z-index:10;
  background:rgba(246,243,236,.92);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .in{
  max-width:1040px; margin:0 auto; padding:0 28px; height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  font-weight:600; font-size:13px; letter-spacing:.38em; text-transform:uppercase;
  color:var(--ink); border:0; white-space:nowrap;
}
.brand:hover{color:var(--ink)}
.site-nav{display:flex; gap:30px}
.site-nav a{
  font-size:14px; letter-spacing:.04em; color:var(--ink-2); border:0;
  padding:6px 0; border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}

/* ---------- layout ---------- */
.wrap{max-width:680px; margin:0 auto; padding:0 24px}
.wide{max-width:1000px; margin:0 auto; padding:0 24px}
.page-head{text-align:center; padding-top:72px}
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 18px;
}
h1{
  font-family:var(--serif); font-weight:400; font-size:44px; line-height:1.16;
  margin:0; letter-spacing:-.01em;
}
.dek{font-size:19px; color:var(--ink-2); margin:20px auto 0; max-width:30em}
h2{
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 18px;
}
h3{font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.25; margin:0 0 14px}
.lede{font-family:var(--serif); font-size:22px; line-height:1.5}
.rule{height:1px; background:var(--line); margin:64px 0}
.muted{color:var(--ink-3)}
.small{font-size:14px}

/* key / value list */
.kv{list-style:none; margin:0; padding:0}
.kv li{display:flex; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:16px}
.kv li:last-child{border-bottom:0}
.kv .k{flex:0 0 30%; color:var(--ink-3); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; padding-top:3px}
.kv .v{flex:1}

/* dash list */
.dash{list-style:none; margin:0; padding:0}
.dash li{padding:8px 0 8px 26px; position:relative; color:var(--ink-2)}
.dash li:before{content:""; position:absolute; left:2px; top:1.15em; width:11px; height:1.5px; background:var(--wood)}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px 26px}

/* hero image */
.hero{margin:52px auto 0; max-width:760px; padding:0 24px}
.hero img{
  display:block; width:100%; height:auto; border-radius:18px;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 24px 50px -24px rgba(60,40,10,.28);
}
.cap{text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:14px}

/* screen galleries */
.gallery{display:grid; gap:26px 22px}
.gallery figure{margin:0; text-align:center}
.gallery img{display:block; width:100%; height:auto}
.gallery figcaption{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:14px}

/* buttons */
.btn{
  display:inline-block; font-size:15px; font-weight:600; letter-spacing:.04em;
  padding:13px 22px; border:0; border-radius:10px; background:var(--ink); color:var(--paper); cursor:pointer;
}
.btn:hover{background:#33322c; color:var(--paper)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); margin-top:88px}
.site-foot .in{
  max-width:1040px; margin:0 auto; padding:34px 28px 48px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:13px; color:var(--ink-3); letter-spacing:.03em;
}
.site-foot nav{display:flex; gap:22px; flex-wrap:wrap}
.site-foot nav a{color:var(--ink-3); border:0}
.site-foot nav a:hover{color:var(--ink)}

@media (max-width:600px){
  body{font-size:16.5px}
  .site-head .in{padding:0 16px; height:56px}
  .brand{font-size:11.5px; letter-spacing:.3em}
  .site-nav{gap:16px}
  .site-nav a{font-size:13.5px; letter-spacing:.02em}
  .wrap,.wide{padding:0 20px}
  .page-head{padding-top:48px}
  h1{font-size:32px}
  .dek{font-size:17px}
  h3{font-size:24px}
  .lede{font-size:20px}
  .rule{margin:48px 0}
  .hero{margin-top:40px; padding:0 16px}
  .hero img{border-radius:14px}
  .kv li{flex-direction:column; gap:2px}
  .kv .k{flex:none}
  .card{padding:24px 20px}
  .site-foot .in{padding:28px 20px 40px; flex-direction:column; align-items:flex-start}
}
@media (max-width:360px){
  .brand{letter-spacing:.2em}
  .site-nav{gap:12px}
}