/**
 * Shared vocabulary ONLY: tokens, reset, typography, and shared components.
 *
 * Layers
 *  reset      — user agent style reset
 *  base       — tokens (:root) + typographic defaults
 *  layout     — declared here for cascade ordering; populated by the
 *               layout sheets in assets/css/layouts/{application,blank}.css,
 *               which own ALL page chrome
 *  components — buttons, cards, tiles, forms, dialog, flash, image loader
 *  utilities  — small composable helpers
 *
 * Rules:
 *  - Tokens and shared components live ONLY in this file.
 *  - Layout chrome lives ONLY in the mirrored layout sheets under
 *    assets/css/layouts/.
 *  - Page CSS mirrors its view (assets/css/{controller}/{action}.css) and
 *    composes/arranges only — it never redefines tokens or restyles
 *    shared components.
 *  - Never hard-code a hex value, or a size a token already covers.
 *  - No !important. No inline styles except server-computed per-row values.
 *
 * Media queries cannot read custom properties, so the md breakpoint is written
 * as 48em (768px) wherever one is needed; --bp-md is the same value for JS.
 **/
@layer reset, base, layout, components, utilities;

/* ========================================================================== */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
    border-color: var(--border-default);
  }

  html {
    -webkit-text-size-adjust: 100%;
    line-height: 1.5;
  }

  body {
    min-height: 100vh;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  ol, ul, menu {
    list-style: none;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  img, svg, video, iframe {
    display: block;
    max-width: 100%;
  }

  img, video {
    height: auto;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
    background-color: transparent;
    letter-spacing: inherit;
  }

  button, [role="button"] {
    cursor: pointer;
  }

  textarea {
    resize: vertical;
  }

  address {
    font-style: normal;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  dialog {
    margin: auto;
  }
}

/* ========================================================================== */
@layer base {
  :root {
    /* brand — the primary scale of the old tailwind.config.cjs */
    --primary-100: hsl(344, 79%, 54%);
    --primary-200: hsl(344, 69%, 39%);
    --primary-300: hsl(344, 69%, 24%);
    --primary-400: hsl(344, 68%, 21%);
    --primary-900: hsl(344, 68%, 15%);
    --primary-soft: hsl(344, 50%, 90%);
    --primary-wash: hsl(344, 79%, 54%, 0.05);
    --primary-hover: hsl(344, 68%, 45%);
    --primary-active: hsl(344, 68%, 31%);
    --brand-stroke: hsl(350, 75%, 29%);

    /* neutrals */
    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%);
    --neutral-50: hsl(0, 0%, 98%);
    --neutral-100: hsl(0, 0%, 96%);
    --neutral-200: hsl(0, 0%, 90%);
    --neutral-300: hsl(0, 0%, 83%);
    --neutral-400: hsl(0, 0%, 64%);
    --neutral-500: hsl(0, 0%, 45%);
    --neutral-600: hsl(0, 0%, 32%);
    --neutral-800: hsl(0, 0%, 15%);
    --neutral-900: hsl(0, 0%, 9%);
    --border-default: hsl(220, 13%, 91%);
    --muted-text: hsl(218, 11%, 65%);
    --feedback-surface: hsl(12, 8%, 86%);
    --social-facebook: hsl(221, 83%, 53%);
    --social-facebook-hover: hsl(217, 91%, 60%);
    --star: hsl(0, 0%, 75%);
    --star-shade: hsl(0, 0%, 55%);
    --star-lit: hsl(40, 90%, 75%);
    --star-lit-shade: hsl(40, 75%, 50%);

    /* translucent overlays */
    --scrim-light: hsl(0, 0%, 96%, 0.75);
    --scrim-brand: hsl(344, 68%, 15%, 0.75);
    --scrim-brand-strong: hsl(344, 68%, 15%, 0.8);
    --scrim-dark: hsl(0, 0%, 9%, 0.8);
    --vignette: hsl(0, 0%, 0%, 0.4);
    --vignette-strong: hsl(0, 0%, 0%, 0.8);
    --shadow-color: hsl(0, 0%, 0%, 0.25);
    --text-shadow: hsl(0, 0%, 0%, 0.5);
    --hairline: hsl(0, 0%, 9%, 0.25);
    --hairline-soft: hsl(0, 0%, 0%, 0.1);
    --hairline-inverse: hsl(0, 0%, 100%, 0.1);
    --panel-tint: hsl(0, 0%, 64%, 0.2);
    --hairline-inverse-strong: hsl(0, 0%, 100%, 0.5);
    --primary-300-translucent: hsl(344, 69%, 24%, 0.5);
    --primary-400-translucent: hsl(344, 68%, 21%, 0.9);
    --scrim-faint: hsl(0, 0%, 96%, 0.2);
    --shadow-soft: hsl(0, 0%, 0%, 0.07);
    --pulse: hsl(0, 0%, 0%, 0.3);
    --header-gradient: linear-gradient(180deg, var(--primary-400), var(--shadow-color));

    /* type */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Times New Roman", serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    /* line heights Tailwind paired with each text size */
    --leading-xs: 1rem;
    --leading-sm: 1.25rem;
    --leading-base: 1.5rem;
    --leading-lg: 1.75rem;
    --leading-xl: 1.75rem;
    --leading-2xl: 2rem;
    --leading-3xl: 2.25rem;
    --leading-4xl: 2.5rem;
    --text-kicker: clamp(1rem, 10vw, 1.25rem);
    --text-display: clamp(1rem, 10vw, 3rem);
    --text-title: clamp(1rem, 10vw, 2.5rem);
    --text-subtitle: clamp(1rem, 10vw, 2rem);
    --text-hero: clamp(1rem, 10vw, 4rem);
    --weight-light: 300;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-none: 1;
    --leading-normal: 1.5;

    /* space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* shape and motion */
    --radius-sm: 0.125rem;
    --radius: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-full: 9999px;
    --border: 2px;
    --shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
    --drop-shadow: drop-shadow(0 4px 3px var(--shadow-soft)) drop-shadow(0 2px 2px var(--shadow-soft));
    --duration: 150ms;
    --duration-slow: 250ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* layout */
    --wrapper-max: 1200px;
    --wrapper-padding: 2rem;
    --bp-md: 768;
    --z-header: 100;
  }

  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }

  body {
    font-family: var(--font-sans);
    color: var(--neutral-900);
    background-color: var(--white);
  }

  :focus-visible {
    outline: 2px solid var(--primary-200);
    outline-offset: 2px;
  }
}

/* ========================================================================== */
@layer components {
  /* ----- headings ----- */
  .section-title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    line-height: var(--leading-2xl);
    text-decoration: underline;
    text-decoration-color: var(--primary-400);
    text-underline-offset: 4px;
  }

  .section-title--md { font-size: var(--text-3xl); line-height: var(--leading-3xl); }
  .section-title--lg { font-size: var(--text-title); line-height: var(--leading-normal); }

  .display-heading {
    line-height: var(--leading-none);
  }

  .display-heading__kicker {
    display: block;
    font-weight: var(--weight-semibold);
    font-size: var(--text-kicker);
    line-height: var(--leading-normal);
  }

  .display-heading__title {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-display);
    line-height: var(--leading-none);
  }

  .page-intro {
    padding-block: var(--space-8);
    text-align: center;
  }

  .page-intro__title {
    font-family: var(--font-serif);
    font-size: var(--text-subtitle);
    text-transform: uppercase;
  }

  .page-intro__subtitle {
    color: var(--primary-300);
    text-transform: uppercase;
  }

  /* ----- links and buttons ----- */
  .link {
    color: var(--primary-200);
    text-decoration: underline;
    word-break: break-all;
  }

  .link:hover { color: var(--primary-400); }

  .link--dark { color: var(--primary-400); }

  .link--quiet { text-decoration: none; }
  .link--quiet:hover { text-decoration: underline; }

  /* A link that reads as a tag: the blog's topic filter, and the neighbourhood
     cross-links under a post. Shared because two pages use it; .is-current is
     the selected one. */
  .chip-link {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    color: var(--neutral-600);
    text-decoration: none;
    background-color: var(--neutral-100);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
  }

  .chip-link:hover {
    color: var(--primary-200);
    background-color: var(--white);
  }

  .chip-link.is-current {
    color: var(--white);
    background-color: var(--primary-200);
    border-color: var(--primary-200);
  }

  .chip-link__count {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
  }

  .button {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    font-weight: var(--weight-semibold);
    color: var(--neutral-100);
    background-color: var(--primary-400);
    text-align: center;
    transition: filter var(--duration) var(--ease);
  }

  .button:hover { filter: brightness(1.25); }
  .button:disabled { cursor: progress; filter: saturate(0.6); }

  .button--rounded { border-radius: var(--radius); }
  .button--wide { padding-inline: var(--space-8); }

  .button--outline {
    border: 1px solid currentColor;
    background-color: transparent;
    font-weight: var(--weight-bold);
  }

  /* ----- blur-up image ----- */
  .img-loader {
    position: relative;
    overflow: hidden;
    background-image: var(--img-small);
    background-size: cover;
    background-position: center;
  }

  .img-loader:not(.loaded) {
    background-blend-mode: overlay;
    animation: img-loader-pulse 1.5s ease-in-out infinite alternate;
  }

  .img-loader > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 200ms ease-in-out, scale var(--duration-slow) var(--ease);
  }

  .img-loader.loaded > img { opacity: 1; }

  .img-loader--fill {
    position: absolute;
    inset: 0;
  }

  @keyframes img-loader-pulse {
    from { background-color: transparent; }
    to { background-color: var(--pulse); }
  }

  /* ----- page hero (image, vignette, title) ----- */
  .page-hero {
    position: relative;
    isolation: isolate;
    padding-block: 9em 3em;
  }

  .page-hero > .img-loader {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
  }

  .page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--scrim-dark);
    background-image: linear-gradient(var(--vignette), transparent 75%, var(--vignette));
  }

  .page-hero__title {
    width: min(1000px, 100%);
    margin-inline: auto;
    font-family: var(--font-serif);
    font-size: var(--text-hero);
    color: var(--neutral-100);
    text-align: center;
    filter: var(--drop-shadow);
  }

  @media (min-width: 48em) {
    .page-hero__title { text-align: left; }
  }

  /* ----- photo tiles: a link over a darkened photo ----- */
  .photo-tile {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: var(--space-8);
    color: var(--white);
    text-align: center;
    border: var(--border) solid var(--hairline-inverse-strong);
    border-radius: var(--radius-sm);
    filter: var(--drop-shadow);
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
  }

  .photo-tile > .img-loader {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .photo-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--scrim-brand);
    transition: background-color var(--duration) var(--ease);
  }

  .photo-tile:hover {
    color: var(--primary-300);
    border-color: var(--primary-300-translucent);
  }

  .photo-tile:hover::after { background-color: var(--scrim-light); }

  .photo-tile__kicker,
  .photo-tile__title {
    text-shadow: 1px 2px 1px var(--text-shadow);
  }

  .photo-tile__kicker {
    text-transform: uppercase;
  }

  .photo-tile__title {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    line-height: 1.1;
  }

  /* ----- area tile: an expertise area linking out to the IDX search ----- */
  .area-tile {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow: hidden;
    padding: var(--space-4);
    color: var(--neutral-100);
    border: var(--border) solid var(--neutral-100);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration) var(--ease);
  }

  .area-tile > .img-loader {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .area-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--scrim-brand-strong);
    transition: background-color var(--duration) var(--ease);
  }

  .area-tile:hover { border-color: var(--primary-400); }
  .area-tile:hover::after { background-color: var(--scrim-light); }
  .area-tile:hover > .img-loader > img { scale: 1.1; }

  .area-tile__title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    line-height: var(--leading-3xl);
    overflow-wrap: anywhere;
    transition: color var(--duration) var(--ease);
  }

  .area-tile:hover .area-tile__title { color: var(--primary-400); }

  .area-tile__cta {
    margin-top: auto;
    max-width: max-content;
    padding: var(--space-2) var(--space-4);
    font-weight: var(--weight-bold);
    border: 1px solid var(--neutral-100);
    background-color: var(--scrim-faint);
    transition: background-color var(--duration) var(--ease);
  }

  .area-tile:hover .area-tile__cta { background-color: var(--primary-400-translucent); }

  /* ----- shared arrangements ----- */
  .two-column {
    display: grid;
    grid-template-columns: 1fr;
    align-items: baseline;
    gap: var(--space-8);
    padding-block: var(--space-8);
  }

  .choice-tiles {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-evenly;
    gap: var(--space-4);
    padding-block: var(--space-8);
  }

  .choice-tiles__tile,
  .choice-tiles__spacer {
    flex: 1 1 250px;
  }

  @media (min-width: 48em) {
    .two-column { grid-template-columns: repeat(2, 1fr); }
  }

  /* ----- lists ----- */
  .numbered-list {
    display: grid;
    gap: var(--space-2);
    padding-left: var(--space-2);
    list-style: decimal;
  }

  /* Items packed with no gap and a deeper indent (renter, owner). */
  .numbered-list--packed {
    display: block;
    padding-left: var(--space-4);
  }

  .numbered-list__heading {
    font-size: var(--text-lg);
    line-height: var(--leading-lg);
    font-weight: var(--weight-semibold);
  }

  .numbered-list .bullet-list { margin-top: 0; }

  .bullet-list {
    padding-left: var(--space-4);
    list-style: disc;
  }

  .term {
    font-weight: var(--weight-semibold);
  }

  /* ----- contact block ----- */
  .contact-block {
    padding-block: var(--space-8);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: var(--leading-none);
  }

  .contact-block .section-title { margin-bottom: var(--space-4); }

  .contact-block p {
    margin-bottom: var(--space-2);
    font-weight: var(--weight-semibold);
  }

  /* ----- forms ----- */
  .form-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background-color: var(--panel-tint);
  }

  .field-row {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-2);
  }

  .field {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .field--wide { flex-grow: 5; }

  .field__label { font-weight: var(--weight-semibold); }
  .field__required { color: var(--primary-200); }

  .field__control {
    padding: var(--space-2);
    background-color: var(--white);
    border: var(--border) solid var(--hairline-soft);
    border-radius: var(--radius);
  }

  .field__control::-webkit-outer-spin-button,
  .field__control::-webkit-inner-spin-button {
    display: none;
  }

  /* honeypot: present for bots, invisible and unreachable for people */
  .doorbell {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ----- flash ----- */
  .flash {
    padding: var(--space-4);
    margin-block: var(--space-4);
    font-weight: var(--weight-semibold);
    color: var(--primary-400);
    background-color: var(--primary-soft);
    border-left: 4px solid var(--primary-400);
  }

  .flash-stack {
    position: fixed;
    inset-inline: var(--space-4);
    bottom: var(--space-4);
    z-index: calc(var(--z-header) * 2);
    width: min(40rem, 100% - var(--space-8));
    margin-inline: auto;
    box-shadow: var(--shadow);
  }

  .flash-stack .flash { margin-block: 0; padding-right: var(--space-12); }

  .flash-stack__dismiss {
    position: absolute;
    top: var(--space-2);
    right: var(--space-4);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--primary-400);
  }

  /* ----- dialog ----- */
  .dialog {
    width: min(40rem, 100% - var(--space-4));
    max-height: calc(100dvh - var(--space-4));
    overflow: auto;
    background-color: var(--white);
  }

  .dialog::backdrop {
    background-color: var(--black);
    opacity: 0.6;
  }

  .dialog__close {
    position: absolute;
    top: 0;
    right: 0;
    aspect-ratio: 1;
    padding-inline: var(--space-2);
    font-size: var(--text-2xl);
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    background-color: var(--white);
    border: var(--border) solid var(--black);
    border-radius: var(--radius-full);
  }

  /* ----- icons ----- */
  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex: none;
  }

  .icon--stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* ========================================================================== */
@layer utilities {
  .wrapper {
    width: min(var(--wrapper-max), 100% - (var(--wrapper-padding) * 2));
    margin-inline: auto;
  }

  .section { padding-block: var(--space-8); }
  .section--roomy { padding-block: var(--space-16); }
  .section--muted { background-color: var(--neutral-50); }
  .page-body { padding-bottom: var(--space-16); }
  .page-body--roomy { padding-bottom: var(--space-24); }

  .flow > * + * { margin-top: var(--flow-space, var(--space-4)); }

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

  .hide-scroll { scrollbar-width: none; }
  .hide-scroll::-webkit-scrollbar { width: 0; }

  .text-center { text-align: center; }
  .text-small { font-size: var(--text-sm); }
  .text-italic { font-style: italic; }
  .text-semibold { font-weight: var(--weight-semibold); }
  .md-only { display: none; }

  @media (min-width: 48em) {
    .md-only { display: block; }
  }
}