/* ── shared.css — common styles for all Ciela site pages ── */

/* ── tokens ── */
:root{
  --paper:#faf7f2; --paper-2:#f3efe6; --paper-3:#efece6;
  --ink:#2a2620; --ink-2:#5d564b; --ink-3:#8a8275; --ink-4:#b6ad9c;
  --rule:#d9d3c6; --rule-soft:#e8e3d6;
  --sage:#7a9382; --sage-soft:#e3ebe3; --sage-deep:#5b7565;
  --warn:#c98a4b; --warn-soft:#f3e6d3;
}

/* ── reset ── */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Geist",ui-sans-serif,system-ui,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
hr.rule{border:0;height:1px;background:var(--rule-soft);margin:0;}

/* ── shell ── */
.wide{max-width:1240px;margin:0 auto;padding:0 40px;}

/* ── utilities ── */
.muted{color:var(--ink-3);}
.mono{font-family:"Geist Mono",monospace;}
.nav-accent{color:var(--sage-deep);}

/* ── nav ── */
.nav{
  position:sticky;top:0;z-index:30;
  background:rgba(250,247,242,.86);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule-soft);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);}
.brand .word{font-family:"Instrument Serif",serif;font-size:24px;letter-spacing:-0.01em;line-height:1;}
.brand .sub{font-family:"Geist Mono",monospace;font-size:9.5px;color:var(--ink-3);letter-spacing:.2em;text-transform:uppercase;margin-left:4px;border-left:1px solid var(--rule);padding-left:10px;}
.nav-links{display:flex;gap:30px;align-items:center;color:var(--ink-2);font-size:13.5px;}
.nav-links a:hover{color:var(--ink);}
.nav-right{display:flex;gap:14px;align-items:center;}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:8px;
  border:1px solid var(--rule);background:#fff;color:var(--ink);
  font:inherit;font-size:13.5px;font-weight:500;letter-spacing:-0.005em;
  cursor:pointer;transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{border-color:var(--ink-3);}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn.dark:hover{background:#1d1a15;}
.btn.ghost{background:transparent;}
.btn.ghost:hover{border-color:var(--ink-3);}
.btn.big{padding:14px 22px;font-size:14.5px;border-radius:10px;}
.btn.small{padding:8px 12px;font-size:12.5px;}
.btn svg{flex:0 0 auto;}

/* ── page header (inner pages) ── */
.pagehead{padding:80px 0 32px;}
.crumbs{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;display:flex;align-items:center;gap:10px;}
.crumbs .sep{opacity:.5;}
.lede{color:var(--ink-2);font-size:17px;line-height:1.65;margin-top:22px;max-width:680px;}
.meta{display:flex;gap:24px;margin-top:24px;font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;}

/* ── footer ── */
footer{
  border-top:1px solid var(--rule-soft);
  padding:56px 0 40px;background:var(--paper-2);
}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:48px;}
.foot-grid h4{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin:0 0 14px;font-weight:500;}
.foot-grid a{display:block;color:var(--ink-2);font-size:13.5px;padding:4px 0;}
.foot-grid a:hover{color:var(--ink);}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--rule-soft);
  color:var(--ink-3);font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.06em;
}
.foot-bottom .right{display:flex;gap:18px;}

/* ── responsive: nav + footer ── */
@media (max-width:900px){
  .nav-links{display:none;}
  .nav-right{display:none;}
  .brand .sub{display:none;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .foot-bottom{flex-direction:column;gap:12px;text-align:center;}
  .foot-bottom .right{justify-content:center;}
}
@media (max-width:640px){
  .wide{padding:0 20px;}
}