/* devo.pillartech.co — Monastic
   vellum · ink · ember · wine */
:root{
  --vellum:#f5efe3; --vellum-2:#ede4d3; --ink:#3a3029; --ink-soft:#6f6256; --faint:#a89a88;
  --ember:#9b5a2c; --ember-soft:#c08552; --rule:#d9ccb6; --wine:#6e2f2a;
  --leaf:rgba(255,252,245,.55);
  --night:#2c231e; --night-2:#372c25;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(ellipse 90% 380px at 50% -40px, rgba(226,160,82,.30), rgba(226,160,82,0) 70%),
    var(--vellum);
  font:18px/1.75 "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
a{color:inherit}
.sc{font-variant:small-caps; letter-spacing:.09em; text-transform:lowercase}
.wrap{max-width:620px; margin:0 auto; padding:0 22px}
.skip{position:absolute; left:-999px; top:0; background:var(--ember); color:var(--vellum); padding:6px 12px; z-index:9}
.skip:focus{left:10px; top:10px}
:focus-visible{outline:2px solid var(--ember-soft); outline-offset:2px}

/* ---------- top bar ---------- */
.top{display:flex; justify-content:space-between; align-items:baseline; padding:20px 0 0; font-size:.8rem; color:var(--ink-soft); gap:10px}
.top .mark{font-style:italic; letter-spacing:.02em; white-space:nowrap; text-decoration:none}
.top .mark b{font-weight:400; color:var(--ember); font-style:normal}
.top nav{white-space:nowrap}
.top nav a{text-decoration:none; margin-left:13px; padding-bottom:2px}
.top nav a.on{border-bottom:1px solid var(--ember); color:var(--ink)}
@media(max-width:519px){
  .top{flex-direction:column; align-items:center; gap:2px; padding-top:18px}
  .top nav a{margin:0 9px}
}

/* ---------- ornaments & labels ---------- */
.orn{text-align:center; color:var(--ember-soft); letter-spacing:.6em; margin:34px 0; font-size:.9rem}
.orn.sm{margin:26px 0; font-size:.75rem}
.label{display:block; text-align:center; color:var(--ember); font-size:.8rem; margin:0 0 14px}
.label.left{text-align:left; margin-bottom:6px}

/* ---------- page heading (inner pages) ---------- */
.page-head{text-align:center; padding:46px 4px 6px}
.page-head .eyebrow{color:var(--ember); font-size:.8rem}
.page-head h1{margin:10px 0 6px}
.page-head .sub{font-style:italic; color:var(--ink-soft); font-size:.95rem; margin:0}
.crumb{font-size:.8rem; color:var(--ink-soft); padding-top:26px; text-align:center}
.crumb a{text-decoration:none; color:var(--ember); border-bottom:1px solid rgba(192,133,82,.5)}

/* ---------- leaf card ---------- */
.leaf{background:var(--leaf); border:1px solid var(--rule); border-radius:3px; position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 30px -22px rgba(58,48,41,.45)}
.leaf:before{content:""; position:absolute; inset:5px; border:1px solid rgba(217,204,182,.55); border-radius:2px; pointer-events:none}

h1{font-weight:400; font-size:1.95rem; line-height:1.22; margin:20px 0 10px; letter-spacing:-.005em}
h2{font-weight:400}

/* ---------- buttons ---------- */
.btn{font:inherit; font-size:.85rem; background:none; border:1px solid var(--ember-soft); color:var(--ember); padding:9px 24px; border-radius:999px; cursor:pointer; letter-spacing:.04em; text-decoration:none; display:inline-block; line-height:1.5}
.btn:hover{background:rgba(155,90,44,.07)}
.btn.solid{background:var(--ember); color:var(--vellum); border-color:var(--ember)}
.btn.solid:hover{background:#86491f}
.btn.sm{font-size:.78rem; padding:6px 16px}

/* ---------- progress ticks ---------- */
.progress{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; color:var(--faint); font-size:.76rem}
.ticks{display:inline-flex; gap:4px}
.ticks i{width:9px; height:2px; background:var(--rule); display:block}
.ticks i.on{background:var(--ember)}
.ticks i.done{background:var(--ember-soft)}

/* ---------- dots ---------- */
.dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--ember-soft); vertical-align:middle}
.dot.up{background:none; box-shadow:inset 0 0 0 1px var(--ember-soft)}
.dot.now{background:var(--ember); box-shadow:0 0 0 3px rgba(155,90,44,.18)}

/* ---------- devotional reading (the office) ---------- */
.today{padding:34px 24px 30px; text-align:center}
.today .date{color:var(--ember); font-size:.9rem}
.today .ref{font-style:italic; color:var(--ink-soft); font-size:.95rem}
.thought{font-style:italic; color:var(--ink); font-size:1.06rem; margin:18px auto 0; max-width:30ch; padding-top:18px; border-top:1px solid var(--rule)}
.thought small{display:block; font-style:normal; color:var(--ember); font-size:.74rem; margin-bottom:2px}
.today .btn{margin-top:24px}

.office{text-align:left}
.prep{text-align:center; font-style:italic; color:var(--ink-soft); padding:0 8px; margin:0}
.lectio{margin:8px 0 0; padding:30px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.lectio .ref{text-align:center; font-size:1.05rem; margin-bottom:18px; font-style:normal; color:var(--ink)}
.lectio .ref small{display:block; color:var(--faint); font-size:.72rem}
.lectio p{margin:0 0 .9em; text-align:left; hyphens:auto}
.lectio p:last-child{margin-bottom:0}
.lectio h3{font-weight:400; font-size:.82rem; color:var(--ember); text-align:center; margin:22px 0 8px}
.lectio h3:first-of-type{margin-top:0}
.lectio .gap{display:block; text-align:center; color:var(--faint); letter-spacing:.5em; margin:6px 0 10px}
sup.v{color:var(--ember); font-size:.62em; margin-right:3px; vertical-align:.45em; font-feature-settings:"lnum"; font-style:normal}
.meditatio p{margin:0 0 1.1em; text-indent:1.4em}
.meditatio p:first-of-type{text-indent:0}
.meditatio p:first-of-type:first-letter{float:left; font-size:3.6em; line-height:.86; padding:6px 8px 0 0; color:var(--ember)}
.charge{text-align:center; padding:6px 6px 0}
.charge p{margin:0; font-size:1.06rem}
.ponder ol{list-style:none; padding:0; margin:0; counter-reset:q}
.ponder li{counter-increment:q; padding:0 0 18px 34px; position:relative}
.ponder li:before{content:counter(q, upper-roman) "."; position:absolute; left:0; top:0; color:var(--ember); font-size:.92rem}
.ponder .line{display:block; height:1.8em; border-bottom:1px dotted var(--faint); margin-top:4px}
.ponder .line+.line{margin-top:0}
.oratio{background:linear-gradient(180deg, rgba(155,90,44,.06), rgba(155,90,44,.02)); border-radius:2px; padding:28px 24px; text-align:center; font-style:italic}
.oratio p{margin:0}
.amen{display:block; margin-top:14px; font-style:normal; color:var(--ember)}
.actions{text-align:center; margin:36px 0 0; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.turn{display:flex; justify-content:space-between; gap:16px; margin:30px 0 0; font-size:.86rem; color:var(--ink-soft)}
.turn a{text-decoration:none; max-width:48%}
.turn a.next{text-align:right; margin-left:auto}
.turn em{display:block; color:var(--ink); font-size:.95rem; line-height:1.35; margin-top:2px}

/* ---------- this sunday ---------- */
.lords{display:flex; gap:18px; align-items:stretch; padding:22px 22px; text-decoration:none}
.lords .day{flex:none; width:62px; text-align:center; border-right:1px solid var(--rule); padding-right:16px; line-height:1.15}
.lords .day .m{color:var(--wine); font-size:.74rem; display:block}
.lords .day .n{font-size:2.1rem; display:block; color:var(--wine)}
.lords .day .w{font-size:.7rem; color:var(--faint); display:block; font-style:italic}
.lords .body{flex:1; min-width:0; line-height:1.45}
.lords .eyebrow{color:var(--ember); font-size:.76rem}
.lords .ti{display:block; font-size:1.3rem; margin:2px 0 3px}
.lords .ref{font-style:italic; color:var(--ink-soft); font-size:.92rem}
.lords .by{display:block; color:var(--faint); font-size:.8rem; margin-top:6px}
.lords .by:before{content:"\2720  "; color:var(--wine); opacity:.7}

/* ---------- week strip ---------- */
.week-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px}
.week-head .label{margin:0}
.week-head .p{color:var(--faint); font-size:.78rem; font-style:italic}
.strip{display:grid; grid-template-columns:repeat(10,1fr); text-align:center; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:12px 0 10px; position:relative}
.strip a{text-decoration:none; display:block; line-height:1.2; padding:4px 0 6px; border-radius:2px; position:relative}
.strip a:hover{background:rgba(155,90,44,.06)}
.strip .wd{display:block; font-size:.66rem; color:var(--faint); letter-spacing:.06em}
.strip .dn{display:block; font-size:1.02rem; margin:4px 0 7px; font-feature-settings:"lnum"}
.strip a.sun .dn, .strip a.sun .wd{color:var(--wine)}
.strip a.sun .dn{font-style:italic}
.strip a.cur .dn{color:var(--ember)}
.strip a.cur:after{content:""; position:absolute; left:22%; right:22%; bottom:-11px; height:2px; background:var(--ember)}
.strip a.split:before{content:""; position:absolute; left:0; top:4px; bottom:4px; border-left:1px dotted var(--rule)}
.series{display:grid; grid-template-columns:3fr 7fr; font-size:.74rem; color:var(--ink-soft); margin-top:8px; text-align:center; font-style:italic}
.series span small{display:block; font-style:normal; color:var(--faint); font-size:.68rem}
.legend{display:flex; gap:16px; justify-content:center; font-size:.72rem; color:var(--faint); margin-top:14px; flex-wrap:wrap}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend .jm{width:7px; height:7px; border:1px solid var(--wine); transform:rotate(45deg); display:inline-block; opacity:.7}

/* ---------- calendar ---------- */
.kal{padding:26px 20px 22px}
.kal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px}
.kal-head button{font:inherit; background:none; border:none; color:var(--ember); cursor:pointer; font-size:1.1rem; padding:2px 10px; border-radius:50%}
.kal-head button:disabled{color:var(--rule); cursor:default}
.kal-head button:not(:disabled):hover{background:rgba(155,90,44,.07)}
.kal-title{text-align:center; line-height:1.25}
.kal-title .mo{font-size:1.25rem; display:block}
.kal-title .season{font-size:.74rem; color:var(--faint); font-style:italic}
.grid{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-top:14px}
.grid .h{font-size:.68rem; color:var(--faint); padding-bottom:8px; border-bottom:1px solid var(--rule); margin-bottom:6px; letter-spacing:.06em}
.grid .h.sun{color:var(--wine)}
.cell{aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.95rem; color:var(--ink-soft); text-decoration:none; position:relative; border-radius:50%; font-feature-settings:"lnum"; line-height:1}
.cell.blank{visibility:hidden}
.cell.sun{color:var(--wine); font-style:italic}
.cell .dot{position:absolute; bottom:16%; width:4px; height:4px}
.cell.has{color:var(--ink); cursor:pointer}
.cell.has:hover,.cell.has:focus-visible{background:rgba(155,90,44,.08); outline:none}
.cell.cur{color:var(--ember); box-shadow:inset 0 0 0 1px var(--ember-soft)}
.cell.feast:before{content:"\2720"; position:absolute; top:10%; right:14%; font-size:.5rem; color:var(--wine); opacity:.6; font-style:normal}
.cell.jam:after{content:""; position:absolute; top:13%; left:16%; width:4px; height:4px; border:1px solid var(--wine); transform:rotate(45deg); opacity:.6}
.cell.past{color:var(--faint)}
.cell .ct{display:none}
.kal-note{margin-top:14px; padding-top:14px; border-top:1px solid var(--rule); text-align:center; min-height:3.2em; line-height:1.4}
.kal-note .d{display:block; font-size:.74rem; color:var(--ember)}
.kal-note .t{font-style:italic; font-size:1rem}
.kal-note .t a{text-decoration:none; border-bottom:1px solid var(--rule)}

/* ---------- teaching card (home) ---------- */
.teach{padding:22px 22px 20px}
.teach .sub{color:var(--faint); font-size:.76rem; font-style:italic; display:block; margin-bottom:12px}
.guide{display:flex; gap:14px; align-items:flex-start; text-decoration:none; padding:14px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.glyph{flex:none; width:36px; height:44px; border:1px solid var(--ember-soft); border-radius:1px 3px 3px 1px; position:relative; background:linear-gradient(90deg, rgba(155,90,44,.12) 0 4px, transparent 4px)}
.glyph:after{content:""; position:absolute; left:10px; right:6px; top:12px; height:12px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.guide .meta{display:block; font-size:.72rem; color:var(--faint)}
.guide .ti{display:block; font-size:1.1rem; line-height:1.3}
.guide .ref{font-style:italic; color:var(--ink-soft); font-size:.88rem}
.new{color:var(--ember); font-size:.7rem; margin-left:6px}
.teach .more{display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:.82rem; color:var(--ink-soft)}
.teach .more a{color:var(--ember); text-decoration:none; border-bottom:1px solid var(--ember-soft)}

/* ---------- devotional extras ---------- */
.sermon-tag{color:var(--wine); font-size:.78rem; margin-top:14px}
.jamlink{margin:30px 0 0}
.jamlink:hover .ti{color:var(--ember)}

/* ---------- leader guides ---------- */
.guide-page .page-head h1{font-size:2.1rem}
.callout{padding:24px 22px; background:linear-gradient(180deg, rgba(192,133,82,.13), rgba(192,133,82,.05)), var(--leaf); border-color:#d6bf9c}
.callout dl,.quick dl{margin:0}
.callout dt,.quick dt{color:var(--ember); font-size:.74rem; margin-top:14px}
.callout dt:first-child,.quick dt:first-child{margin-top:0}
.callout dd,.quick dd{margin:0; line-height:1.5}
.callout dd.big{font-size:1.16rem; color:var(--wine); font-style:italic}
.callout dd.kp{font-style:italic; color:var(--ink-soft)}
.rhythm{font-size:.95rem; color:var(--ink-soft); margin:30px 0 18px}
.rhythm .sc,.timing .sc{color:var(--ember); display:block; font-size:.74rem}
.timing{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:14px 0 10px; margin:0 0 10px}
.timing .tl{display:grid; grid-template-columns:repeat(3,1fr); gap:10px 8px; text-align:center; font-size:.76rem; line-height:1.3; color:var(--ink-soft)}
.timing .tl .n{display:block; color:var(--ember-soft); font-size:.7rem}
.timing .tl b{display:block; font-weight:400; color:var(--ember); font-size:.8rem; margin-top:2px}
.timing p{text-align:center; margin:10px 0 0; font-size:.78rem; color:var(--faint); font-style:italic}
.g-sec{padding:34px 0 8px; border-bottom:1px solid var(--rule)}
.g-sec h2{font-size:1.36rem; line-height:1.3; margin:0 0 14px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px}
.g-sec h2 .num{color:var(--ember)}
.g-sec h2 .tt{flex:1 1 60%}
.time{display:inline-block; font-size:.72rem; color:var(--ember); border:1px solid var(--ember-soft); border-radius:999px; padding:1px 10px; letter-spacing:.04em; white-space:nowrap; font-style:normal}
.g-sec h3{font-weight:400; color:var(--ember); font-size:.8rem; margin:20px 0 4px}
.g-sec p{margin:0 0 .9em}
.g-sec.gospel{border-top:3px double var(--rule); margin-top:10px}
.g-sec.gospel h2 .tt:before{content:"\2720  "; color:var(--wine); opacity:.7; font-size:.8em}
.scripture{background:rgba(255,252,245,.6); border:1px solid var(--rule); border-left:3px solid var(--ember-soft); border-radius:2px; padding:16px 18px; margin:6px 0 16px; font-size:.96rem; line-height:1.7}
.scripture .s-head{font-size:.95rem; margin-bottom:8px; color:var(--ink)}
.scripture .s-head .sc{color:var(--ember); font-size:.74rem; margin-right:4px}
.scripture .s-head small{color:var(--faint); font-size:.7rem; margin-left:4px}
.scripture p{margin:0}
.scripture .gap{display:block; text-align:center; color:var(--faint); letter-spacing:.5em}
.prompt{font-style:italic; color:var(--ink-soft); border-left:2px solid var(--ember-soft); padding-left:14px}
.look{margin:0 0 16px; padding:0 0 0 20px}
.look li{margin:0 0 10px; line-height:1.55}
.look li::marker{color:var(--ember-soft)}
.ans{font-weight:600; color:var(--wine)}
.vr{color:var(--faint); font-size:.86rem}
.tp{margin:16px 0; padding:16px 18px; border:1px solid var(--rule); border-radius:2px; background:rgba(255,252,245,.5); line-height:1.6}
.tp .sc{display:block; color:var(--ember); font-size:.74rem; margin-bottom:2px}
.tp.gold{background:linear-gradient(180deg, rgba(192,133,82,.14), rgba(192,133,82,.06)); border-color:#d6bf9c}
.plain{padding-left:20px; margin:0 0 14px} .plain li{margin:0 0 4px} .plain li::marker{color:var(--ember-soft)}
.g-note{font-size:.86rem; color:var(--ink-soft); font-style:italic}
.flow{text-align:center; color:var(--wine); font-size:1.02rem; margin:22px 0 10px!important; line-height:1.8}
.flow .arr{color:var(--ember-soft); margin:0 4px}
.quick{padding:26px 22px}
.quick dd.leave{font-style:italic; color:var(--wine)}
.quick dd em{display:block; color:var(--ink-soft)}
.g-source{font-size:.78rem; color:var(--faint); font-style:italic; text-align:center; margin:28px 6px 0; line-height:1.55}
@media(min-width:760px){
  .guide-page .page-head h1{font-size:2.6rem}
  .callout{padding:30px 40px}
  .quick{padding:30px 40px}
  .timing .tl{grid-template-columns:repeat(6,1fr)}
}
@media print{
  .g-sec{break-inside:auto; padding-top:16px} .g-sec h2{break-after:avoid}
  .scripture,.tp,.callout{background:none; break-inside:avoid}
  .guide-page .page-head{padding-top:0}
}

/* ---------- footer ---------- */
footer{margin:50px 0 0; padding:30px 0 50px; text-align:center; color:var(--faint); font-size:.74rem; line-height:1.6; border-top:1px solid var(--rule)}
footer .site{font-style:italic; color:var(--ink-soft); font-size:.86rem; margin-bottom:10px}
footer .site a{text-decoration:none}

@media(min-width:760px){
  body{font-size:19px}
  .wrap{max-width:700px; padding:0 30px}
  h1{font-size:2.5rem}
  .today{padding:48px 56px 40px}
  .lectio{padding:40px 30px}
  .kal{padding:30px 40px 26px}
  .cell{aspect-ratio:auto; height:56px; border-radius:2px}
  .page-head{padding-top:64px}
}
@media print{
  body{background:#fff; font-size:12pt}
  .top,.actions,.turn,.no-print,.crumb,footer .site{display:none!important}
  .leaf{border:none; box-shadow:none; background:none} .leaf:before{display:none}
  .oratio{background:none; border:1px solid var(--rule)}
  .ponder .line{display:none}
  footer{margin-top:20px; padding:10px 0 0}
  a{text-decoration:none}
}