/* ============================================================
   Cylocybe - the Journal: single blog-post reading experience.
   A dedicated, modern layout, deliberately independent of the older
   .cylo-page / .cylo-product content system. Everything is namespaced
   under .cylo-post so it can never collide with page/product rules.
   Uses the global brand tokens from style.css :root
   (--anton, --san, --display, --ink, --soft, --mute, --orange, --hair...).
   ============================================================ */

.cylo-post{
  --measure:40rem;        /* reading column - ~66 characters */
  --wide:54rem;           /* hero + cover width */
  color:var(--soft);
  font-family:var(--san);
  overflow-x:hidden;      /* belt-and-braces against any wide child */
}

/* ---------------------------------------------------------- hero ---- */
.cylo-post__hero{
  width:min(100% - 2 * var(--page-gutter), var(--wide));
  margin-inline:auto;
  padding:var(--hero-top) 0 0;
  text-align:center;
}
.cylo-post__kicker{
  font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--orange);font-weight:700;margin:0 0 1.5rem;
}
.cylo-post__title{
  font-family:var(--anton);font-weight:400;
  font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.012em;
  color:var(--ink);margin:0 0 1.6rem;
}
.cylo-post__deck{
  font-size:clamp(1.15rem,2.3vw,1.4rem);line-height:1.55;
  color:var(--mute);max-width:36rem;margin:0 auto 2.2rem;
}
.cylo-post__meta{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.9rem;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}
.cylo-post__meta .cylo-post__dot{width:4px;height:4px;border-radius:50%;background:var(--orange);opacity:.75}

/* ---------------------------------------------------------- cover --- */
.cylo-post__cover{
  width:min(100% - 2 * var(--page-gutter), var(--wide));
  margin:3rem auto 0;
}
.cylo-post__cover img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;
  border-radius:16px;border:1px solid var(--hair);
}
.cylo-post__cover figcaption{
  margin-top:.9rem;font-size:.8rem;color:var(--mute);text-align:center;
}

/* --------------------------------------------------- reading body ---- */
.cylo-post__body{
  width:min(100% - 2 * var(--page-gutter), var(--measure));
  margin:3.4rem auto 0;
  font-size:1.2rem;line-height:1.9;color:var(--soft);
}
.cylo-post__body > *:first-child{margin-top:0}
.cylo-post__body p{margin:0 0 1.7rem}
/* lead paragraph - larger, brighter standfirst */
.cylo-post__body > p:first-of-type{font-size:1.4rem;line-height:1.6;color:var(--ink);margin-bottom:2.1rem}
.cylo-post__body strong{color:var(--ink);font-weight:600}
.cylo-post__body em{font-style:italic}
.cylo-post__body a{
  color:var(--orange);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--orange-soft);
}
.cylo-post__body a:hover{text-decoration-color:var(--orange)}

.cylo-post__body h2{
  font-family:var(--anton);font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.5rem);line-height:1.12;letter-spacing:-.005em;
  color:var(--ink);margin:3.8rem 0 1.2rem;
}
/* short orange accent rule above each h2 - editorial touch */
.cylo-post__body h2::before{
  content:"";display:block;width:2.4rem;height:3px;border-radius:2px;
  background:var(--orange);margin-bottom:1.1rem;
}
.cylo-post__body h3{
  font-family:var(--display);font-style:italic;font-weight:700;
  font-size:clamp(1.4rem,2.6vw,1.7rem);color:var(--ink);margin:2.8rem 0 .8rem;
}

.cylo-post__body blockquote{
  margin:2.8rem 0;padding:.2rem 0 .2rem 1.7rem;border-left:3px solid var(--orange);
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.5rem,3vw,1.95rem);line-height:1.38;color:var(--ink);
}
.cylo-post__body blockquote p{margin:0 0 .6rem}
.cylo-post__body blockquote p:last-child{margin-bottom:0}
.cylo-post__body blockquote cite{
  display:block;font-family:var(--san);font-style:normal;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:.9rem;
}

.cylo-post__body ul,.cylo-post__body ol{margin:0 0 1.9rem;padding:0;list-style:none}
.cylo-post__body ul li{
  position:relative;padding:.55rem 0 .55rem 1.7rem;line-height:1.7;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.cylo-post__body ul li:last-child{border-bottom:0}
.cylo-post__body ul li::before{
  content:"";position:absolute;left:.15rem;top:1.2rem;
  width:7px;height:7px;border-radius:50%;background:var(--orange);
}
.cylo-post__body ol{counter-reset:cyp}
.cylo-post__body ol li{
  counter-increment:cyp;position:relative;padding:.55rem 0 .55rem 2.7rem;line-height:1.7;
}
.cylo-post__body ol li::before{
  content:counter(cyp);position:absolute;left:0;top:.5rem;
  font-family:var(--anton);color:var(--orange);font-size:1.35rem;line-height:1;
}

.cylo-post__body figure{margin:2.9rem 0}
.cylo-post__body img{display:block;max-width:100%;height:auto;border-radius:12px;border:1px solid var(--hair)}
.cylo-post__body figcaption{margin-top:.85rem;font-size:.8rem;color:var(--mute);text-align:center}

.cylo-post__body hr{border:0;border-top:1px solid var(--hair);margin:3.2rem 0}
.cylo-post__body pre{
  background:#0c0c0c;border:1px solid var(--hair);border-left:3px solid var(--orange);border-radius:8px;
  padding:1.3rem 1.5rem;margin:2.1rem 0;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92rem;line-height:1.7;color:var(--soft);
  overflow:auto;
}
.cylo-post__body code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;
  background:rgba(255,255,255,.06);padding:.1em .4em;border-radius:4px;
}
.cylo-post__body pre code{background:none;padding:0}

/* ---------------------------------------------------------- foot ---- */
.cylo-post__foot{
  width:min(100% - 2 * var(--page-gutter), var(--measure));
  margin:3.4rem auto 0;padding:2.4rem 0 12vh;border-top:1px solid var(--hair);
}
.cylo-post__tags{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 2.2rem}
.cylo-post__tag{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--hair);border-radius:999px;padding:.45rem .95rem;text-decoration:none;
  transition:border-color .2s,color .2s;
}
.cylo-post__tag:hover{border-color:var(--orange);color:var(--orange)}
.cylo-post__back{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;color:var(--orange);text-decoration:none;letter-spacing:.02em;
  transition:gap .2s;
}
.cylo-post__back:hover{gap:.85rem}

/* ---------------------------------------------------------- mobile -- */
@media (max-width:640px){
  .cylo-post__body{font-size:1.12rem;line-height:1.8}
  .cylo-post__body > p:first-of-type{font-size:1.24rem}
  .cylo-post__cover img{aspect-ratio:4/3}
}
/* Post data/cost tables (e.g. the spore-syringe cost breakdown). Was an inline <style> in the
   post body (stripped on import); moved here + dark-themed. Stacks to labelled rows under 600px. */
.cost-table,.cylo-post .cost-table{width:100%;border-collapse:collapse;font-size:.95rem;margin:0}
.table-wrapper,.cylo-post .table-wrapper{overflow-x:auto;margin:2em 0}
.cost-table th,.cost-table td{padding:12px 15px;text-align:left;border-bottom:1px solid rgba(255,255,255,.12)}
.cost-table thead th{background:#1c1c1c;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.72rem}
.cost-table tbody tr:last-of-type td{border-bottom:2px solid #ff9a52}
.cost-table tfoot .total-label{font-weight:700;font-size:1.05em;text-align:right;color:#cfc7d6}
.cost-table tfoot .total-value{font-weight:800;font-size:1.15em;color:#ff9a52}
@media screen and (max-width:600px){
  .cost-table thead{display:none}
  .cost-table tr{display:block;margin-bottom:1.25em;border-bottom:3px solid #ff9a52}
  .cost-table td{display:block;text-align:right;border-bottom:1px dotted rgba(255,255,255,.14);padding:10px}
  .cost-table td::before{content:attr(data-label);float:left;font-weight:700;text-transform:uppercase;color:#9a90a6}
  .cost-table td:last-child{border-bottom:0}
  .cost-table tfoot td{display:block;text-align:left;padding:15px 10px}
  .cost-table tfoot .total-label{display:none}
  .cost-table tfoot .total-value{font-size:1.2em;text-align:right}
  .cost-table tfoot .total-value::before{content:"Total cost per product:";float:left;text-transform:uppercase;color:#9a90a6}
}
/* ============================================================
   The Journal - blog index (home.php). Card grid matching the
   single-post reading design; namespaced .cylo-index / .cylo-card.
   ============================================================ */
.cylo-index__hero{
  width:min(100% - 2 * var(--page-gutter), 54rem);
  margin-inline:auto;padding:var(--hero-top) 0 0;text-align:center;
}
.cylo-index__title{
  font-family:var(--anton);font-weight:400;
  font-size:clamp(2.8rem,7vw,5rem);line-height:1.02;letter-spacing:-.012em;
  color:var(--ink);margin:1.4rem 0 1.4rem;
}
.cylo-index__deck{
  font-size:clamp(1.1rem,2.2vw,1.35rem);line-height:1.55;color:var(--mute);
  max-width:36rem;margin:0 auto;
}
.cylo-cards{
  width:min(100% - 2 * var(--page-gutter), 68rem);
  margin:4rem auto 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem;
}
.cylo-card{min-width:0}
.cylo-card__link{
  display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit;
  border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.02);
  transition:border-color .2s,transform .2s;
}
.cylo-card__link:hover{border-color:var(--orange);transform:translateY(-3px)}
.cylo-card__cover{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0c0c0c}
.cylo-card__cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.cylo-card__cover--empty{background:linear-gradient(135deg,#1a1220,#0c0c0c)}
.cylo-card__body{display:flex;flex-direction:column;gap:.65rem;padding:1.5rem 1.6rem 1.7rem}
.cylo-card__kicker{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--orange);font-weight:700;
}
.cylo-card__title{
  font-family:var(--anton);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.85rem);
  line-height:1.1;letter-spacing:-.005em;color:var(--ink);
}
.cylo-card__link:hover .cylo-card__title{color:var(--orange)}
.cylo-card__ex{font-size:1rem;line-height:1.6;color:var(--mute);margin-top:.1rem}
.cylo-card__meta{
  display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:.9rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
.cylo-index__pager{
  width:min(100% - 2 * var(--page-gutter), 68rem);
  margin:3.5rem auto 12vh;display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;
}
.cylo-index__pager .page-numbers{
  color:var(--soft);border:1px solid var(--hair);border-radius:8px;
  padding:.55rem .95rem;text-decoration:none;
}
.cylo-index__pager .current{background:var(--orange);color:#1a0f06;border-color:var(--orange)}
.cylo-index__empty{text-align:center;color:var(--mute);padding:6vh 0 12vh}
@media (max-width:720px){
  .cylo-cards{grid-template-columns:1fr;gap:1.8rem}
}