/* ════════════════════════════════════════════
   Naturome — site in development
   ════════════════════════════════════════════ */

:root{
  --ink:#15180F;
  --ink-soft:#5A6152;
  --ink-faint:#8A9080;
  --paper:#F6F4EE;
  --paper-2:#EDEAE1;
  --forest:#1F3D2B;
  --rule:#D7D3C7;
  --rule-soft:#E4E0D5;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.7 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1{
  font:400 clamp(1.6rem,3.4vw,2.3rem)/1.3 Fraunces,"Iowan Old Style",Georgia,serif;
  letter-spacing:-.015em;margin:0;max-width:24ch;
}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
table{border-collapse:collapse;width:100%}
dl,dd{margin:0}
hr{border:0;border-top:1px solid var(--rule-soft);margin:2.75rem 0}

/* ───── sheet ───── */
.sheet{
  max-width:680px;
  margin-inline:auto;
  padding:clamp(2rem,5vh,3.5rem) clamp(1.5rem,5vw,2.5rem) 3rem;
  min-height:100vh;
  display:flex;flex-direction:column;
}

/* ───── masthead ───── */
.masthead{
  padding-bottom:1.6rem;
  border-bottom:1px solid var(--ink);
  margin-bottom:3.25rem;
}
.mark{height:clamp(22px,4.2vw,30px)}
.descriptor{
  margin-top:1rem;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);
}

/* ───── labels ───── */
.label{
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:1.1rem;
}

/* ───── body ───── */
.body{flex:1}
.lede{
  margin-top:1.4rem;
  max-width:60ch;
  color:var(--ink-soft);
  font-size:1rem;
}

/* ───── status table ───── */
.status th,
.status td{
  padding:.85rem 0;
  border-bottom:1px solid var(--rule-soft);
  font-weight:400;
  text-align:left;
  vertical-align:baseline;
}
.status th{color:var(--ink);padding-right:1.5rem}
.status td{
  width:10.5rem;
  color:var(--ink-faint);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.status tr:last-child th,
.status tr:last-child td{border-bottom:0}
.status tr.current th{color:var(--forest)}
.status tr.current td{color:var(--forest)}

/* ───── colophon ───── */
.colophon{
  margin-top:4.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule-soft);
  display:grid;gap:.6rem;
  font-size:11.5px;line-height:1.6;color:var(--ink-faint);
}
.colophon p:last-child{max-width:62ch}

/* ───── responsive ───── */
@media (max-width:560px){
  .status td{width:auto}
  .status table,
  .status tbody,
  .status tr,
  .status th,
  .status td{display:block}
  .status tr{padding:.85rem 0;border-bottom:1px solid var(--rule-soft)}
  .status tr:last-child{border-bottom:0}
  .status th,
  .status td{padding:0;border:0}
  .status td{margin-top:.2rem}
}