/* ===========================================================================
   Artistly — Journal
   Generated and maintained by tools/seo-engine. Edit the source there, not here.

   Scope note: every selector below is namespaced to .post-* or .journal-*.
   Nothing here overrides an existing site class, so this file cannot change how
   any of the 31 existing pages render — it only styles markup that did not
   exist before. All colour, type and spacing come from the tokens already
   declared in site.css (--paper, --ink, --blue, --ff-edit, --maxw, --pad …),
   so the journal inherits the salon's design rather than restating it.
   =========================================================================== */

/* ---- reading column ------------------------------------------------------
   The service pages run copy at max-width 68ch inside a 1480px shell. An
   article is read start-to-finish rather than scanned, so it gets a narrower
   measure — ~66ch — centred in the same shell. */
.post-body {
  --post-measure: 66ch;
}

.post-meta {
  max-width: var(--maxw);
  margin: 14px auto 0;
  padding: 0 var(--pad);
  font-family: var(--ff-text);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--g-500);
}

.post-article {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 44px) var(--pad) 0;
}

.post-article > * {
  max-width: var(--post-measure);
}

/* ---- body copy ---------------------------------------------------------- */
.post-article p {
  font-family: var(--ff-edit);
  font-size: clamp(16.5px, 1.6vw, 19.5px);
  line-height: 1.68;
  color: var(--g-700);
  margin: 0 0 1.05em;
}

.post-article p strong { color: var(--ink); font-weight: 600; }
.post-article p em { font-style: italic; }

.post-article a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .2s var(--ease);
}
.post-article a:hover { color: var(--blue-deep); }

.post-article code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .88em;
  background: rgba(28, 63, 126, .07);
  padding: .12em .38em;
  border-radius: 2px;
}

/* ---- headings ----------------------------------------------------------- */
.post-h2 {
  font-family: var(--ff-disp);
  font-size: clamp(23px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: clamp(38px, 5vw, 60px) 0 16px;
  text-wrap: balance;
  scroll-margin-top: 96px;
}
.post-h2 em { font-family: var(--ff-edit); font-style: italic; font-weight: 400; }

.post-h3 {
  font-family: var(--ff-disp);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: clamp(26px, 3.4vw, 38px) 0 12px;
}

.post-h4 {
  font-family: var(--ff-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 24px 0 8px;
}

/* ---- lists -------------------------------------------------------------- */
.post-ul, .post-ol {
  font-family: var(--ff-edit);
  font-size: clamp(16.5px, 1.6vw, 19.5px);
  line-height: 1.62;
  color: var(--g-700);
  margin: 0 0 1.15em;
  padding-left: 1.25em;
}
.post-ul li, .post-ol li { margin-bottom: .5em; }
.post-ul li::marker { color: var(--blue); }
.post-ol li::marker { color: var(--blue); font-family: var(--ff-text); font-size: .82em; }
.post-ul li strong, .post-ol li strong { color: var(--ink); font-weight: 600; }

/* ---- pull quote --------------------------------------------------------- */
.post-quote {
  margin: clamp(28px, 4vw, 44px) 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--blue);
}
.post-quote p {
  font-family: var(--ff-disp);
  font-size: clamp(19px, 2.3vw, 25px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}

.post-rule {
  border: 0;
  border-top: 1px solid var(--g-100);
  margin: clamp(34px, 4.5vw, 52px) 0;
}

/* ---- price tables -------------------------------------------------------
   These carry the salon's real published prices, so they need to read as a
   document of record: tabular figures, aligned, no decoration competing. */
.post-table-wrap {
  max-width: var(--post-measure);
  overflow-x: auto;
  margin: clamp(24px, 3.4vw, 36px) 0;
  border: 1px solid var(--g-100);
  background: var(--white);
}

.post-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-family: var(--ff-text);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

.post-table th,
.post-table td {
  text-align: left;
  padding: 11px 16px;
  border-top: 1px solid var(--g-100);
  color: var(--g-700);
}

.post-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-500);
  background: var(--paper);
  border-top: 0;
  border-bottom: 1px solid var(--g-100);
  white-space: nowrap;
}

.post-table td strong { color: var(--ink); font-weight: 600; }
.post-table tbody tr:hover { background: rgba(28, 63, 126, .035); }

/* ---- on-this-page ------------------------------------------------------- */
.post-toc {
  max-width: var(--maxw);
  margin: clamp(22px, 3vw, 32px) auto 0;
  padding: 0 var(--pad);
}
.post-toc__label {
  font-family: var(--ff-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g-500);
  margin: 0 0 10px;
}
.post-toc ol {
  max-width: var(--post-measure);
  margin: 0;
  padding: 16px 20px 16px 34px;
  border-left: 1px solid var(--g-100);
  list-style: decimal;
}
.post-toc li { margin-bottom: 7px; }
.post-toc li::marker {
  color: var(--g-300);
  font-family: var(--ff-text);
  font-size: 11px;
}
.post-toc a {
  font-family: var(--ff-text);
  font-size: 14.5px;
  color: var(--g-700);
  text-decoration: none;
}
.post-toc a:hover { color: var(--blue); text-decoration: underline; }

/* ---- related reading ---------------------------------------------------- */
.post-related__grid {
  display: grid;
  gap: 1px;
  background: var(--g-100);
  border: 1px solid var(--g-100);
  margin-top: 4px;
}
@media (min-width: 720px) {
  .post-related__grid { grid-template-columns: repeat(2, 1fr); }
}
.post-related__grid a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--paper);
  padding: 18px 20px;
  text-decoration: none;
  transition: background .22s var(--ease);
}
.post-related__grid a:hover { background: var(--white); }
.post-related__grid b {
  font-family: var(--ff-disp);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.post-related__grid span {
  font-family: var(--ff-text);
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--g-500);
}

/* ===========================================================================
   Journal index
   =========================================================================== */
.journal-grid {
  max-width: var(--maxw);
  margin: clamp(26px, 4vw, 44px) auto 0;
  padding: 0 var(--pad);
  display: grid;
  gap: 1px;
  background: transparent;
}

.journal-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: clamp(24px, 3.2vw, 34px) 0;
  border-top: 1px solid var(--g-100);
  text-decoration: none;
  transition: opacity .25s var(--ease);
}
.journal-card:last-child { border-bottom: 1px solid var(--g-100); }
.journal-card:hover { opacity: .72; }

@media (min-width: 860px) {
  .journal-card {
    grid-template-columns: 150px minmax(0, 1fr) 110px;
    gap: 32px;
    align-items: baseline;
  }
}

.journal-card__date {
  font-family: var(--ff-text);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g-500);
  white-space: nowrap;
}

.journal-card__title {
  font-family: var(--ff-disp);
  font-size: clamp(21px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.14;
  color: var(--ink);
  text-wrap: balance;
}

.journal-card__sub {
  grid-column: 1 / -1;
  font-family: var(--ff-edit);
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  line-height: 1.6;
  color: var(--g-700);
  max-width: 72ch;
}
@media (min-width: 860px) {
  .journal-card__sub { grid-column: 2 / 3; }
}

.journal-card__go {
  font-family: var(--ff-text);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--blue);
  white-space: nowrap;
}
@media (min-width: 860px) {
  .journal-card__go { text-align: right; grid-row: 1; grid-column: 3; }
}

.journal-empty {
  max-width: var(--maxw);
  margin: 40px auto;
  padding: 0 var(--pad);
  font-family: var(--ff-edit);
  color: var(--g-500);
}

@media (prefers-reduced-motion: reduce) {
  .journal-card, .post-related__grid a, .post-article a { transition: none; }
}