/* ===========================================================================
   Hunter & Young HR: main site.
   Grammar: service desk. Register: paper, ink, one claret.

   Palette carried over from the first build by instruction. The layout is
   not: that build hung a folio in the left margin and set the page as a
   printed feature. This one runs a fixed service switcher across the top and
   sets the page as a specification. Same ink, different document.
   ======================================================================== */

:root {
  --sc-canvas:     #F2EFE8;
  --sc-surface:    #E9E5DB;
  --sc-ink:        #1A1712;
  --sc-ink-soft:   #5C564A;
  --sc-accent:     #8A2B2E;
  --sc-accent-ink: #F2EFE8;

  --sc-hairline:        color-mix(in oklab, var(--sc-ink) 16%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 34%, transparent);

  --sc-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Newsreader", Georgia, "Times New Roman", serif;
  --hy-font-furn:    "Archivo", system-ui, -apple-system, sans-serif;

  --sc-measure: 58ch;
  --hy-maxw:    76rem;
  --hy-gut:     clamp(1.25rem, 5vw, 4.5rem);
  --hy-bar:     4rem;

  --hy-paper-edge: 0 1px 1px rgb(26 23 18 / 0.05),
                   0 8px 18px -8px rgb(26 23 18 / 0.14),
                   0 26px 48px -22px rgb(26 23 18 / 0.16);
}

/* Light on dark needs compensation on three axes, and `color` must be
   restated: it is inherited as a computed value, so redefining the token
   alone leaves the text at the body's ink and 1.1:1 against the plate. */
.hy-talk {
  --sc-canvas:   #1A1712;
  --sc-ink:      #EDE8DE;
  --sc-ink-soft: #A39A8B;
  --sc-accent:   #D4736C;
  --sc-hairline:        color-mix(in oklab, var(--sc-ink) 20%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 40%, transparent);
  color: var(--sc-ink);
  background: var(--sc-canvas);
  letter-spacing: 0.004em;
  line-height: 1.68;
}

body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: clamp(1.02rem, 0.98rem + 0.22vw, 1.14rem);
  line-height: 1.66;
  letter-spacing: 0;
  font-optical-sizing: auto;
}

.hy-grain {
  position: fixed; inset: 0; z-index: 4;
  pointer-events: none; opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

.hy-vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.hy-skip {
  position: fixed; left: var(--hy-gut); top: 0.6rem; z-index: 95;
  transform: translateY(-200%);
  background: var(--sc-ink); color: #F2EFE8;
  padding: 0.7rem 1.1rem; text-decoration: none;
  font-family: var(--hy-font-furn); font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform 180ms var(--sc-ease-out);
}
.hy-skip:focus-visible { transform: none; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
::selection { background: color-mix(in oklab, var(--sc-accent) 24%, transparent); color: var(--sc-ink); }

.hy-nums { font-variant-numeric: tabular-nums; }
.hy-rule { height: 1px; border: 0; margin: 0; background: var(--sc-hairline); }

.hy-h2 {
  margin: 0 0 clamp(1.1rem, 2.4vw, 1.7rem);
  font-family: var(--sc-font-display);
  font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.8rem);
  font-weight: 400; line-height: 1.06; letter-spacing: -0.022em;
  text-wrap: balance;
}
.hy-body {
  margin: 0 0 1.05em; max-width: var(--sc-measure);
  text-wrap: pretty; hyphens: auto; hyphenate-limit-chars: 8 4 3;
}
.hy-body:last-of-type { margin-bottom: 0; }
.hy-src {
  margin: clamp(1.6rem, 3.5vw, 2.4rem) 0 0; padding-top: 0.75rem;
  border-top: 1px solid var(--sc-hairline); max-width: 56ch;
  font-family: var(--hy-font-furn);
  font-size: 0.72rem; line-height: 1.6; letter-spacing: 0.02em;
  color: var(--sc-ink-soft);
}
.hy-src cite { font-style: italic; }
.hy-eyebrow {
  margin: 0 0 clamp(1rem, 2.4vw, 1.6rem);
  font-family: var(--hy-font-furn);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--sc-accent);
}
/* Anything still waiting on real content from the client. Keyed off the
   attribute as well as the class so a slot cannot go quiet by being marked
   one way and styled the other, and so it stops applying automatically the
   moment the placeholder is replaced by a real element. */
.hy-todo,
[data-hy-todo] { color: var(--sc-accent); }


/* =============================================== THE SERVICE SWITCHER ====
   The chrome and the navigation. Not a minimal wordmark-and-CTA bar: it
   carries all four services, says which one you are in, and hands that
   choice to the enquiry form at the bottom. */
.hy-switch {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--hy-bar);
  display: flex; align-items: center; gap: clamp(0.75rem, 3vw, 2.5rem);
  padding-inline: var(--hy-gut);
  background: color-mix(in oklab, #F2EFE8 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sc-hairline);
  font-family: var(--hy-font-furn);
}
/* A two-line lockup rather than a single word: the name, and underneath it
   what the firm actually does, set exactly as the hero eyebrow is. Grid
   rather than two blocks, so the leading between the two lines is controlled
   here instead of inherited from whatever the bar's line-height happens to
   be. The whole lockup is one link and one tab stop. */
.hy-switch__mark {
  display: grid;
  gap: 0.12rem;
  text-decoration: none; white-space: nowrap;
  line-height: 1;
}
.hy-switch__name {
  font-family: var(--sc-font-display);
  font-size: 1.18rem; font-weight: 500; letter-spacing: 0.01em;
  line-height: 1.05;
}
/* Matches .hy-eyebrow: same face, same claret, same tracking. Tracked text
   gains a trailing space on the last letter, so the negative margin pulls
   the optical left edge back into line with the H above it. */
.hy-switch__sub {
  font-family: var(--hy-font-furn);
  font-size: 0.6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--sc-accent);
  line-height: 1.1;
  margin-right: -0.2em;
}
.hy-switch__list {
  display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.8rem);
  margin: 0; padding: 0; list-style: none;
  margin-inline-start: auto;
  min-width: 0;
}
.hy-switch__list a {
  display: block; padding: 0.45rem 0.1rem;
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.hy-switch__list a:hover { color: var(--sc-ink); }
.hy-switch__list a[aria-current="true"] {
  color: var(--sc-accent);
  border-bottom-color: var(--sc-accent);
}
.hy-switch__cta {
  flex: none;
  padding: 0.5rem 0.95rem;
  background: var(--sc-ink); color: #F2EFE8;
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background 160ms var(--sc-ease-out);
}
.hy-switch__cta:hover { background: var(--sc-accent); }
.hy-switch__cta:active { transform: translateY(1px); }


/* ============================================================== HERO ====
   This grammar forbids a hero that is only a claim: the first screen has
   to carry the claim, every route in, and a way to reach a person. */
.hy-hero {
  padding: calc(var(--hy-bar) + clamp(3rem, 9vh, 6.5rem)) var(--hy-gut) clamp(3rem, 8vh, 6rem);
  background: #F2EFE8;
  border-bottom: 1px solid var(--sc-hairline);
}
.hy-hero__in { max-width: var(--hy-maxw); margin-inline: auto; }

.hy-hero__h {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: min(clamp(2.3rem, 1.1rem + 4.6vw, 4.6rem), 13vh);
  line-height: 0.98; letter-spacing: -0.03em;
  text-wrap: balance;
}
.hy-hero__sf {
  margin: clamp(1.2rem, 2.6vw, 1.8rem) 0 0;
  max-width: 52ch;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem);
  font-style: italic; line-height: 1.5;
}

/* the four routes, visible on the first screen */
.hy-routes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(2rem, 5vw, 3.2rem) 0 0; padding: 0;
  list-style: none;
  border-top: 2px solid var(--sc-ink);
}
.hy-route { border-bottom: 1px solid var(--sc-hairline); min-width: 0; }
.hy-route + .hy-route { border-left: 1px solid var(--sc-hairline); }
.hy-route a {
  display: grid; gap: 0.3rem;
  padding: clamp(0.9rem, 2vw, 1.3rem) clamp(0.7rem, 1.6vw, 1.1rem) clamp(1.1rem, 2.4vw, 1.5rem);
  height: 100%;
  text-decoration: none;
  transition: background 180ms var(--sc-ease-out);
}
.hy-route a:hover { background: color-mix(in oklab, var(--sc-accent) 7%, transparent); }
.hy-route__n {
  font-family: var(--hy-font-furn); font-size: 0.64rem;
  letter-spacing: 0.16em; color: var(--sc-accent);
}
.hy-route__t {
  font-family: var(--sc-font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.15; letter-spacing: -0.012em;
}
.hy-route__d {
  font-family: var(--hy-font-furn); font-size: 0.76rem; line-height: 1.45;
  color: var(--sc-ink-soft);
}

.hy-hero__reach {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
}
.hy-hero__cta {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--hy-font-furn); font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  transition: background 160ms var(--sc-ease-out);
}
.hy-hero__cta:hover { background: var(--sc-ink); }
.hy-hero__cta:active { transform: translateY(1px); }
.hy-hero__or {
  font-family: var(--hy-font-furn); font-size: 0.82rem;
  color: var(--sc-ink-soft);
}
.hy-hero__or a { color: var(--sc-ink); text-decoration-color: var(--sc-hairline-strong); }

/* The number. Set a size up from the line around it and in tabular figures,
   because a phone number is scanned rather than read, and digits that shift
   width between glyphs are harder to hold in the eye long enough to dial.
   As plain text it inherits the placeholder claret; as a real <a> it takes
   the ink and underlines, so swapping the span for a link is the only edit
   needed. */
.hy-hero__tel {
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
a.hy-hero__tel {
  /* Claret, not ink: on an emergency service the number is the fastest route
     to a person, and it should read as the one hot thing in a quiet hero.
     The site's accent rather than a pure red, so it stays in the palette. */
  color: var(--sc-accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--sc-accent) 40%, transparent);
  text-underline-offset: 0.2em;
  transition: color 160ms var(--sc-ease-out), text-decoration-color 160ms var(--sc-ease-out);
}
/* Hover deepens the underline rather than changing the colour: the number is
   already the accent, so there is nowhere brighter for it to go. */
a.hy-hero__tel:hover { text-decoration-color: var(--sc-accent); }
/* On a touch screen this number is the fastest route to a person, and inline
   text is 18px of thumb target. The hit area is grown with a pseudo-element
   rather than padding: the hero's height budget on a 375px phone has nothing
   to give, and padding on an inline-block would push the whole reach line
   down. Measured against the Contact us button above it, which stays clear. */
@media (pointer: coarse) {
  a.hy-hero__tel { position: relative; }
  a.hy-hero__tel::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
}


/* ========================================================== SERVICES ====
   Four sections, one schema. Header sticky on the left so the service name
   stays with its specification while the specification is being read. */
.hy-svc {
  padding: clamp(3rem, 9vh, 6rem) var(--hy-gut);
  background: #F2EFE8;
  border-bottom: 1px solid var(--sc-hairline);
  scroll-margin-top: var(--hy-bar);
}
.hy-svc--alt { background: #EAE5DA; }

.hy-svc__in {
  max-width: var(--hy-maxw); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: start;
}
.hy-svc__head { position: sticky; top: calc(var(--hy-bar) + clamp(1.5rem, 5vh, 3rem)); }
.hy-svc__n {
  margin: 0 0 0.6rem;
  font-family: var(--hy-font-furn); font-size: 0.68rem;
  letter-spacing: 0.18em; color: var(--sc-accent);
}
.hy-svc__h {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 400; line-height: 1.02; letter-spacing: -0.025em;
  text-wrap: balance;
}
.hy-svc__lede {
  margin: clamp(0.9rem, 2vw, 1.3rem) 0 0;
  max-width: 34ch;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.15rem);
  font-style: italic; line-height: 1.48;
  color: var(--sc-ink-soft);
}

/* the shared specification. Four things described the same way can be
   compared; four things described differently are four sales pitches. */
.hy-spec { margin: 0; display: grid; }
.hy-spec__row { padding: clamp(1.1rem, 2.4vw, 1.6rem) 0; border-top: 1px solid var(--sc-hairline); }
.hy-spec__row:first-child { border-top: 2px solid var(--sc-ink); }
.hy-spec__row:last-child { border-bottom: 1px solid var(--sc-hairline); }
.hy-spec dt {
  margin-bottom: 0.5rem;
  font-family: var(--hy-font-furn);
  font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--sc-accent);
}
.hy-spec dd { margin: 0; max-width: 56ch; text-wrap: pretty; }


/* ====================================================== AUTHORED QUIET == */
.hy-quiet {
  min-height: 62svh;
  display: grid; place-items: center;
  padding: clamp(4rem, 12vh, 8rem) var(--hy-gut);
  background: #F5F2EB;
  border-bottom: 1px solid var(--sc-hairline);
}
.hy-quiet__l {
  margin: 0; max-width: 30ch;
  font-family: var(--sc-font-display);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  font-weight: 300; line-height: 1.26; letter-spacing: -0.016em;
  text-align: center; text-wrap: balance;
}


/* ============================================================= PROOF ==== */
.hy-proof-lead {
  padding: clamp(3rem, 8vh, 5rem) var(--hy-gut) clamp(2rem, 5vh, 3rem);
  background: #FCFAF6;
}
.hy-proof-lead__in { max-width: var(--hy-maxw); margin-inline: auto; }

.hy-doc-act { position: relative; background: #FCFAF6; }
.hy-doc-stage {
  /* position:sticky comes from the engine's .sc-stage. Do not override it. */
  display: grid; place-items: center;
  padding: clamp(1.2rem, 3vh, 2.5rem) var(--hy-gut);
  padding-top: calc(var(--hy-bar) + clamp(0.8rem, 2vh, 1.6rem));
  background: #FCFAF6;
}
.hy-doc-wrap {
  position: relative;
  width: min(100%, 62rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  gap: clamp(1.4rem, 3.5vw, 2.8rem);
  align-items: start;
}
.hy-doc {
  position: relative;
  background: #FFFDF9;
  box-shadow: var(--hy-paper-edge);
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.3rem, 3vw, 2.6rem);
  font-size: clamp(0.9rem, 0.87rem + 0.18vw, 1rem);
  line-height: 1.7;
}
.hy-doc__stamp {
  margin: 0 0 clamp(1rem, 2.2vw, 1.5rem);
  font-family: var(--hy-font-furn);
  font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--sc-ink-soft);
}
.hy-doc__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 0.85rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--sc-hairline);
}
.hy-doc__from { margin: 0; font-weight: 600; }
.hy-doc__date { margin: 0; font-family: var(--hy-font-furn); font-size: 0.78rem; color: var(--sc-ink-soft); }
.hy-doc__body > p { margin: 0 0 0.92em; }
.hy-doc__body > p:last-child { margin-bottom: 0; }
.hy-doc__sign { margin-top: 1.3em; }
.hy-doc__sig { display: inline-block; margin-top: 0.35em; font-style: italic; font-size: 1.25em; }
.hy-doc__role { font-family: var(--hy-font-furn); font-size: 0.7rem; color: var(--sc-ink-soft); }

.hy-margin { position: relative; }
.hy-margin__h {
  margin: 0 0 0.85rem;
  font-family: var(--hy-font-furn);
  font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--sc-accent);
}
.hy-margin__list { margin: 0; padding: 0; list-style: none; }
.hy-note {
  position: relative; margin: 0 0 1rem; padding-left: 1.5rem;
  font-family: var(--sc-font-display); font-style: italic;
  font-size: 0.85rem; line-height: 1.34;
  color: var(--sc-accent);
  opacity: 0; transform: translateY(5px);
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
}
.hy-note.is-inked { opacity: 1; transform: none; }
.hy-note:nth-child(odd)  { rotate: -0.7deg; }
.hy-note:nth-child(even) { rotate: 0.5deg; }
.hy-note__n {
  position: absolute; left: 0; top: 0.06em;
  font-family: var(--hy-font-furn); font-style: normal;
  font-size: 0.62rem; font-weight: 600;
  width: 1.05rem; height: 1.05rem;
  display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%;
}

.hy-proof-coda {
  padding: clamp(3rem, 8vh, 6rem) var(--hy-gut) clamp(4rem, 10vh, 7rem);
  background: #FCFAF6;
  border-bottom: 1px solid var(--sc-hairline);
}
.hy-proof-coda__in { max-width: var(--hy-maxw); margin-inline: auto; }
.hy-pull {
  margin: 0; max-width: 34ch;
  font-family: var(--sc-font-display);
  font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.3rem);
  font-style: italic; font-weight: 300;
  line-height: 1.22; letter-spacing: -0.014em;
  text-wrap: balance;
}


/* ================================================================ INK ====
   The signature move, carried over. Strokes are generated against the real
   line boxes of the phrases they mark, so they have to be re-measured
   whenever those boxes move. */
.hy-ink-layer {
  position: absolute; inset: 0;
  pointer-events: none; overflow: visible;
  z-index: 5; color: var(--sc-accent);
}
/* The layer is generated into a container carrying `data-sc-stagger`, so the
   engine's entrance rule `[data-sc-stagger] > *` captures it: opacity 0 and a
   14px offset, permanently, because the layer is created after the engine has
   handed out `.sc-in`. Specificity has to beat that selector, not match it. */
[data-sc-stagger] > .hy-ink-layer,
[data-sc-in].hy-ink-layer,
.hy-ink-layer {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.hy-ink-layer path {
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.88;
}
.hy-ink-layer path.is-fine { stroke-width: 1.25; opacity: 0.8; }
.hy-supn {
  font-family: var(--hy-font-furn);
  font-size: 0.58em; font-weight: 600;
  line-height: 0; vertical-align: super;
  margin-left: 0.15em; color: var(--sc-accent);
}


/* ============================================================== WHY ===== */
.hy-why {
  padding: clamp(3.5rem, 9vh, 6rem) var(--hy-gut);
  background: #EAE5DA;
  border-bottom: 1px solid var(--sc-hairline);
  scroll-margin-top: var(--hy-bar);
}
.hy-why__in {
  max-width: var(--hy-maxw); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.hy-why__figs { display: grid; gap: 0; border-top: 2px solid var(--sc-ink); }
.hy-fig { padding: clamp(1.1rem, 2.4vw, 1.6rem) 0; border-bottom: 1px solid var(--sc-hairline); }
.hy-fig__n {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(2.4rem, 1.7rem + 2.8vw, 3.8rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.032em;
}
.hy-fig--good .hy-fig__n { color: var(--sc-accent); }
.hy-fig__l {
  margin: 0.5rem 0 0; max-width: 32ch;
  font-family: var(--hy-font-furn); font-size: 0.76rem; line-height: 1.45;
  color: var(--sc-ink-soft);
}


/* =========================================================== PEOPLE ===== */
.hy-people-s {
  padding: clamp(3.5rem, 9vh, 6rem) var(--hy-gut);
  background: #F2EFE8;
  border-bottom: 1px solid var(--sc-hairline);
  scroll-margin-top: var(--hy-bar);
}
.hy-people-s__in { max-width: var(--hy-maxw); margin-inline: auto; }
.hy-people {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.6rem, 3.5vw, 3rem);
  border-top: 1px solid var(--sc-hairline); padding-top: clamp(1.4rem, 3vw, 2.2rem);
}
.hy-person { min-width: 0; }
.hy-person__n {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 500; letter-spacing: -0.01em; line-height: 1.2;
}
.hy-person__r {
  margin: 0.2rem 0 0.7rem;
  font-family: var(--hy-font-furn);
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--sc-accent);
}
.hy-person__b { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--sc-ink-soft); }


/* ========================================================== PROCESS ===== */
.hy-process {
  padding: clamp(3.5rem, 9vh, 6rem) var(--hy-gut);
  background: #EAE5DA;
  scroll-margin-top: var(--hy-bar);
}
.hy-process__in { max-width: var(--hy-maxw); margin-inline: auto; }
.hy-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0; padding: 0; list-style: none;
  border-top: 2px solid var(--sc-ink);
}
.hy-step {
  padding: clamp(1.2rem, 2.6vw, 1.8rem) clamp(1rem, 2.2vw, 1.6rem) clamp(1.6rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--sc-hairline);
  min-width: 0;
}
.hy-step + .hy-step { border-left: 1px solid var(--sc-hairline); }
.hy-step__n {
  margin: 0 0 0.5rem;
  font-family: var(--hy-font-furn); font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--sc-accent);
}
.hy-step__h {
  margin: 0 0 0.6rem;
  font-family: var(--sc-font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 400; line-height: 1.15; letter-spacing: -0.015em;
}
.hy-step__b { margin: 0; font-size: 0.95rem; line-height: 1.58; color: var(--sc-ink-soft); }


/* ============================================================= TALK ===== */
.hy-talk {
  padding: clamp(4rem, 11vh, 8rem) var(--hy-gut) clamp(3rem, 8vh, 5rem);
  scroll-margin-top: var(--hy-bar);
}
.hy-talk__in {
  max-width: var(--hy-maxw); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.2rem, 6vw, 5rem);
  align-items: start;
}
.hy-talk__h {
  margin: 0 0 1rem;
  font-family: var(--sc-font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  font-weight: 400; line-height: 1.02; letter-spacing: -0.025em;
}
.hy-talk__b { margin: 0 0 clamp(1.8rem, 4vw, 2.6rem); max-width: 42ch; color: var(--sc-ink-soft); }

.hy-contact { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--sc-hairline); }
.hy-contact > div { padding: 0.9rem 0; border-bottom: 1px solid var(--sc-hairline); }
.hy-contact dt {
  font-family: var(--hy-font-furn);
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--sc-ink-soft); margin-bottom: 0.3rem;
}
.hy-contact dd { margin: 0; font-size: 1.02rem; }
.hy-contact a { color: var(--sc-ink); text-decoration-color: var(--sc-hairline-strong); }

/* the form */
.hy-form { display: grid; gap: clamp(0.9rem, 2vw, 1.2rem); }
.hy-form__lead { margin: 0 0 0.3rem; display: grid; gap: 0.35rem; }
.hy-form__lead-t {
  font-family: var(--hy-font-furn);
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--sc-accent);
}
.hy-form__lead-d {
  font-family: var(--hy-font-furn); font-size: 0.76rem; line-height: 1.5;
  color: var(--sc-ink-soft); max-width: 44ch;
}
.hy-field { display: grid; gap: 0.35rem; }
.hy-field--pair { grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 2vw, 1.1rem); }
.hy-field--pair > span { display: grid; gap: 0.35rem; min-width: 0; }
.hy-field label {
  font-family: var(--hy-font-furn);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--sc-ink-soft);
}
.hy-field input,
.hy-field select,
.hy-field textarea {
  width: 100%;
  background: color-mix(in oklab, #EDE8DE 8%, transparent);
  border: 1px solid var(--sc-hairline);
  color: var(--sc-ink);
  font-family: var(--sc-font-text); font-size: 1rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0;
  transition: border-color 160ms var(--sc-ease-out), background 160ms var(--sc-ease-out);
}
.hy-field textarea { resize: vertical; line-height: 1.55; }
.hy-field input:hover, .hy-field select:hover, .hy-field textarea:hover { border-color: var(--sc-hairline-strong); }
.hy-field input:focus-visible, .hy-field select:focus-visible, .hy-field textarea:focus-visible {
  border-color: var(--sc-accent);
  background: color-mix(in oklab, #EDE8DE 14%, transparent);
}
.hy-field input::placeholder, .hy-field textarea::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); }
.hy-field input[aria-invalid="true"], .hy-field textarea[aria-invalid="true"] { border-color: var(--sc-accent); }
.hy-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 1.2rem, calc(100% - 0.75rem) 1.2rem;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.hy-field__hint {
  margin: 0; font-family: var(--hy-font-furn); font-size: 0.74rem;
  color: var(--sc-accent);
}
.hy-form__actions { margin: 0.4rem 0 0; }
.hy-btn {
  /* inline-flex with a floor rather than padding alone: padding plus the
     font's own line box landed this at 43px, one pixel under the 44px
     minimum touch target, and a CTA is the last control that should be
     fractionally too small to hit. The floor holds whatever the face does. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.8rem;
  background: var(--sc-accent); color: #1A1712;
  border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--hy-font-furn); font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 160ms var(--sc-ease-out);
}
.hy-btn:hover { background: #EDE8DE; }
.hy-btn:active { transform: translateY(1px); }
.hy-form__status {
  margin: 0; min-height: 1.4em;
  font-family: var(--hy-font-furn); font-size: 0.78rem; line-height: 1.5;
  color: var(--sc-accent);
}


/* ============================================================= FOOT ===== */
.hy-foot {
  padding: clamp(2.5rem, 6vh, 4rem) var(--hy-gut);
  background: #1A1712; color: #A39A8B;
  border-top: 1px solid rgb(237 232 222 / 0.16);
  font-family: var(--hy-font-furn); font-size: 0.76rem; line-height: 1.65;
}
.hy-foot__in { max-width: var(--hy-maxw); margin-inline: auto; display: grid; gap: 0.4rem; }
.hy-foot p { margin: 0; }
.hy-foot__mark {
  font-family: var(--sc-font-display); font-size: 1rem; color: #EDE8DE;
  margin-bottom: 0.3rem !important;
}
.hy-foot a { color: #EDE8DE; text-decoration-color: rgb(237 232 222 / 0.35); }
.hy-foot__note { margin-top: 0.9rem !important; max-width: 60ch; opacity: 0.85; }


/* =========================================================== MOBILE =====
   Art-directed, not shrunk. The switcher keeps all four services rather
   than collapsing into a hamburger: on a page whose whole job is letting
   somebody find the right service, hiding the services behind a tap is the
   one thing the navigation must not do. The service list becomes its own
   scrollable strip on a second row and the bar grows to two rows. */
@media (max-width: 900px) {
  :root { --hy-bar: 6rem; }

  .hy-switch {
    height: var(--hy-bar);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.3rem 0.8rem;
    padding-block: 0.5rem;
  }
  .hy-switch__mark { grid-column: 1; grid-row: 1; }
  .hy-switch__cta  { grid-column: 2; grid-row: 1; }
  .hy-switch__list {
    grid-column: 1 / -1; grid-row: 2;
    margin-inline-start: 0;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
  }
  .hy-switch__list::-webkit-scrollbar { display: none; }

  /* The hero has to carry the claim, all four routes and a way to reach
     somebody, and on a 375x812 phone that is a tight budget. The vertical
     rhythm is compressed here rather than dropping a route, because a route
     the visitor cannot see is the one thing this grammar forbids. */
  .hy-hero {
    padding-top: calc(var(--hy-bar) + clamp(1.1rem, 3.5vh, 2rem));
    padding-bottom: clamp(1.8rem, 5vh, 3rem);
  }
  /* Sized to the longest line the headline actually contains, not to a
     round number. "Your HR department," needs 350px of measure at 390px
     wide; above 38px it wraps and the hero becomes a four-line headline.
     Set with margin so a slow-loading face cannot tip it over. */
  .hy-hero__h { font-size: clamp(1.8rem, 0.95rem + 4.3vw, 2.5rem); line-height: 1.04; }
  .hy-hero__sf { margin-top: clamp(0.9rem, 2vh, 1.3rem); }
  .hy-routes { margin-top: clamp(1.3rem, 3.5vh, 2rem); }
  .hy-route a { padding-block: 0.7rem 0.85rem; }
  .hy-hero__reach { margin-top: clamp(1.1rem, 3vh, 1.7rem); }

  /* four routes stacked reads as a list, which is what it is on a phone */
  .hy-routes { grid-template-columns: minmax(0, 1fr); }
  .hy-route + .hy-route { border-left: 0; }
  .hy-route a { grid-template-columns: auto 1fr; grid-template-areas: "n t" ". d"; column-gap: 0.7rem; }
  .hy-route__n { grid-area: n; align-self: baseline; }
  .hy-route__t { grid-area: t; }
  .hy-route__d { grid-area: d; }

  .hy-svc__in,
  .hy-why__in,
  .hy-talk__in { grid-template-columns: minmax(0, 1fr); }
  .hy-svc__head { position: static; }
  .hy-svc__lede { max-width: 46ch; }

  .hy-steps { grid-template-columns: minmax(0, 1fr); }
  .hy-step + .hy-step { border-left: 0; border-top: 1px solid var(--sc-hairline); }

  .hy-people { grid-template-columns: minmax(0, 1fr); }

  /* The peak un-pins on a phone and the notes move inline beneath the letter,
     numbered to match the marks.

     Done here rather than by rewriting the act's attribute in JS. The engine
     decides pinned-or-not once, at mount, so a JS rewrite left a window that
     merely STARTED narrow permanently un-pinned even after it was dragged to
     full width. CSS is re-evaluated at every width, so this version is correct
     continuously instead of only at first paint.

     `height: auto` has to beat the engine's inline `height: <span>vh`, which
     it re-applies on every layout, hence the important. The stage keeps
     `position: sticky` on purpose: with the section's height released there is
     no travel to stick through, so it renders exactly as static would, and the
     engine's "is this stage actually sticky" check stays satisfied rather than
     warning on every phone load. */
  .hy-doc-act { height: auto !important; }
  .hy-doc-stage { height: auto; overflow: visible; }

  .hy-doc-wrap { grid-template-columns: minmax(0, 1fr); }
  .hy-margin { order: 2; }
  .hy-margin__list { display: grid; gap: 0.9rem; }
  .hy-note { opacity: 1; transform: none; rotate: 0deg; font-size: 0.92rem; }
  .hy-doc-stage { padding-top: clamp(1.2rem, 3vh, 2rem); }

  .hy-field--pair { grid-template-columns: minmax(0, 1fr); }
  .hy-btn { width: 100%; }
}

@media (max-width: 380px) {
  .hy-hero__h { font-size: 1.95rem; }
  .hy-switch__name { font-size: 1.02rem; }
  .hy-switch__sub { font-size: 0.55rem; letter-spacing: 0.16em; }
}

/* Short phones. At 360x640 the hero budget is 110px short of holding the
   claim, four routes and the call to action, and the action is the thing
   that ends up below the fold. Compress the rhythm further rather than drop
   a route: this grammar's hero is defined by carrying every way in. */
@media (max-width: 900px) and (max-height: 700px) {
  .hy-hero { padding-top: calc(var(--hy-bar) + 0.8rem); padding-bottom: 1.4rem; }
  .hy-eyebrow { margin-bottom: 0.6rem; font-size: 0.62rem; }
  .hy-hero__h { font-size: 1.95rem; line-height: 1.04; }
  .hy-hero__sf { margin-top: 0.6rem; font-size: 0.94rem; line-height: 1.38; }
  .hy-routes { margin-top: 0.7rem; }
  .hy-route a { padding-block: 0.35rem 0.45rem; }
  .hy-route__d { font-size: 0.72rem; }
  .hy-hero__reach { margin-top: 0.9rem; gap: 0.5rem 1rem; }
  .hy-hero__cta { padding: 0.65rem 1.3rem; }
}


/* ====================================================== REDUCED MOTION ==
   Fewer and gentler, not zero. The ink is already laid down, so the
   marked-up letter is complete and static and the demonstration survives. */
@media (prefers-reduced-motion: reduce) {
  .hy-note { opacity: 1 !important; transform: none !important; transition: none; }
  .hy-ink-layer path { stroke-dashoffset: 0 !important; }
  .hy-switch__list a, .hy-btn, .hy-hero__cta, .hy-switch__cta { transition: none; }
}

@media print {
  .hy-switch, .hy-grain, .hy-skip, .hy-form { display: none; }
  .hy-doc-stage { position: static !important; height: auto !important; }
  .hy-note { opacity: 1 !important; transform: none !important; }
  .hy-talk, .hy-foot { --sc-ink: #1A1712; --sc-ink-soft: #5C564A; --sc-accent: #8A2B2E; color: #1A1712; background: #fff; }
}


/* ===========================================================================
   EMPLOYMENT RIGHTS ACT PAGE, and the handover block that points at it.
   Same register, same ink. The page is a briefing rather than a pitch, so
   it leans harder on rules, dates and status than anything on the main page.
   ======================================================================== */

/* the nav item. A page, not a service, so it sits behind a divider. */
.hy-switch__era {
  border-left: 1px solid var(--sc-hairline);
  padding-left: clamp(0.6rem, 2vw, 1.5rem) !important;
  margin-left: clamp(-0.1rem, 0.5vw, 0.3rem);
}
.hy-switch__list a[aria-current="page"] {
  color: var(--sc-accent);
  border-bottom-color: var(--sc-accent);
}

/* ----------------------------------------------------------- ERA hero -- */
.hy-era-hero {
  padding: calc(var(--hy-bar) + clamp(2.5rem, 8vh, 5.5rem)) var(--hy-gut) clamp(3rem, 8vh, 5rem);
  background: #EAE5DA;
  border-bottom: 1px solid var(--sc-hairline);
}
.hy-era-hero__in { max-width: var(--hy-maxw); margin-inline: auto; }
.hy-era-hero__h {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: min(clamp(2.2rem, 1.1rem + 4.4vw, 4.4rem), 13vh);
  line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance;
}
.hy-era-hero__sf {
  margin: clamp(1.1rem, 2.6vw, 1.7rem) 0 0; max-width: 48ch;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.26rem);
  font-style: italic; line-height: 1.5;
}

.hy-era-hero__clocks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; margin: clamp(1.8rem, 4.5vw, 3rem) 0 0;
  max-width: 44rem;
  border-top: 2px solid var(--sc-ink);
}
.hy-clock {
  padding: clamp(0.9rem, 2vw, 1.3rem) clamp(0.8rem, 2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.5rem) 0;
  border-bottom: 1px solid var(--sc-hairline);
}
.hy-clock + .hy-clock { border-left: 1px solid var(--sc-hairline); padding-left: clamp(0.9rem, 2.2vw, 1.6rem); }
.hy-clock__n {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(2.4rem, 1.7rem + 2.8vw, 3.8rem);
  font-weight: 400; line-height: 0.9; letter-spacing: -0.032em;
  color: var(--sc-accent);
}
.hy-clock__l {
  margin: 0.5rem 0 0;
  font-family: var(--hy-font-furn); font-size: 0.74rem; line-height: 1.45;
  color: var(--sc-ink-soft); max-width: 22ch;
}
.hy-clock__d { color: var(--sc-ink); letter-spacing: 0.04em; }
.hy-clock.is-today .hy-clock__n { color: var(--sc-ink); }

.hy-era-hero__reach {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.8rem 1.4rem; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
}

/* -------------------------------------------------------- the timeline -- */
.hy-changes {
  padding: clamp(3.5rem, 9vh, 6rem) var(--hy-gut);
  background: #F2EFE8;
  border-bottom: 1px solid var(--sc-hairline);
  scroll-margin-top: var(--hy-bar);
}
.hy-changes__in { max-width: var(--hy-maxw); margin-inline: auto; }
.hy-changes__head { max-width: var(--sc-measure); margin-bottom: clamp(2rem, 5vw, 3.2rem); }

.hy-tl { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--sc-ink); }
.hy-tl__row {
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: clamp(0.6rem, 3vw, 2.5rem);
  padding: clamp(1.2rem, 2.6vw, 1.8rem) 0;
  border-bottom: 1px solid var(--sc-hairline);
}
/* what has already happened is set back; what is next is set forward */
.hy-tl__row--past { color: var(--sc-ink-soft); }
.hy-tl__row--past h3 { color: var(--sc-ink-soft); }
.hy-tl__row--next, .hy-tl__row--key { background: color-mix(in oklab, var(--sc-accent) 5%, transparent); }
.hy-tl__row--key { border-bottom: 2px solid var(--sc-ink); }

.hy-tl__when { padding-left: clamp(0, 1vw, 0.9rem); }
.hy-tl__date {
  margin: 0;
  font-family: var(--hy-font-furn); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.02em;
}
.hy-tl__status {
  margin: 0.35rem 0 0;
  font-family: var(--hy-font-furn); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.hy-tl__status--in   { color: var(--sc-ink-soft); }
.hy-tl__status--soon { color: var(--sc-accent); }
.hy-tl__status--exp  { color: var(--sc-ink-soft); font-style: italic; text-transform: none; letter-spacing: 0.04em; font-size: 0.7rem; }
.hy-tl__days { display: block; margin-top: 0.15rem; color: var(--sc-ink); letter-spacing: 0.06em; }

.hy-tl__what { padding-right: clamp(0, 2vw, 2rem); }
.hy-tl__what h3 {
  margin: 0 0 0.45rem;
  font-family: var(--sc-font-display);
  font-size: clamp(1.1rem, 0.98rem + 0.62vw, 1.45rem);
  font-weight: 500; line-height: 1.18; letter-spacing: -0.015em;
}
.hy-tl__what p { margin: 0; max-width: 62ch; font-size: 0.96rem; line-height: 1.6; color: var(--sc-ink-soft); }
.hy-tl__row--past .hy-tl__what p { color: color-mix(in oklab, var(--sc-ink-soft) 85%, transparent); }

.hy-changes .hy-src { margin-top: clamp(1.6rem, 3.5vw, 2.4rem); }

/* ----------------------------------------------- the handbook document -- */
.hy-doc__ext {
  font-family: var(--hy-font-furn); font-weight: 400;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sc-ink-soft); margin-left: 0.4rem;
}
.hy-doc__body--clauses > .hy-cl { margin: 0 0 1.15em; }
.hy-doc__body--clauses > .hy-cl:last-child { margin-bottom: 0; }
.hy-cl {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.2rem;
}
.hy-cl__n {
  font-family: var(--hy-font-furn); font-size: 0.74rem; font-weight: 600;
  color: var(--sc-ink-soft); padding-top: 0.28em;
  font-variant-numeric: tabular-nums;
}

.hy-quiet--era { background: #F5F2EB; }
.hy-proof-lead--alt { border-top: 1px solid var(--sc-hairline); }
.hy-proof-coda--last { border-bottom: 0; }

/* ------------------------------------------------------------ ERA CTA --- */
.hy-era-cta {
  --sc-canvas:   #1A1712;
  --sc-ink:      #EDE8DE;
  --sc-ink-soft: #A39A8B;
  --sc-accent:   #D4736C;
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 40%, transparent);
  color: var(--sc-ink);
  background: var(--sc-canvas);
  padding: clamp(4rem, 11vh, 7rem) var(--hy-gut);
}
.hy-era-cta__in { max-width: var(--hy-maxw); margin-inline: auto; }
.hy-era-cta__h {
  margin: 0 0 1rem;
  font-family: var(--sc-font-display);
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
  font-weight: 400; line-height: 1.04; letter-spacing: -0.025em;
}
.hy-era-cta__b { margin: 0; max-width: 52ch; color: var(--sc-ink-soft); }



@media (max-width: 900px) {
  .hy-switch__era { border-left: 0; padding-left: 0 !important; margin-left: 0; }

  .hy-era-hero { padding-top: calc(var(--hy-bar) + clamp(1.4rem, 4vh, 2.4rem)); }
  .hy-era-hero__clocks { grid-template-columns: minmax(0, 1fr); }
  .hy-clock + .hy-clock { border-left: 0; padding-left: 0; }
  .hy-clock { padding-right: 0; }

  .hy-tl__row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .hy-tl__when { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; padding-left: 0; }
  .hy-tl__status { margin-top: 0; }
  .hy-tl__days { display: inline; margin-left: 0.3rem; }
  .hy-tl__what { padding-right: 0; }
  .hy-tl__row--next, .hy-tl__row--key { padding-inline: 0.8rem; margin-inline: -0.8rem; }

  .hy-cl { grid-template-columns: 2.1rem minmax(0, 1fr); }
}


/* The second route to the Employment Rights Act page. Set as a real line of
   the footer rather than boilerplate: underlined, in the page ink rather than
   the muted footer grey, so it reads as somewhere to go instead of a legal
   notice nobody clicks. */
.hy-foot__era {
  margin-top: 0.9rem !important;
  max-width: 46ch;
}
.hy-foot__era a {
  color: #EDE8DE;
  font-size: 0.82rem;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-color: rgb(212 115 108 / 0.55);
  text-underline-offset: 0.22em;
  transition: color 160ms var(--sc-ease-out), text-decoration-color 160ms var(--sc-ease-out);
}
.hy-foot__era a:hover { color: #D4736C; text-decoration-color: #D4736C; }

/* Inline links inside a service specification. The specs are otherwise
   unlinked prose, so one link has to look deliberate rather than accidental. */
.hy-spec dd a {
  color: var(--sc-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--sc-accent) 40%, transparent);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
.hy-spec dd a:hover { text-decoration-color: var(--sc-accent); }


/* ---------------------------------------------- countdowns, after the date
   Both wordings ship in the HTML and CSS chooses between them, so the page
   is never briefly wrong while JavaScript decides, and the past-tense text
   is real translatable content rather than a string built in a script. */
/* The day itself counts as arrived, not as pending. A change that commences
   on 1 October has commenced on 1 October, so `is-today` takes the same
   past-tense wording as `is-past`; only the numeral differs between them.
   Without this the row reads "Confirmed Today days" for exactly one day,
   and it is the one day that item gets read most. */
.hy-since { display: none; }
.is-past .hy-when,
.is-today .hy-when { display: none; }
.is-past .hy-since,
.is-today .hy-since { display: inline; }

/* "Now" or "Today" in place of a numeral: the display face at 3.8rem is set
   for digits, and a word at that size shouts. Drop it to label scale and let
   the sentence underneath carry the meaning. */
.hy-clock__n .is-word {
  font-size: 0.4em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--hy-font-furn);
  font-weight: 600;
}
.hy-clock.is-past .hy-clock__n,
.hy-clock.is-today .hy-clock__n { color: var(--sc-ink); }

/* A row whose date has passed stops being the urgent one. It keeps its
   place in the sequence and loses the claret tint that says "act on this". */
.hy-tl__row.is-past { background: none; }
.hy-tl__row.is-past .hy-tl__status { color: var(--sc-ink-soft); }
.hy-tl__row.is-past .hy-tl__date,
.hy-tl__row.is-past .hy-tl__what h3 { color: var(--sc-ink-soft); }
.hy-fig.is-past .hy-fig__n { color: var(--sc-ink); }


/* ------------------------------------------- the button, as a link too ----
   .hy-btn was written for the form's <button>. Used on an <a> it needs the
   box and the underline reset, or it renders as underlined text sitting in a
   coloured rectangle. Same class deliberately: one button, one look, whether
   it submits a form or goes to a page. */
a.hy-btn {
  text-decoration: none;
  line-height: 1.2;
}
a.hy-btn:hover { color: #1A1712; }

/* The closing call to action on the Employment Rights Act page. */
.hy-era-cta__go { margin: clamp(2rem, 4.5vw, 3rem) 0 0; }


/* ===========================================================================
   POLICY PAGES
   Long-form legal prose. Narrower measure, clear heading hierarchy, and no
   decoration: these are read to find one clause, not admired.
   ======================================================================== */
.hy-pol-hero {
  padding: calc(var(--hy-bar) + clamp(2.5rem, 7vh, 4.5rem)) var(--hy-gut) clamp(1.8rem, 4vh, 3rem);
  background: #EAE5DA;
  border-bottom: 1px solid var(--sc-hairline);
}
.hy-pol-hero__in { max-width: var(--hy-maxw); margin-inline: auto; }
.hy-pol-hero__h {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
  line-height: 1.02; letter-spacing: -0.028em; text-wrap: balance;
}
.hy-pol-hero__meta {
  margin: clamp(0.9rem, 2vw, 1.3rem) 0 0;
  font-family: var(--hy-font-furn); font-size: 0.74rem; line-height: 1.6;
  letter-spacing: 0.02em; color: var(--sc-ink-soft);
}

.hy-pol { padding: clamp(2.5rem, 6vh, 4rem) var(--hy-gut) clamp(4rem, 10vh, 7rem); }
.hy-pol__in { max-width: 44rem; margin-inline: auto; }

/* A standing notice that the document is a draft. Deliberately loud: a
   privacy notice that has never been checked is a liability, and the page
   should say so until somebody has signed it off. */
.hy-pol__draft {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(0.9rem, 2vw, 1.3rem) clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 6%, transparent);
  font-family: var(--hy-font-furn); font-size: 0.8rem; line-height: 1.6;
  color: var(--sc-ink);
}
.hy-pol__draft strong { color: var(--sc-accent); }

.hy-pol__in h2 {
  margin: clamp(2.4rem, 5vw, 3.4rem) 0 clamp(0.7rem, 1.6vw, 1rem);
  font-family: var(--sc-font-display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 500; line-height: 1.2; letter-spacing: -0.018em;
}
.hy-pol__in h2:first-of-type { margin-top: 0; }
.hy-pol__in h3 {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0.5rem;
  font-family: var(--hy-font-furn);
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sc-accent);
}
.hy-pol__in p { margin: 0 0 1em; text-wrap: pretty; }
.hy-pol__in ul, .hy-pol__in ol { margin: 0 0 1.2em; padding-left: 1.3rem; }
.hy-pol__in li { margin-bottom: 0.5em; }
.hy-pol__in a { color: var(--sc-accent); text-decoration-color: color-mix(in oklab, var(--sc-accent) 40%, transparent); text-underline-offset: 0.18em; }
.hy-pol__in dl { margin: 0 0 1.2em; }
.hy-pol__in dt { font-weight: 600; margin-top: 0.9em; }
.hy-pol__in dd { margin: 0.2em 0 0; color: var(--sc-ink-soft); }
.hy-pol__in hr { margin-block: clamp(2rem, 4vw, 3rem); }

/* Facts only the client can supply. Impossible to miss, impossible to ship
   by accident. */
.hy-gap {
  display: inline-block;
  padding: 0.05em 0.45em;
  border: 1px dashed var(--sc-accent);
  color: var(--sc-accent);
  font-family: var(--hy-font-furn); font-size: 0.86em;
  font-style: normal;
}

/* the legal disclosure block in the footer */
.hy-foot__legal {
  margin-top: 1rem !important;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(237 232 222 / 0.16);
  font-size: 0.72rem; line-height: 1.6; max-width: 62ch;
}
.hy-foot__pol {
  margin-top: 0.9rem !important;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
  font-size: 0.74rem;
}
.hy-foot__pol a { text-decoration-color: rgb(237 232 222 / 0.35); }


/* ===========================================================================
   FREE TEMPLATES
   A directory, not an essay. Two columns of links at desktop so forty-four
   items can be scanned rather than scrolled, one column on a phone.
   ======================================================================== */
.hy-tpl { padding: clamp(2.5rem, 6vh, 4rem) var(--hy-gut) clamp(3rem, 8vh, 5rem); }
.hy-tpl__in { max-width: var(--hy-maxw); margin-inline: auto; }

.hy-tpl__note {
  max-width: 58ch;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 2px solid var(--sc-ink);
}
.hy-tpl__note p { margin: 0 0 0.9em; text-wrap: pretty; }
.hy-tpl__note p:last-child { margin-bottom: 0; }
.hy-tpl__note a { color: var(--sc-accent); text-underline-offset: 0.18em; }
/* The one paragraph on the page that is a warning rather than an offer. */
.hy-tpl__caveat {
  margin-top: 1.2em !important;
  padding-left: 1rem;
  border-left: 2px solid var(--sc-accent);
  font-size: 0.95rem;
  color: var(--sc-ink-soft);
}

.hy-tpl__h {
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 0.4rem;
  font-family: var(--sc-font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 400; line-height: 1.1; letter-spacing: -0.02em;
  padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
  border-top: 1px solid var(--sc-hairline);
}
.hy-tpl__in > .hy-tpl__h:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.hy-tpl__lede {
  margin: 0 0 clamp(1.1rem, 2.4vw, 1.6rem);
  max-width: 54ch;
  font-style: italic; color: var(--sc-ink-soft);
}

/* Columns, with the rule between them doing the separating rather than a
   box around each item. Forty-four bordered cards would read as a shop. */
.hy-tpl__list {
  margin: 0; padding: 0; list-style: none;
  columns: 2; column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.hy-tpl__list li { break-inside: avoid; margin: 0; }
.hy-tpl__list a {
  display: block;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--sc-hairline);
  font-size: 0.98rem; line-height: 1.35;
  text-decoration: none;
  transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
/* The outward arrow is generated rather than typed, so it never lands in a
   copied selection or gets read aloud as a word. Every link already carries
   a visually hidden "opens on the Acas website" for screen readers. */
.hy-tpl__list a::after {
  content: "\2197";
  margin-left: 0.4em;
  font-size: 0.8em;
  color: var(--sc-accent);
  vertical-align: 0.08em;
}
.hy-tpl__list a:hover { color: var(--sc-accent); border-bottom-color: var(--sc-accent); }

@media (max-width: 720px) {
  .hy-tpl__list { columns: 1; }
}

/* ------------------------------------------------ the templates disclaimer
   Framed rather than tucked away. It sits above the links because a
   limitation of liability the reader only meets afterwards is worth very
   little, so it is styled to be read rather than skipped: claret rule down
   the side, a real heading, and the same measure as the prose above it. */
.hy-tpl__disc {
  max-width: 58ch;
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.6vw, 1.8rem);
  border: 1px solid var(--sc-hairline);
  border-left: 3px solid var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 4%, transparent);
}
.hy-tpl__dh {
  margin: 0 0 0.7rem;
  font-family: var(--hy-font-furn);
  font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--sc-accent);
}
.hy-tpl__disc p {
  margin: 0 0 0.8em;
  font-size: 0.92rem; line-height: 1.6;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.hy-tpl__disc p:last-child { margin-bottom: 0; }
.hy-tpl__disc-out { color: var(--sc-ink) !important; }
.hy-tpl__disc a { color: var(--sc-accent); text-underline-offset: 0.18em; }


/* ===========================================================================
   THE "FOR EMPLOYERS" MENU
   A disclosure, not a hover menu. Hover opens it on pointer devices because
   that is what the request asked for and what people expect, but hover is
   only ever an accelerator: the trigger is a real <button> with
   aria-expanded, so it also opens on click, on Enter, on Space and on touch,
   where hover does not exist at all. Closing is forgiving, because a menu
   that snaps shut the instant the pointer clips a corner is worse than no
   menu.
   ======================================================================== */
.hy-menu { position: relative; display: flex; align-items: center; }

/* the divider that used to sit on the Employment Rights Act item */
.hy-menu::before {
  content: "";
  align-self: stretch;
  width: 1px; margin-right: clamp(0.6rem, 2vw, 1.5rem);
  background: var(--sc-hairline);
}

.hy-menu__btn {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.45rem 0.1rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--hy-font-furn);
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.hy-menu__btn:hover { color: var(--sc-ink); }
/* open, or sitting on one of its own pages */
.hy-menu__btn[aria-expanded="true"],
.hy-menu__btn.is-current {
  color: var(--sc-accent);
  border-bottom-color: var(--sc-accent);
}

.hy-menu__chev {
  width: 0.42em; height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform 180ms var(--sc-ease-out);
}
.hy-menu__btn[aria-expanded="true"] .hy-menu__chev {
  transform: translateY(0.06em) rotate(-135deg);
}

.hy-menu__panel {
  /* Fixed, not absolute. Below 900px the nav strip becomes an overflow-x
     container, and an absolutely positioned panel is clipped by it. Fixed
     takes the panel out of that box entirely, so the same dropdown works at
     every width. site.js sets top and left from the trigger's own position
     whenever it opens. */
  position: fixed; top: 0; left: 0;
  z-index: 70;
  margin: 0; padding: 0.35rem 0; list-style: none;
  min-width: 15rem;
  background: #F7F4EE;
  border: 1px solid var(--sc-hairline);
  box-shadow: 0 1px 2px rgb(26 23 18 / 0.06), 0 12px 28px -12px rgb(26 23 18 / 0.28);
  /* visibility, not just opacity: a transparent panel still holds tab stops,
     so a keyboard user would tab into links they cannot see. */
  visibility: hidden; opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms var(--sc-ease-out),
              transform 160ms var(--sc-ease-out),
              visibility 0s linear 160ms;
}
/* Two selectors, deliberately. While open, site.js moves the panel onto
   <body> so that nothing in the nav can clip it, at which point the
   descendant selector stops matching and the panel would never become
   visible. The class on the panel itself is the one that does the work; the
   descendant rule is kept so the menu still opens if the script is ever
   edited to stop reparenting. */
.hy-menu.is-open .hy-menu__panel,
.hy-menu__panel.is-open {
  visibility: visible; opacity: 1; transform: none;
  transition-delay: 0s;
}
/* The gap between trigger and panel is dead ground for a travelling pointer.
   This bridges it so the menu does not close mid-journey. */
.hy-menu__panel::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -0.6rem; height: 0.6rem;
}
.hy-menu__panel a {
  display: block;
  padding: 0.6rem 1rem;
  font-family: var(--hy-font-furn);
  font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: none;
  white-space: nowrap;
  border-bottom: 0;
  transition: background 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.hy-menu__panel a:hover,
.hy-menu__panel a:focus-visible { background: color-mix(in oklab, var(--sc-accent) 8%, transparent); color: var(--sc-ink); }
.hy-menu__panel a[aria-current="page"] { color: var(--sc-accent); }

/* ------------------------------------------------------------- on a phone
   The trigger stays. An earlier version flattened the menu here, pushing
   both links into the strip as ordinary items, and they simply scrolled off
   the right-hand edge where nobody found them. One tappable "For employers"
   is findable; two items past the fold of a sideways scroller are not.
   Tap opens it, because there is no hover to rely on. */
@media (max-width: 900px) {
  .hy-menu__btn { padding-block: 0.45rem; }
  .hy-menu__panel a { padding: 0.75rem 1rem; }   /* 44px tap targets */

  /* The blur comes off below 900px, and this is not cosmetic.
     An element with backdrop-filter becomes the containing block for its
     position:fixed descendants. Once .hy-switch is that containing block, the
     panel is no longer anchored to the viewport, so .hy-switch__list -- which
     is an overflow-x container at this width -- is free to clip it. The menu
     opened and was cut to nothing. Safari enforces this; Chromium does not,
     which is why it passed every desktop and emulated test and failed on a
     real phone.
     Removing the blur removes the containing block, and the panel escapes to
     the viewport as intended. The background goes fully opaque to compensate,
     since there is no longer a blur to hide what scrolls beneath. */
  .hy-switch {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #F2EFE8;
  }
}


/* ===========================================================================
   ABOUT
   Prose with a sidebar of short, self-contained cards. The cards carry the
   things people scan for (where, sectors, who we are not for) so they are
   findable without reading the argument first.
   ======================================================================== */
.hy-ab { padding: clamp(2.5rem, 6vh, 4rem) var(--hy-gut) clamp(3rem, 8vh, 5rem); }
.hy-ab__in { max-width: var(--hy-maxw); margin-inline: auto; }

.hy-ab__lead {
  max-width: 44ch;
  margin: 0 0 clamp(2.4rem, 6vw, 3.8rem);
  font-family: var(--sc-font-display);
  font-size: clamp(1.25rem, 1rem + 1.3vw, 1.85rem);
  font-weight: 300; line-height: 1.34; letter-spacing: -0.016em;
  text-wrap: pretty;
}

.hy-ab__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.hy-ab__body > p { margin: 0 0 1em; max-width: 60ch; text-wrap: pretty; }
.hy-ab__body a { color: var(--sc-accent); text-underline-offset: 0.18em; }

.hy-ab__h {
  margin: clamp(2.2rem, 4.5vw, 3rem) 0 clamp(0.7rem, 1.6vw, 1rem);
  padding-top: clamp(1rem, 2.2vw, 1.5rem);
  border-top: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 400; line-height: 1.16; letter-spacing: -0.018em;
}
.hy-ab__body > .hy-ab__h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hy-ab__h--wide {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  border-top: 2px solid var(--sc-ink);
}
.hy-ab__sub {
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
  max-width: 52ch;
  font-style: italic; color: var(--sc-ink-soft);
}

/* the sidebar cards */
.hy-ab__side { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
.hy-ab__card {
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.5rem);
  background: #EDE9E0;
  border: 1px solid var(--sc-hairline);
}
/* The honest one. Framed differently because it is the one people remember,
   and because a firm telling you not to hire it should not look like a sell. */
.hy-ab__card--plain {
  background: none;
  border: 0; border-left: 3px solid var(--sc-accent);
  padding-left: clamp(1rem, 2.2vw, 1.3rem);
}
.hy-ab__ch {
  margin: 0 0 0.6rem;
  font-family: var(--hy-font-furn);
  font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--sc-accent);
}
.hy-ab__card p { margin: 0 0 0.7em; font-size: 0.95rem; line-height: 1.6; color: var(--sc-ink-soft); }
.hy-ab__card p:last-child { margin-bottom: 0; }
.hy-ab__card a { color: var(--sc-accent); text-underline-offset: 0.18em; }

.hy-people--about { border-top: 0; padding-top: 0; }
/* One profile, not three. The grid is auto-fit, so a single card would
   otherwise stretch the full page width and the bio would run to a measure
   nobody can read across. Capped to the same measure as the body prose. */
.hy-people--solo {
  border-top: 0; padding-top: 0;
  grid-template-columns: minmax(0, var(--sc-measure));
}
.hy-people--solo .hy-person__b + .hy-person__b { margin-top: 0.9rem; }

@media (max-width: 900px) {
  .hy-ab__cols { grid-template-columns: minmax(0, 1fr); }
  .hy-ab__side { margin-top: clamp(1.6rem, 4vw, 2.4rem); }
}

/* ------------------------------------------------- the bar, at seven items
   About plus four services plus the menu plus the button stop fitting one
   row at about 1000px, above the 900px content breakpoint. The bar folds on
   its own schedule so the page layout is untouched and the pinned document
   keeps working on a laptop. */
@media (min-width: 901px) and (max-width: 1000px) {
  :root { --hy-bar: 6rem; }
  .hy-switch {
    height: var(--hy-bar);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.3rem 0.8rem;
    padding-block: 0.5rem;
  }
  .hy-switch__mark { grid-column: 1; grid-row: 1; }
  .hy-switch__cta  { grid-column: 2; grid-row: 1; }
  .hy-switch__list {
    grid-column: 1 / -1; grid-row: 2;
    margin-inline-start: 0;
    gap: clamp(0.8rem, 2vw, 1.5rem);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hy-switch__list::-webkit-scrollbar { display: none; }
}


/* ===========================================================================
   WHY PARTNER WITH US
   Reasons as a ruled ledger rather than cards. Cards would read as a pitch
   deck; rules read as a list of things that are simply true, which is the
   register the rest of the site is in.
   ======================================================================== */
.hy-wp__lead {
  max-width: 54ch;
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem);
  font-family: var(--sc-font-display);
  font-size: clamp(1.1rem, 0.98rem + 0.7vw, 1.45rem);
  font-style: italic; font-weight: 300;
  line-height: 1.4; color: var(--sc-ink-soft);
  text-wrap: pretty;
}

.hy-wp { margin: 0 0 clamp(2.6rem, 6vw, 4rem); display: grid; }
.hy-wp__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(0.4rem, 2.5vw, 2.4rem);
  padding: clamp(1rem, 2.2vw, 1.5rem) 0;
  border-top: 1px solid var(--sc-hairline);
}
.hy-wp__row:first-child { border-top: 2px solid var(--sc-ink); }
.hy-wp__row:last-child { border-bottom: 1px solid var(--sc-hairline); }
.hy-wp dt {
  font-family: var(--hy-font-furn);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.03em; line-height: 1.4;
  padding-top: 0.2em;
  color: var(--sc-accent);
}
.hy-wp dd { margin: 0; max-width: 58ch; color: var(--sc-ink-soft); text-wrap: pretty; }

@media (max-width: 900px) {
  .hy-wp__row { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
}


/* ===========================================================================
   NEWS
   A wire, not a magazine. Headlines in a ruled list so twelve of them can be
   scanned in one pass; our own posts set apart above, because they are the
   only ones that are ours.
   ======================================================================== */
.hy-news { padding: clamp(2.5rem, 6vh, 4rem) var(--hy-gut) clamp(3rem, 8vh, 5rem); }
.hy-news__in { max-width: 62rem; margin-inline: auto; }

.hy-news__h {
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 0.4rem;
  padding-top: clamp(1.1rem, 2.4vw, 1.6rem);
  border-top: 2px solid var(--sc-ink);
  font-family: var(--sc-font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 400; line-height: 1.1; letter-spacing: -0.02em;
}
.hy-news__in > section:first-child .hy-news__h { margin-top: 0; }
.hy-news__lede {
  margin: 0 0 clamp(1.2rem, 2.6vw, 1.8rem);
  max-width: 56ch; font-style: italic; color: var(--sc-ink-soft);
}

/* our own posts */
.hy-news__post {
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  border-bottom: 1px solid var(--sc-hairline);
}
.hy-news__date {
  margin: 0 0 0.4rem;
  font-family: var(--hy-font-furn); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--sc-accent);
}
.hy-news__pt {
  margin: 0 0 0.5rem;
  font-family: var(--sc-font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 400; line-height: 1.2; letter-spacing: -0.015em;
}
.hy-news__pt a { color: inherit; text-decoration-color: var(--sc-hairline-strong); text-underline-offset: 0.18em; }
.hy-news__pt a:hover { color: var(--sc-accent); }
.hy-news__sum { margin: 0; max-width: 60ch; color: var(--sc-ink-soft); }
/* marks a post that lives somewhere else */
.hy-news__out::after {
  content: "\2197"; margin-left: 0.35em; font-size: 0.8em;
  color: var(--sc-accent); vertical-align: 0.08em;
}

/* the wire */
.hy-news__wire { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sc-hairline); }
.hy-news__item { padding: clamp(0.8rem, 1.8vw, 1.1rem) 0; border-bottom: 1px solid var(--sc-hairline); }
.hy-news__link {
  display: block;
  font-family: var(--sc-font-display);
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.32; letter-spacing: -0.01em;
  text-decoration: none; text-wrap: pretty;
  transition: color 140ms var(--sc-ease-out);
}
.hy-news__link::after {
  content: "\2197"; margin-left: 0.4em; font-size: 0.72em;
  color: var(--sc-accent); vertical-align: 0.1em;
}
.hy-news__link:hover { color: var(--sc-accent); }
.hy-news__meta {
  margin: 0.3rem 0 0;
  font-family: var(--hy-font-furn); font-size: 0.72rem;
  letter-spacing: 0.04em; color: var(--sc-ink-soft);
}
.hy-news__loading,
.hy-news__fail {
  padding: clamp(1rem, 2.2vw, 1.4rem) 0;
  font-family: var(--hy-font-furn); font-size: 0.82rem;
  color: var(--sc-ink-soft);
}
.hy-news__fail a { color: var(--sc-accent); }
.hy-news__src {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding-top: 0.8rem;
  border-top: 1px solid var(--sc-hairline); max-width: 60ch;
  font-family: var(--hy-font-furn); font-size: 0.72rem; line-height: 1.6;
  color: var(--sc-ink-soft);
}