/* ==========================================================================
   Park Homes Law — Articles
   Palette taken from the live site: navy nav bar, cornflower blue actions.
   All colours live in :root.
   ========================================================================== */

:root {
  --navy:       #0e2c4f;   /* nav bar navy — headings, dark panels */
  --navy-deep:  #142240;   /* footer */
  --blue:       #5b8cd6;   /* the site's action blue */
  --blue-deep:  #2d5ba0;   /* same blue darkened for text on light — AA */
  --teal:       #4c8b9e;   /* the teal in the logo mark */

  --paper:      #ffffff;   /* page background */
  --band:       #f2f5f9;   /* hero and panel tint */
  --ink:        #1b2e56;   /* headings */
  --ink-body:   #2c3a4e;   /* body text */
  --ink-soft:   #5a6980;   /* secondary text */
  --rule:       #dfe4ec;   /* hairlines */
  --rule-dark:  rgba(255,255,255,0.16);

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 42rem;
  --wide:    62rem;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--blue-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem;
  font-weight: 700; text-decoration: none; z-index: 50;
}
.skip:focus { left: 1rem; top: 1rem; color: #fff; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.wrap--narrow { max-width: var(--measure); }

/* --- Header --------------------------------------------------------------
   Deliberately NOT a copy of the site menu. This section is linked to
   directly and shared, so the header does one job: say whose it is, and
   offer the way back to the main site.
   ------------------------------------------------------------------------ */

.site-head {
  background: #fff;
  border-bottom: 3px solid var(--navy);
}

.site-head__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding-top: 18px; padding-bottom: 18px;
}

.site-head__logo img { display: block; height: 64px; width: auto; }

/* The main site runs a wider container than the article content does, so the
   header gets its own width to keep the logo in the same place as every
   other page. Delete this rule to line the logo up with the article text
   below it instead. */
.site-head .wrap { max-width: 71.25rem; padding-left: 15px; padding-right: 15px; }

.site-head__back {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  border: 1px solid var(--rule);
  padding: .6rem 1.15rem;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.site-head__back::after { content: "\2192"; transition: transform .2s var(--ease); }
.site-head__back:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.site-head__back:hover::after { transform: translateX(3px); }

/* --- Hero ---------------------------------------------------------------- */

.hero { background: var(--band); border-bottom: 1px solid var(--rule); }

.hero__inner { padding-top: 3.25rem; padding-bottom: 3.5rem; }

.eyebrow {
  margin: 0 0 1rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue-deep);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 8vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--navy);
  margin: 0 0 1.15rem;
}

.hero .standfirst {
  margin: 0; max-width: 34rem;
  font-size: 1.125rem; line-height: 1.6;
  color: var(--ink-soft);
}

/* --- Topic filters ------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: .5rem; padding: 2.25rem 0 .5rem; }

.chip {
  font: inherit;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.chip:hover { border-color: var(--blue); color: var(--blue-deep); }
.chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* --- Article index ------------------------------------------------------- */

.index-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.index-list > li { border-top: 1px solid var(--rule); }
.index-list > li:last-child { border-bottom: 1px solid var(--rule); }

.entry {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0 2.5rem;
  align-items: start;
  padding: 2.25rem 1.25rem;
  margin: 0 -1.25rem;
  text-decoration: none;
  color: inherit;
  transition: background .2s var(--ease);
}
.entry:hover { background: var(--band); color: inherit; }

/* Signature: the date set as a filing stamp */
.stamp {
  display: block;
  border-left: 2px solid var(--rule);
  padding-left: .9rem;
  transition: border-color .2s var(--ease);
}
.entry:hover .stamp { border-left-color: var(--blue); }

.stamp__day {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--navy);
}

.stamp__rest {
  display: block;
  margin-top: .35rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-deep);
}

.entry__main { display: block; }

.entry__topic {
  display: inline-block;
  margin-bottom: .6rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal);
}

.entry__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.22;
  letter-spacing: -.012em;
  color: var(--navy);
  margin-bottom: .5rem;
}
.entry:hover .entry__title { text-decoration: underline; text-decoration-color: var(--blue); }

.entry__summary { display: block; color: var(--ink-soft); }

.entry__more {
  display: inline-block;
  margin-top: .9rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-deep);
}
.entry__more::after { content: " \2192"; display: inline-block; transition: transform .2s var(--ease); }
.entry:hover .entry__more::after { transform: translateX(4px); }

.empty { padding: 3rem 0; color: var(--ink-soft); }

/* --- Article page -------------------------------------------------------- */

.article__head { padding-top: 3rem; }

.crumbs {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}
.crumbs a { color: var(--blue-deep); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 .3rem; }

.article__head h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.125rem, 5.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--navy);
  margin: 0 0 1.25rem;
}

.article__standfirst {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.75rem;
}

.article__byline {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem;
  margin: 0 0 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.article__byline time { color: var(--blue-deep); }

.article__body { padding-bottom: 1rem; }
.article__body > *:first-child { margin-top: 0; }
.article__body p { margin: 0 0 1.4rem; }

.article__body > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.9rem;
  line-height: .82;
  padding: .1em .12em 0 0;
  color: var(--blue-deep);
}

.article__body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.24;
  letter-spacing: -.012em;
  color: var(--navy);
  margin: 3rem 0 1rem;
}

.article__body h3 {
  font-size: 1.0625rem; font-weight: 700;
  color: var(--navy);
  margin: 2.25rem 0 .65rem;
}

.article__body ul,
.article__body ol { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.article__body li { margin-bottom: .55rem; }
.article__body li::marker { color: var(--blue); }

.article__body blockquote {
  margin: 2.5rem 0;
  padding-left: 1.75rem;
  border-left: 3px solid var(--blue);
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--navy);
}
.article__body blockquote p:last-child { margin-bottom: 0; }

.article__body a { text-decoration: underline; }

.article__body hr { border: 0; border-top: 1px solid var(--rule); margin: 2.75rem 0; }

.article__body table {
  width: 100%; border-collapse: collapse;
  margin: 0 0 1.75rem; font-size: .9375rem;
}
.article__body th,
.article__body td { text-align: left; padding: .7rem .75rem; border-bottom: 1px solid var(--rule); }
.article__body th {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom-color: var(--navy);
}

.callout {
  margin: 2.25rem 0;
  padding: 1.4rem 1.6rem;
  background: var(--band);
  border-left: 3px solid var(--blue);
  font-size: 1rem;
}
.callout p { margin: 0; }
.callout strong { color: var(--navy); }

/* --- Call to action ------------------------------------------------------ */

.cta {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.75rem;
  margin: 3.5rem 0 2.5rem;
  padding: 2.5rem;
  background: var(--navy);
  color: rgba(255,255,255,.78);
}

.cta > div { flex: 1 1 22rem; }

.cta h2 {
  font-family: var(--font-display);
  font-weight: 500; font-size: 1.75rem; line-height: 1.2;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0 0 .65rem;
}

.cta p { margin: 0; max-width: 32rem; }

.button {
  display: inline-block; flex: 0 0 auto;
  background: var(--blue); color: #fff;
  padding: .95rem 2rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.button:hover { background: #fff; color: var(--navy); }

/* --- Prev / next --------------------------------------------------------- */

.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}

.pager__item {
  display: block; background: #fff;
  padding: 1.5rem 1.6rem;
  text-decoration: none; color: var(--navy);
  transition: background .2s var(--ease);
}
.pager__item:hover { background: var(--band); color: var(--navy); }
.pager__item--right { text-align: right; }
.pager__item:only-child { grid-column: 1 / -1; }

.pager__label {
  display: block; margin-bottom: .4rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-deep);
}

.pager__title { display: block; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; }

/* --- Disclaimer & footer ------------------------------------------------- */

.disclaimer {
  font-size: .8125rem; line-height: 1.65;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin: 0 0 4rem;
}

.site-foot { background: var(--navy-deep); color: rgba(255,255,255,.7); font-size: .9375rem; }
.site-foot a { color: #fff; text-decoration: none; }
.site-foot a:hover { color: var(--blue); text-decoration: underline; }

.site-foot__inner {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  justify-content: space-between;
  padding-top: 3rem; padding-bottom: 2.5rem;
}
.site-foot__inner > div { flex: 1 1 18rem; }
.site-foot__inner p { margin: 0 0 .35rem; max-width: 26rem; }

.site-foot__name {
  font-family: var(--font-display);
  font-size: 1.25rem; color: #fff;
  margin-bottom: .5rem !important;
}

.site-foot__links { flex: 0 1 auto !important; }

.site-foot__legal {
  border-top: 1px solid var(--rule-dark);
  padding-top: 1.5rem; padding-bottom: 2.5rem;
  font-size: .8125rem;
}
.site-foot__legal p { margin: 0; }

/* --- Draft banner (only ever seen when signed in) ------------------------ */

.draft-bar { background: #fdf1e3; border-bottom: 1px solid #f0d9b6; color: #8a5a1c; font-size: .875rem; }
.draft-bar .wrap { padding-top: .8rem; padding-bottom: .8rem; }
.draft-bar a { color: #8a5a1c; }

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 720px) {
  .site-head__inner { gap: 1rem; }
  .site-head__logo img { height: 46px; }
  .entry { grid-template-columns: 1fr; gap: 1rem; padding: 1.9rem 1rem; margin: 0 -1rem; }
  .stamp { border-left: 0; border-top: 2px solid var(--rule); padding: .8rem 0 0; display: flex; align-items: baseline; gap: .5rem; }
  .stamp__day { font-size: 1.35rem; }
  .stamp__rest { margin-top: 0; }
  .entry__title { font-size: 1.375rem; }
  .cta { padding: 1.9rem 1.6rem; }
  .pager { grid-template-columns: 1fr; }
  .pager__item--right { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}