/* ==========================================================================
   Plain text screens — page.php, single.php, 404.php, index.php

   These render an <article class="content-page"> and nothing else. They are what a page the
   CLIENT creates gets: a privacy notice, terms, a seasonal set menu, a 404. There is no design
   file for them, so this is the design system applied to ordinary prose rather than a port.

   WHY IT IS A SEPARATE STYLESHEET, loaded only on these screens (inc/assets.php):
   every rule below is a RESET of something shell.css does deliberately. Putting them in
   shell.css would mean undoing them again on all five designed pages.

   shell.css is a faithful port of a self-contained design file, and three of its global rules
   are actively hostile to prose — which is exactly why a plain page rendered as unstyled text
   running edge to edge under an invisible nav (found 16 Sep 2026 by looking at one; it returned
   HTTP 200 with every chrome element present):

     *{margin:0; padding:0}                      no paragraph spacing, no list indent
     a{color:inherit; text-decoration:none}      body links indistinguishable from text
     img{width:100%; height:100%; object-fit:cover}   ANY image the client inserts is stretched
                                                      to the full width AND cropped to its box

   The nav is handled separately and must stay in step: liora_is_content_page() in inc/nav.php
   decides both that this file loads and that the nav starts solid. A screen that got one and
   not the other is either invisible navigation or unstyled text.
   ========================================================================== */

.content-page{
  max-width:820px;
  margin:0 auto;
  /* The bar is position:fixed and solid on these screens: 42px logo + 2x14px padding = 70px.
     120px clears it and gives the page the same air a designed section opens with. */
  padding:120px 48px 110px;
  color:var(--ink-soft);
  font-size:16px;
  font-weight:300;
  line-height:1.85;
}

/* ---------- headings ---------- */

.content-page h1{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(34px,5vw,56px); line-height:1.06;
  color:var(--ink);
  margin-bottom:34px;
}
.content-page h2{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(24px,3.2vw,34px); line-height:1.15;
  color:var(--ink);
  margin:52px 0 18px;
}
.content-page h3{
  font-family:var(--sans); font-weight:500;
  font-size:17px; letter-spacing:0.01em;
  color:var(--ink);
  margin:38px 0 14px;
}
.content-page h4,
.content-page h5,
.content-page h6{
  font-family:var(--sans); font-weight:600;
  font-size:14px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink);
  margin:32px 0 12px;
}
.content-page > :first-child{ margin-top:0; }

/* ---------- flow ---------- */

.content-page p,
.content-page ul,
.content-page ol,
.content-page dl,
.content-page table,
.content-page figure,
.content-page blockquote,
.content-page pre{ margin-bottom:22px; }

.content-page ul,
.content-page ol{ padding-left:22px; }
.content-page li{ margin-bottom:8px; }
.content-page li:last-child{ margin-bottom:0; }
.content-page ul{ list-style:disc; }
.content-page ol{ list-style:decimal; }

.content-page strong,
.content-page b{ color:var(--ink); font-weight:600; }

.content-page blockquote{
  border-left:2px solid var(--line-strong);
  padding-left:22px;
  font-family:var(--serif); font-style:italic;
  font-size:19px; line-height:1.6;
  color:var(--ink);
}

.content-page hr{
  border:0; border-top:1px solid var(--line);
  margin:48px 0;
}

/* ---------- links ----------
   shell.css sets `a{color:inherit; text-decoration:none}` for the chrome, where every link is
   already distinguished by position and treatment. In a wall of text that leaves a link
   invisible, so it is given the clay accent and a real underline here. */

.content-page a{
  color:var(--clay);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color .25s ease;
}
.content-page a:hover{ color:var(--terracotta); }

/* ---------- images and media ----------
   Undoes shell.css's `img{width:100%; height:100%; object-fit:cover}`, which exists because
   every image in the DESIGN fills a sized box. An image dropped into a text page has no such
   box, and inherits a crop it was never meant to have. */

.content-page img,
.content-page video,
.content-page iframe{
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:initial;
}
.content-page figure img{ width:100%; }
.content-page figcaption{
  font-size:13px; color:var(--ink-soft); margin-top:10px;
}

/* ---------- tables ---------- */

.content-page table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
}
.content-page th,
.content-page td{
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.content-page th{
  color:var(--ink); font-weight:600;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
}

/* ---------- code ---------- */

.content-page code,
.content-page pre{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:14px;
  background:var(--bone-deep);
}
.content-page code{ padding:2px 6px; border-radius:3px; }
.content-page pre{ padding:18px 20px; overflow-x:auto; }
.content-page pre code{ padding:0; background:none; }

/* ---------- WordPress's own content classes ---------- */

.content-page .alignleft{ float:left; margin:6px 28px 18px 0; }
.content-page .alignright{ float:right; margin:6px 0 18px 28px; }
.content-page .aligncenter{ margin-left:auto; margin-right:auto; }
.content-page .wp-caption{ max-width:100%; }
.content-page::after{ content:''; display:table; clear:both; }

/* ---------- narrow ----------
   24px matches the gutter the nav and footer already drop to at this width. */

@media (max-width:900px){
  .content-page{ padding:96px 24px 80px; }
  .content-page h2{ margin-top:40px; }
}

/* ---------- 404 ----------
   Shares .content-page's column and prose scale; everything below is the three facts and the
   two buttons. Deliberately quiet: somebody who has just hit a dead end does not need a
   designed experience, they need the address. */

.content-404 .lede{ font-size:17px; color:var(--ink-soft); font-weight:300; line-height:1.7; }

.c404-actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin:34px 0 46px;
}

.c404-facts{
  display:grid; gap:26px;
  border-top:1px solid var(--line);
  padding-top:30px;
}
@media (min-width:640px){
  .c404-facts{ grid-template-columns:repeat(3,1fr); gap:32px; }
}

.c404-label{
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500; margin-bottom:9px;
}
.c404-value{ font-size:15px; font-weight:300; line-height:1.7; color:var(--ink); }
.c404-value a{ text-decoration:none; }
.c404-value a:hover{ text-decoration:underline; }

.c404-home{ margin-top:42px; font-size:14px; }
.c404-home a{ text-decoration:underline; color:var(--ink-soft); }