/* Rebuild His Temple. Palette drawn from the land of Deuteronomy 8: cedar, olive, wheat, pomegranate, spring water, stone. */
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url("fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  --stone: #f3f5ee; --paper: #ffffff; --cedar: #14261f; --cedar-2: #2b4037; --muted: #5c6b63; --line: #d6dccf;
  --olive: #55662f; --olive-soft: #e6ecd6; --wheat: #d9a93a; --wheat-soft: #f8edcf; --pom: #9b2d3f; --pom-soft: #f6e1e3;
  --water: #1f6577; --water-soft: #dcecef;
  --display: "Bricolage", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --text: "Source Serif", Georgia, "Times New Roman", serif;
  --wrap: 68rem; --read: 41rem; --r: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--stone); color: var(--cedar); font: 400 1.125rem/1.65 var(--text); }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 750; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 650; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-weight: 650; letter-spacing: 0; }
p { margin: 0 0 1em; }
a { color: var(--water); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--cedar); }
:focus-visible { outline: 3px solid var(--wheat); outline-offset: 2px; border-radius: 2px; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: .35em; }
small, .small { font-size: .9rem; }
.muted { color: var(--muted); }
.ui { font-family: var(--display); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.read { max-width: var(--read); }
.wrap > .read { max-width: 46rem; margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); padding: .5rem 1rem; z-index: 10; }

/* ---- header */
.top { background: var(--cedar); color: #fff; }
.top .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; flex-wrap: wrap; }
.brand { font: 750 1.2rem/1 var(--display); letter-spacing: -0.02em; color: #fff; text-decoration: none; display: flex; align-items: center; gap: .6rem; padding: .9rem 0; }
.brand svg { width: 1.7rem; height: 1.7rem; flex: none; }
.nav { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; align-items: center; font: 500 1rem var(--display); }
.nav a, .nav button { color: #dfe7df; text-decoration: none; padding: .5rem .75rem; border-radius: var(--r); background: none; border: 0; font: inherit; cursor: pointer; }
.nav a:hover, .nav button:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav a[aria-current] { color: var(--cedar); background: var(--wheat); }
.nav form { margin: 0; }
.nav .cta { background: var(--wheat); color: var(--cedar); font-weight: 650; }
.nav .cta:hover { background: #e7bb55; color: var(--cedar); }

/* ---- buttons and forms */
.btn { display: inline-block; font: 650 1.05rem/1.2 var(--display); padding: .85rem 1.4rem; border-radius: var(--r); border: 2px solid var(--cedar); background: var(--cedar); color: #fff; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--cedar-2); color: #fff; }
.btn.gold { background: var(--wheat); border-color: var(--wheat); color: var(--cedar); }
.btn.gold:hover { background: #e7bb55; color: var(--cedar); }
.btn.quiet { background: transparent; color: var(--cedar); }
.btn.quiet:hover { background: var(--olive-soft); color: var(--cedar); }
.btn.danger { background: transparent; border-color: var(--pom); color: var(--pom); }
.btn.small { padding: .45rem .8rem; font-size: .92rem; border-width: 1.5px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--water); text-decoration: underline; cursor: pointer; }
.stack > * + * { margin-top: 1.1rem; }
.stack > .hint { margin-top: .35rem; }
label { font: 600 1rem var(--display); display: block; margin-bottom: .3rem; }
.hint { font: 400 .92rem/1.45 var(--text); color: var(--muted); display: block; margin-top: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; font: 400 1.05rem var(--display); padding: .7rem .8rem; border: 1.5px solid #9aa79b; border-radius: var(--r); background: #fff; color: var(--cedar); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--wheat); outline-offset: 0; border-color: var(--cedar); }
fieldset { border: 0; padding: 0; margin: 0; }
/* Floated so the title sits inside the panel instead of across its top border. */
legend { font: 700 1.3rem var(--display); letter-spacing: -0.01em; padding: 0; float: left; width: 100%; margin: 0 0 1rem; }
legend + * { clear: both; margin-top: 0; }
.row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); align-items: end; }
.checks { display: grid; gap: .1rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.checks + label, .checks + .grouplabel { margin-top: 1.4rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font: 400 1rem/1.4 var(--display); margin: 0; padding: .35rem 0; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; accent-color: var(--olive); flex: none; }
.notice { border-left: 5px solid var(--olive); background: var(--olive-soft); padding: .9rem 1.1rem; border-radius: 0 var(--r) var(--r) 0; margin: 0 0 1.25rem; }
.notice.error, .notice.urgent { border-color: var(--pom); background: var(--pom-soft); }
.notice.care { border-color: var(--wheat); background: var(--wheat-soft); }
.notice h3, .notice h4 { margin-bottom: .25em; }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }
[hidden] { display: none !important; }

/* ---- layout blocks */
.band { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.band.paper { background: var(--paper); }
.band.dark { background: var(--cedar); color: #eef2ea; }
.band.dark a { color: var(--wheat); }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.1rem, 3vw, 1.75rem); }
.panel + .panel { margin-top: 1.25rem; }
.cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; } }
.pagehead { padding: 2.5rem 0 1.5rem; }
.pagehead p { max-width: var(--read); }
main { min-height: 60vh; padding-bottom: 4rem; }
main.flush { padding-bottom: 0; }

/* ---- scripture */
.verse { margin: 0; padding: 0 0 0 1.1rem; border-left: 3px solid var(--wheat); }
.verse p { font-style: italic; font-size: 1.15rem; line-height: 1.55; margin: 0 0 .4rem; }
.verse cite { font: 600 .95rem var(--display); font-style: normal; color: var(--muted); }
.band.dark .verse cite { color: #b9c7bb; }
.verse.big p { font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.4; }

/* ---- the wall: 52 stones in four courses, laid bottom-up */
.wall { display: flex; flex-direction: column-reverse; gap: 5px; }
/* Every stone is the same size. Alternate courses are shifted half a stone, with a half stone filling the end. */
.course { display: grid; grid-template-columns: repeat(17, 1fr); gap: 5px; }
.course::before, .course::after { border-radius: 4px; background: rgba(120,135,120,.16); grid-row: 1; }
.course:nth-child(odd)::after { content: ""; grid-column: 17; }
.course:nth-child(even)::before { content: ""; grid-column: 1; }
.course:last-child::after, .course:last-child::before { content: none; }
.s { grid-column: span 2; aspect-ratio: 1.9 / 1; border-radius: 4px; border: 1.5px dashed #a9b5a6; background: transparent; position: relative;
     font: 600 .8rem/1 var(--display); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.s.laid { border: 0; background: var(--wheat); color: var(--cedar); box-shadow: inset 0 -3px 0 rgba(20,38,31,.16); }
.s.missed { border-style: solid; border-color: #c5cdc0; background: #e7eae0; color: #8b978c; }
.s.today { outline: 3px solid var(--cedar); outline-offset: 2px; }
.band.dark .s { border-color: #4d6257; color: #8fa395; }
.band.dark .s.laid { color: var(--cedar); }
.wall.demo .s.laid { animation: lay .5s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes lay { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wall.demo .s.laid { animation: none; } html { scroll-behavior: auto; } }
@media (max-width: 34rem) { .s { font-size: .7rem; } .wall, .course { gap: 3px; } }
.wallcap { font: 500 .95rem var(--display); color: var(--muted); margin-top: .8rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.band.dark .wallcap { color: #b9c7bb; }

/* ---- hero */
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.9rem); font-weight: 800; letter-spacing: -0.035em; line-height: .98; margin-bottom: .35em; }
.hero .ref { font: 600 1rem var(--display); color: var(--wheat); display: block; margin-bottom: 1.6rem; }
.hero p.lede { font-size: 1.25rem; line-height: 1.55; color: #dfe7df; max-width: 33rem; }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; align-items: center; }

/* ---- steps (a real sequence) */
.steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); counter-reset: step; }
.steps li { counter-increment: step; border-top: 3px solid var(--cedar); padding-top: .9rem; margin: 0; }
.steps li::before { content: counter(step); font: 800 2.4rem/1 var(--display); color: var(--olive); display: block; margin-bottom: .4rem; }
.steps h3 { margin-bottom: .3em; }
.steps p { margin: 0; font-size: 1.02rem; }

.pillars { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 2rem; }
.pillar { padding: 1.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); text-decoration: none; color: inherit; display: block; }
.pillar:hover { background: var(--olive-soft); color: inherit; }
.pillar h3 { font-size: 1.7rem; font-weight: 750; margin-bottom: .1em; }
.pillar .lead { font: 500 1rem var(--display); color: var(--olive); margin-bottom: .7rem; display: block; }
.pillar p { font-size: 1rem; margin: 0; }

.facts { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2rem; }
.fact b { font: 800 clamp(2.4rem, 5vw, 3.4rem)/1 var(--display); letter-spacing: -0.03em; display: block; color: var(--wheat); margin-bottom: .3rem; }
.fact p { margin: 0 0 .4rem; }
.fact a { font: 500 .92rem var(--display); }

/* ---- status chips, results */
.chip { display: inline-block; font: 650 .82rem/1 var(--display); padding: .32rem .55rem; border-radius: 99px; background: #e7eae0; color: var(--cedar-2); white-space: nowrap; }
.chip.optimal { background: var(--olive-soft); color: #3c4a1e; }
.chip.watch { background: var(--wheat-soft); color: #6d4f08; }
.chip.high, .chip.low, .chip.urgent { background: var(--pom-soft); color: #7a1f2f; }
.chip.urgent { background: var(--pom); color: #fff; }
.results { width: 100%; border-collapse: collapse; font-family: var(--display); font-size: 1rem; }
.results th { text-align: left; font-weight: 600; color: var(--muted); font-size: .88rem; padding: .5rem .6rem; border-bottom: 2px solid var(--cedar); }
.results td { padding: .7rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.results td.num { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.results .why { font: 400 .98rem/1.5 var(--text); color: var(--cedar-2); margin-top: .25rem; }
.results .grp td { font-weight: 750; font-size: 1.05rem; padding-top: 1.4rem; border-bottom: 1px solid var(--cedar); }
.scroll { overflow-x: auto; }
details.about summary { cursor: pointer; font: 500 .9rem var(--display); color: var(--water); }
details.about p { font-size: .96rem; margin: .4rem 0 0; }

/* ---- plan */
.subnav { position: sticky; top: 0; z-index: 5; background: var(--stone); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: .2rem; overflow-x: auto; font: 600 .98rem var(--display); }
.subnav a { padding: .8rem .8rem; text-decoration: none; color: var(--cedar-2); white-space: nowrap; border-bottom: 3px solid transparent; }
.subnav a:hover { border-color: var(--wheat); }
.section { padding-top: 3rem; scroll-margin-top: 3rem; }
.section > h2 { border-bottom: 3px solid var(--cedar); padding-bottom: .35rem; margin-bottom: 1.2rem; }
.targets { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 1.5rem; }
.target { background: var(--paper); padding: 1rem 1.1rem; flex: 1 1 34%; }
.target b { font: 750 1.9rem/1.1 var(--display); letter-spacing: -0.02em; display: block; }
.target span { font: 500 .92rem var(--display); color: var(--muted); }
.src { font: 400 .88rem/1.5 var(--display); color: var(--muted); margin-top: .6rem; }
.src a { color: var(--muted); }
.src a:hover { color: var(--cedar); }
.week { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.daycard { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--olive); border-radius: var(--r); padding: 1rem 1.1rem; }
.daycard.rest { border-top-color: var(--wheat); background: var(--wheat-soft); }
.daycard.walk { border-top-color: var(--water); }
.daycard.cardio { border-top-color: var(--water); }
.daycard h4 { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.daycard h4 span { font-weight: 500; color: var(--muted); font-size: .92rem; }
.daycard p { font-size: .98rem; margin-bottom: .6rem; }
.ex { list-style: none; padding: 0; margin: 0; font-family: var(--display); font-size: .98rem; }
.ex li { padding: .45rem 0; border-top: 1px solid var(--line); margin: 0; }
.ex small { display: block; color: var(--muted); font-size: .86rem; }
.phases { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-bottom: 1.5rem; }
.phase { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; }
.phase.now { border: 2px solid var(--cedar); }
.phase dl { margin: .6rem 0 0; font: 400 .95rem var(--display); display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; }
.phase dt { color: var(--muted); } .phase dd { margin: 0; font-weight: 600; }
.twocol { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.supp { border-top: 1px solid var(--line); padding: 1.1rem 0; }
.supp:first-of-type { border-top: 0; padding-top: 0; }
.supp h3 { margin-bottom: .15em; }
.supp .dose { font: 600 1rem var(--display); color: var(--olive); margin-bottom: .5rem; }
.supp p { font-size: 1rem; margin-bottom: .4rem; }

/* ---- today */
.today-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 56rem) { .today-grid { grid-template-columns: 1fr; } }
.daynum { margin: 0 0 .35em; font: 800 clamp(3rem, 8vw, 5rem)/.9 var(--display); letter-spacing: -0.04em; }
.daynum small { font: 500 1.1rem var(--display); letter-spacing: 0; color: #b9c7bb; margin-left: .4rem; }
.stonecard { background: var(--wheat); color: var(--cedar); border-radius: var(--r); padding: 1.1rem 1.25rem; margin-top: 1.5rem; }
.stonecard h3 { font-size: 1rem; font-weight: 650; margin-bottom: .2em; }
.stonecard p { margin: 0; font: 500 1.15rem/1.4 var(--display); }
.bigchecks { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.bigchecks .check { border: 1.5px solid var(--line); border-radius: var(--r); padding: .7rem .8rem; background: #fff; }
.bigchecks .check:has(input:checked) { border-color: var(--olive); background: var(--olive-soft); }
@media (max-width: 26rem) { .bigchecks { grid-template-columns: 1fr; } }

/* ---- articles */
.article h1 { margin-bottom: .1em; }
.article .lead { font: 500 1.35rem var(--display); color: var(--olive); margin-bottom: 1.5rem; }
.article h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.cite a { font: 600 .78rem var(--display); text-decoration: none; padding: 0 .12em; }
.reflist { font: 400 .95rem/1.5 var(--display); padding-left: 1.6rem; overflow-wrap: anywhere; }
.reflist li { margin-bottom: .7rem; }
.reflist li:target { background: var(--wheat-soft); outline: 6px solid var(--wheat-soft); }
.aside-verses { display: grid; gap: 1.4rem; align-content: start; }
.article-grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, var(--read)) minmax(14rem, 1fr); align-items: start; }
@media (max-width: 60rem) { .article-grid { grid-template-columns: 1fr; } }
.sticky { position: sticky; top: 1.5rem; }
.drop { border: 2px dashed #9aa79b; border-radius: var(--r); padding: 1.5rem; background: #fff; text-align: left; }
.drop input[type=file] { font: 500 1rem var(--display); width: 100%; margin: .6rem 0 1rem; }
.labgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.1rem 1.5rem; align-items: start; }
.labfield label { display: flex; justify-content: space-between; gap: .5rem; font-size: .96rem; }
.labfield label span { font-weight: 400; color: var(--muted); }
.labfield .read { font: 400 .8rem/1.3 var(--display); color: var(--muted); margin-top: .2rem; overflow-wrap: anywhere; max-width: none; }
.labfield.found input { border-color: var(--olive); background: #fbfdf5; }
.inline { display: flex; gap: .5rem; }
.inline select { width: auto; flex: none; }

/* ---- footer */
.foot { background: var(--cedar); color: #c9d4ca; padding: 2.5rem 0; font: 400 .95rem/1.55 var(--display); }
.foot a { color: #fff; }
.foot .cols { gap: 1.5rem 3rem; }
.foot p { max-width: 38rem; }
@media print { .top, .foot, .subnav, .noprint { display: none !important; } body { background: #fff; font-size: 11pt; } .panel, .daycard, .phase { break-inside: avoid; } }
.band.dark .btn.quiet { color: #fff; border-color: #6f867a; }
.band.dark .btn.quiet:hover { background: rgba(255,255,255,.1); color: #fff; }
.band.dark .daynum small { color: #b9c7bb; }
form.inline { display: inline; }
h3.section { padding-top: 2rem; }
ul.section { padding-top: 1.5rem; }

.band.dark a.btn.gold { color: var(--cedar); }
.band.dark a.btn.quiet { color: #fff; }
.targets.gap { margin-top: 1.5rem; }
.leans { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font: 500 1rem var(--display); margin-bottom: 1.2rem; }
.leans .chip { font-size: .95rem; padding: .45rem .8rem; background: var(--cedar); color: #fff; }
.today-grid .daycard h3 { margin-bottom: .4em; }
.week { align-items: start; }

/* ---- phones: the menu is one row that scrolls sideways instead of wrapping onto two */
@media (max-width: 40rem) {
  .top .wrap { gap: 0; }
  .brand { padding: .85rem 0 .35rem; }
  .nav { margin: 0 -.6rem; width: calc(100% + 1.2rem); flex-wrap: nowrap; overflow-x: auto; font-size: .95rem; padding-bottom: .55rem; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a, .nav button { white-space: nowrap; padding: .45rem .6rem; }
  .pagehead { padding: 1.75rem 0 1.1rem; }
  .drop { padding: 1.1rem; }
}

/* ---- patient portal connection */
.portal { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; background: var(--water-soft); border: 1px solid #b9d5db; border-radius: var(--r); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.portal > div:first-child { flex: 1 1 24rem; }
.portal h3 { margin-bottom: .2em; }
.portal .hint { color: var(--cedar-2); }
.inline > input { flex: 1; min-width: 0; }
.orglist { list-style: none; padding: 0; margin: 0; font-family: var(--display); }
.orglist li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.actions.tight { margin-top: 0; gap: .4rem; }

/* ---- phones: each result becomes a block (name, then value, range and reading on one line) instead of a squeezed table */
@media (max-width: 40rem) {
  .findings, .findings tbody { display: block; }
  .findings thead { display: none; }
  .findings tr { display: grid; grid-template-columns: auto auto 1fr; gap: .2rem .9rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .findings td { border: 0; padding: 0; }
  .findings td:first-child { grid-column: 1 / -1; }
  .findings td:last-child { justify-self: end; }
  .findings tr.grp { display: block; padding: 1.3rem 0 .35rem; border-bottom: 1px solid var(--cedar); }
  .findings .grp td { padding: 0; border: 0; }
  .findings .chip { white-space: normal; text-align: center; }
  .results td, .results th { padding-left: .3rem; padding-right: .3rem; }
}