/* =========================================================================
   THE OPEN GATE — « plaque gravée de chenil » design system, prefix ken-
   Vocabulary of an animal shelter, in English: yard (content path),
   lodge (kennel sign, header), aisles (nav), daybreak (flat typographic
   hero, no cover picture), tier (one step of the effort stair = section),
   square (one ruled line of the roster), roundup/walk (the dated feed),
   shift (a dated slot), intake (article head), spread (lead picture),
   column (reading column), sheet (foster sheet, dark box), planner
   (table), tip/memo (boxed asides), onward (read next), fence (footer).
   Palette: assertive lilac ground, plum ink, deep plum dominant, one
   warm brass accent (the violet ribbon is the United States colour of
   animal welfare). Engraved plate titles in Copperplate, humanist text
   in Candara, mono dates. No remote font, no gradient device, no
   ornament, no drop cap, square corners, light scheme only.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- 1. COLOURS · the lilac yard and the plum ink --------------------- */
  --twilight:          #d6c2db;  /* lilac ground of every page                  */
  --twilight-deep:     #c9b3d0;  /* alternated sections                         */
  --twilight-bright:   #e4d7e9;  /* tips, even table rows                       */
  --ink:               #292231;  /* body text                                   */
  --ink-night:         #1e1826;  /* lodge, daybreak, fence, sheets, thead       */
  --ink-soft:          #554b60;  /* asides, meta, standfirsts                   */
  --lead:              #533465;  /* deep plum: links, strong (>=4.5:1)          */
  --lead-pressed:      #3f2850;  /* pressed / hover                             */
  --plum:              #4a2f5a;  /* tags, date rails, left rules                */
  --plum-soft:         #b9a3c9;  /* plum on night grounds                       */
  --plum-pressed:      #3b2450;  /* plum pressed / hover                        */
  --kibble:            #7a4619;  /* quiet brass: hints, pins                    */
  --kibble-warm:       #c9a06b;  /* brass on night grounds                      */
  --rule:              #c2aec9;  /* hairline on lilac                           */
  --rule-night:        #433552;  /* hairline on night                           */
  --night-body:        #e6dcea;  /* text on night grounds                       */
  --night-mist:        #a899b5;  /* quiet links on night grounds                */

  /* ---- 2. TYPE · composed system stacks, nothing fetched ---------------- */
  --stack-title: Copperplate, "Copperplate Gothic Light", "Big Caslon", "Palatino Linotype", Georgia, serif;
  --stack-body: Candara, "Gill Sans Nova", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --stack-mono: "Andale Mono", Menlo, Consolas, "Courier New", monospace;

  --title-weight: 500;
  --title-tracking: 0.035em;     /* the engraved plate is spaced                */
  --caps-tracking: 0.18em;       /* eyebrows, tags, imprint line                */

  --body-size: clamp(1.02rem, 0.97rem + 0.22vw, 1.12rem);
  --body-leading: 1.66;
  --scale-h1: clamp(1.9rem, 1.2rem + 3vw, 3.5rem);
  --scale-h2: clamp(1.35rem, 1.05rem + 1.3vw, 1.95rem);
  --scale-h3: clamp(1.08rem, 1rem + 0.5vw, 1.28rem);
  --scale-h4: 1rem;

  /* ---- 3. RHYTHM -------------------------------------------------------- */
  --measure:        63ch;       /* reading column, 60-65ch                     */
  --measure-wide:  1360px;
  --pad-page:    clamp(1.1rem, 4vw, 4rem);
  --gutter:     clamp(0.9rem, 2.2vw, 2rem);
  --breath:       clamp(2.4rem, 5.5vw, 5.2rem);

  /* ---- 4. DETAILS ------------------------------------------------------- */
  --corner:       0px;          /* everything square, like a kennel plate      */
  --rule-thin:   1px solid var(--rule);
  --ease:     150ms ease;
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--twilight);
  color: var(--ink);
  font-family: var(--stack-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--stack-title);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--scale-h1); }
h2 { font-size: var(--scale-h2); }
h3 { font-size: var(--scale-h3); }
h4 { font-size: var(--scale-h4); }

p, ul, ol { margin: 0 0 1.12em; }
a {
  color: var(--lead);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--ease);
}
a:hover { color: var(--lead-pressed); }
:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 3px;
}
hr { border: 0; border-top: var(--rule-thin); margin: var(--breath) 0; }

::selection { background: var(--plum); color: #fff; }

/* Dates, costs and counts read in tabular numerals. */
.ken-planner, .ken-sheet, .ken-tip, .ken-memo, .ken-shift, .ken-hints,
.ken-tier__step, .ken-daybreak__imprint {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SCAFFOLD
   ========================================================================= */

/* Skip link. Never remove. */
.ken-bypass {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-night); color: var(--twilight-bright);
  padding: 0.7rem 1.15rem; z-index: 60;
}
.ken-bypass:focus { left: 0.6rem; top: 0.6rem; }

/* The yard: useful width of every content zone. */
.ken-yard {
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--pad-page);
}
.ken-pen { display: block; }

/* --- Lodge (the kennel sign above the gate, header) ------------------- */
.ken-lodge {
  background: var(--ink-night);
  color: var(--twilight-bright);
  border-bottom: 3px solid var(--plum);
  padding-block: clamp(0.72rem, 1.6vw, 1.15rem);
}
.ken-lodge__row {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
}
.ken-lodge__brand {
  font-family: var(--stack-title);
  font-size: clamp(1.3rem, 1.08rem + 0.95vw, 1.9rem);
  color: var(--twilight-bright);
  text-decoration: none;
  letter-spacing: 0.012em;
}
.ken-lodge__brand:hover { color: #fff; }
.ken-lodge__brand span {
  display: block;
  font-family: var(--stack-body);
  font-size: 0.63rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--plum-soft);
  margin-top: 0.34rem;
}
.ken-aisles ul {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  list-style: none; margin: 0; padding: 0;
}
.ken-aisles a {
  color: var(--night-mist);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.045em;
  padding-block: 0.25rem;
  transition: color var(--ease);
}
.ken-aisles a:hover { color: var(--plum-soft); }

/* --- Scent (breadcrumb: the trace back to the gate) ------------------- */
.ken-scent { padding-block: clamp(0.85rem, 1.8vw, 1.3rem); }
.ken-scent ol {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.ken-scent li + li::before {
  content: "›";
  margin-right: 0.55rem;
  color: var(--plum);
}
.ken-scent a { color: var(--ink-soft); }
.ken-scent a:hover { color: var(--lead); }
.ken-scent [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* =========================================================================
   HOME · THE DAYBREAK (flat typographic hero on night ground: no picture,
   no veil, the words alone open the site, and the stair starts higher)
   ========================================================================= */

.ken-daybreak { background: var(--ink-night); }
.ken-daybreak__body {
  padding-block: clamp(3rem, 6.8vw, 5.4rem) clamp(2.4rem, 5vw, 4rem);
  max-width: 64rem;
  color: var(--night-body);
}
.ken-daybreak__eyebrow {
  display: flex; align-items: center;
  gap: 0.8rem;
  font-size: 0.74rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--plum-soft);
  margin: 0 0 1rem;
}
.ken-daybreak__eyebrow::after {
  content: "";
  flex: 1;
  max-width: 9rem;
  border-top: 1px solid currentColor;
  opacity: 0.7;
}
.ken-daybreak__body h1 {
  color: #fff;
  max-width: 24ch;
}
.ken-daybreak__body > p:not([class]) {
  font-size: clamp(1.02rem, 0.95rem + 0.38vw, 1.22rem);
  line-height: 1.55;
  max-width: 58ch;
  color: var(--night-body);
  margin: 1.05rem 0 0;
}
/* Double rule + imprint line: the working list, stated like a plate. */
.ken-daybreak__imprint {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 1.1rem;
  margin-top: 1.5rem;
  padding-top: 0.85rem;
  border-top: 3px double rgba(230, 220, 234, 0.5);
  font-family: var(--stack-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kibble-warm);
}
.ken-daybreak__imprint em {
  font-style: normal;
  color: var(--night-body);
}

/* =========================================================================
   TIERS (sections of the effort stair)
   ========================================================================= */

.ken-tier { padding-block: clamp(1.9rem, 4.4vw, 3.6rem); }
.ken-tier--deep { background: var(--twilight-deep); }
.ken-tier__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-bottom: var(--rule-thin);
  padding-bottom: 0.6rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
}
.ken-tier__step {
  font-family: var(--stack-body);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--plum);
  margin-right: 0.7rem;
}
.ken-tier__title { font-size: var(--scale-h2); }
.ken-tier__aside {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 42ch;
}

/* The tag: small-caps eyebrow above titles. */
.ken-tag {
  font-size: 0.73rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 0.55rem;
}

/* =========================================================================
   THE ROSTER · a ruled register of the tiers, text lines on hairlines.
   No mosaic, no thumbnail: the effort stair reads like an index plate.
   ========================================================================= */

.ken-roster {
  list-style: none; margin: 0; padding: 0;
  border-top: var(--rule-thin);
}
.ken-square {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.4rem 1.6rem;
  align-items: start;
  padding-block: 1.15rem;
  border-bottom: var(--rule-thin);
  margin: 0;
}
.ken-square__step { margin: 0; padding-top: 0.22rem; }
.ken-square__caption { min-width: 0; }
.ken-square__title { margin: 0 0 0.3rem; font-size: var(--scale-h3); }
.ken-square__link {
  color: var(--ink);
  text-decoration: none;
}
.ken-square__link:hover {
  color: var(--lead);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}
.ken-square__aside {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 72ch;
}
.ken-square__hint {
  display: inline-block;
  margin-left: 0.15rem;
  font-size: 0.71rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--kibble);
  border: 1px solid currentColor;
  border-radius: var(--corner);
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
}

/* =========================================================================
   THE ROUNDUP · the dated feed, one column: date rail on the left,
   text in the middle, square vignette on the right. The same line serves
   the home, the tier pages and the pinned section.
   ========================================================================= */

.ken-roundup {
  list-style: none; margin: 0; padding: 0;
}
.ken-walk {
  display: grid;
  grid-template-columns: 7.5rem 1fr 96px;
  gap: 1rem 1.5rem;
  align-items: start;
  padding-block: 1.15rem;
  border-bottom: var(--rule-thin);
  margin: 0;
}
.ken-roundup .ken-walk:last-child { border-bottom: 0; }
.ken-shift {
  font-family: var(--stack-mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--plum);
  line-height: 1.75;
  margin: 0;
  padding-top: 0.3rem;
}
.ken-walk__body { min-width: 0; }
.ken-walk__body h3 { margin: 0 0 0.3rem; }
.ken-walk__body h3 a { color: var(--ink); text-decoration: none; }
.ken-walk__body h3 a:hover { color: var(--lead); text-decoration: underline; }
.ken-walk__body p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }
.ken-walk__view {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--corner);
  border: var(--rule-thin);
  justify-self: end;
}

/* Home closing paragraph: where the method and the legal pages live. */
.ken-home-aside {
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: var(--rule-thin);
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 72ch;
}

/* =========================================================================
   ARTICLES · intake, spread, column
   ========================================================================= */

.ken-intake {
  padding-block: clamp(0.4rem, 1.5vw, 1.1rem) clamp(1.3rem, 3vw, 2.1rem);
  max-width: 56rem;
}
.ken-intake__standfirst {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0.9rem 0 0;
}
.ken-hints {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none; margin: 1.05rem 0 0; padding: 0;
  font-size: 0.81rem;
  color: var(--ink-soft);
  border-top: var(--rule-thin);
  padding-top: 0.8rem;
}
.ken-hints a { color: var(--ink-soft); }
.ken-hints a:hover { color: var(--lead); }

.ken-spread { margin: 0; }
.ken-spread__view {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--corner);
  border: var(--rule-thin);
}

.ken-column {
  max-width: var(--measure);
  padding-block: clamp(1.5rem, 3.4vw, 2.5rem) clamp(1.9rem, 4.4vw, 3.2rem);
}
.ken-column > * + * { margin-top: 0.9em; }
.ken-column h2 {
  margin-top: 1.75em;
  padding-bottom: 0.26rem;
  border-bottom: var(--rule-thin);
}
.ken-column h3 { margin-top: 1.35em; }
.ken-column ul, .ken-column ol { padding-left: 1.4rem; }
.ken-column li + li { margin-top: 0.45em; }
.ken-column strong { color: var(--lead-pressed); }

/* Quote: pullquote. */
.ken-pullquote {
  margin: 1.6em 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--plum);
  font-family: var(--stack-title);
  font-size: 1.15em;
  color: var(--lead-pressed);
}

/* Memo: plain boxed aside on deeper lilac. */
.ken-memo {
  background: var(--twilight-deep);
  border: var(--rule-thin);
  border-radius: var(--corner);
  padding: 1rem 1.2rem;
  font-size: 0.95em;
}
.ken-memo p { margin: 0; }

/* Foster sheet: the night ground card, plum title. */
.ken-sheet {
  margin: 1.7em 0;
  background: var(--ink-night);
  color: var(--night-body);
  border-radius: var(--corner);
  padding: 1.15rem 1.3rem 1.25rem;
  border: 1px solid var(--rule-night);
}
.ken-sheet h2, .ken-sheet h3, .ken-sheet h4 {
  font-family: var(--stack-body);
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--plum-soft);
  margin: 0 0 0.7rem;
  border: 0;
  padding: 0;
}
.ken-sheet p, .ken-sheet ul { margin: 0; font-size: 0.95rem; color: var(--night-body); }
.ken-sheet strong { color: #fff; font-variant-numeric: tabular-nums; }
.ken-sheet p + p, .ken-sheet ul { margin-top: 0.5rem; }

/* Tip: bright lilac card with the plum left rule. */
.ken-tip {
  margin: 1.7em 0;
  background: var(--twilight-bright);
  border: var(--rule-thin);
  border-left: 3px solid var(--plum);
  border-radius: var(--corner);
  padding: 1rem 1.25rem;
  font-size: 0.96em;
}
.ken-tip h2, .ken-tip h3, .ken-tip h4 {
  font-family: var(--stack-body);
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 0.5rem;
  border: 0;
  padding: 0;
}
.ken-tip p, .ken-tip ul { margin: 0; }
.ken-tip strong { color: var(--plum); }

/* Planner: the table, register style. */
.ken-planner {
  overflow-x: auto;
  margin: 1.5em 0;
  border: var(--rule-thin);
  border-radius: var(--corner);
}
.ken-planner table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.92em;
}
.ken-planner th, .ken-planner td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.ken-planner caption {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-size: 0.76rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--plum);
  border-bottom: 1px solid var(--rule);
}
.ken-planner thead th {
  background: var(--ink-night);
  color: var(--night-body);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--stack-body);
}
.ken-planner tr:last-child td { border-bottom: 0; }
.ken-planner tbody tr:nth-child(even) { background: var(--twilight-bright); }

/* Read next. */
.ken-onward {
  margin-top: 2.3em;
  padding-top: 1.15rem;
  border-top: 3px double var(--rule);
}
.ken-onward h2 {
  font-size: 1.18rem;
  border-bottom: 0;
  margin: 0 0 0.55rem;
}
.ken-onward ul { list-style: none; margin: 0; padding: 0; }
.ken-onward li { padding: 0.3rem 0; }
.ken-onward li::before {
  content: "·";
  color: var(--plum);
  margin-right: 0.55rem;
  font-weight: 700;
}

/* =========================================================================
   THE FENCE (footer): four columns, warm brass base line
   ========================================================================= */

.ken-fence {
  margin-top: var(--breath);
  background: var(--ink-night);
  color: var(--night-body);
  box-shadow: inset 0 4px 0 var(--kibble);
}
.ken-fence__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--gutter) * 1.5);
  padding-block: clamp(1.9rem, 4.4vw, 3rem);
}
.ken-fence h2 {
  font-family: var(--stack-body);
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--plum-soft);
  margin-bottom: 0.7rem;
}
.ken-fence ul { list-style: none; margin: 0; padding: 0; }
.ken-fence li { padding-block: 0.22rem; }
.ken-fence a { color: var(--night-mist); text-decoration: none; transition: color var(--ease); }
.ken-fence a:hover { color: var(--plum-soft); text-decoration: underline; }
.ken-fence__foot {
  border-top: 1px solid var(--rule-night);
  padding-block: 1.05rem;
  font-size: 0.79rem;
  color: var(--night-mist);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 0.9rem;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  .ken-fence__row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .ken-square { grid-template-columns: 1fr; gap: 0.2rem; }
  .ken-square__step { padding-top: 0; }
  .ken-walk { grid-template-columns: 1fr 84px; }
  .ken-shift { grid-column: 1 / -1; padding-top: 0; }
  .ken-walk__view { width: 84px; height: 84px; }
  .ken-fence__row { grid-template-columns: 1fr; }
  .ken-daybreak__body { padding-block: 2.5rem 2rem; }
  .ken-tier__head { flex-direction: column; gap: 0.3rem; }
}

@media (max-width: 480px) {
  .ken-walk { grid-template-columns: 1fr; }
  .ken-walk__view { width: 100%; height: 130px; justify-self: stretch; }
  .ken-aisles ul { gap: 0.35rem 0.95rem; }
}

/* Motion courtesy. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Print: the register on paper, night grounds turned white. */
@media print {
  .ken-lodge, .ken-fence, .ken-bypass, .ken-scent { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .ken-column { max-width: none; }
  .ken-sheet { background: #fff; color: #000; border: 1pt solid #000; }
  .ken-daybreak { background: #fff; color: #000; }
  .ken-daybreak__body h1 { color: #000; }
}