/* system.css — the Casa Scotia design system as code (docs/design-system-program.md, the kit approved
   6 Oct 2026): the components every template renders, on main.css's tokens. Nothing here invents a
   value: colours, faces, sizes and spacing are main.css custom properties; the shapes are the kit's
   (the home page's language). Classes are prefixed s- so the system lint can tell system markup from
   ad-hoc markup. Loaded after main.css and before a family's own sheet. */

/* ---- the eyebrow (kit: Eyebrow): mono, uppercase, the one widest tracking, with the dot on a page head */
.s-eyebrow { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-7, 28px); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; line-height: 1.3; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-primary-dark); }
.s-eyebrow--dot::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-primary); }

/* ---- the page head (kit: PageHead + Hero): text left, the answer card right on desktop, stacked below 900 */
.s-head { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: var(--space-10) 72px; align-items: start; padding-top: var(--space-6); padding-bottom: var(--space-10); }
.s-head__text { min-width: 0; }
.s-head__aside { min-width: 0; }
.s-head__actions { grid-column: 1 / -1; margin: 0; }
.s-h1 { margin: 0 0 var(--space-7, 28px); font-family: var(--font-display); font-weight: 500; font-size: var(--text-display-xl); line-height: 1.06; letter-spacing: -0.022em; color: var(--color-charcoal); text-wrap: balance; }
.s-h1 em { font-style: italic; font-weight: 400; color: var(--color-primary-dark); }
.s-lead { margin: 0 0 var(--space-5); max-width: 56ch; font-size: 18px; line-height: 1.65; color: var(--color-gray-600); }
.s-lead a { color: var(--color-primary-dark); font-weight: 600; }
.s-meta { margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-light); }
.s-crumbs { margin: 0 0 var(--space-7, 28px); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--color-text-meta); }
.s-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.s-crumbs li + li::before { content: "\203A"; margin-right: var(--space-2); color: var(--color-text-light); }
.s-crumbs a { color: var(--color-primary-dark); text-decoration: none; }
.s-crumbs a:hover { text-decoration: underline; }
@media (max-width: 899px) {
  .s-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-bottom: var(--space-8); }
}

/* ---- the answer card (kit: AtAGlance): the alternate ground, hairlined rows, the verdict in the display face */
.s-glance { display: grid; gap: var(--space-2); padding: var(--space-6); background: var(--color-bg-alt); border: 0; border-radius: var(--radius-lg); box-shadow: none; }
.s-glance__kicker { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; line-height: 1.3; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-primary-dark); }
.s-glance__verdict { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; color: var(--color-charcoal); }
@media (min-width: 768px) { .s-glance { padding: var(--space-8); } }

/* ---- numbered sections (kit: SectionHead): an 88px mono number column, the heading and its content beside it */
.s-sections { counter-reset: s-section; }
.s-sections > h2 { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--space-8); align-items: start; margin: var(--space-28, 110px) 0 var(--space-5); font-family: var(--font-display); font-weight: 500; font-size: var(--text-display-lg); line-height: 1.14; letter-spacing: -0.018em; color: var(--color-charcoal); text-wrap: balance; scroll-margin-top: var(--space-20); }
.s-sections > h2::before { counter-increment: s-section; content: counter(s-section, decimal-leading-zero); padding-top: 14px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-widest); color: var(--color-primary); }
.s-sections > h2:first-child { margin-top: var(--space-12); }
.s-sections > h2 + * { margin-top: 0; }
.s-sections > :not(h2) { margin-left: 120px; }
.s-sections > h3 { margin: var(--space-8) 0 var(--space-3); font-family: var(--font-body); font-size: var(--text-xl); font-weight: 600; line-height: 1.3; color: var(--color-charcoal); }
/* the section heading's type on its own (a finder page's headings, which carry no number and no indent) */
.s-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-display-lg); line-height: 1.14; letter-spacing: -0.018em; color: var(--color-charcoal); text-wrap: balance; }
@media (max-width: 899px) {
  .s-sections > h2 { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); margin-top: var(--space-16); font-size: var(--text-display-md); }
  .s-sections > h2::before { padding-top: 0; }
  .s-sections > :not(h2) { margin-left: 0; }
}

/* ---- cards in a hairlined row (kit: Card): no boxes, no shadows */
.s-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.s-cards > * { padding: var(--space-7, 28px) var(--space-7, 28px) var(--space-2); border-right: 1px solid var(--color-border); }
.s-cards > :last-child { border-right: 0; }
.s-cards__tag { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); }
.s-cards__tag--gold { color: var(--gold-text); }
.s-cards__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.25; color: var(--color-charcoal); }
.s-cards__text { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-light); }
@media (max-width: 899px) { .s-cards > * { border-right: 0; border-bottom: 1px solid var(--color-border); padding: var(--space-5) 0; } }

/* ---- figures in a row (kit: StatRow): mono numerals, a dashed footnote naming the source */
.s-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.s-stats__num { font-family: var(--font-mono); font-size: 34px; font-weight: 600; line-height: 1.1; color: var(--color-charcoal); font-variant-numeric: tabular-nums; }
.s-stats__label { margin-top: var(--space-1-5); font-size: 12.5px; letter-spacing: 0.02em; color: var(--color-text-light); }
.s-stats__foot { margin: var(--space-8) 0 0; padding-top: var(--space-4); border-top: 1px dashed var(--color-border); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--color-text-meta); }

/* ---- photo cards (kit: PhotoCard): the image on top in the card's radius, then tag, title, text, meta */
.s-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-10) var(--space-6); margin: 0; padding: 0; list-style: none; }
.s-photo { display: flex; flex-direction: column; gap: var(--space-2); color: inherit; text-decoration: none; }
.s-photo__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: var(--space-2); border-radius: var(--radius-lg); background: var(--color-bg-alt); }
.s-photo__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-photo__tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); }
.s-photo__title { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.25; color: var(--color-charcoal); }
.s-photo:hover .s-photo__title { color: var(--color-primary-dark); }
.s-photo__text { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-light); }
.s-photo__meta { margin-top: var(--space-1); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--color-text-meta); }
.s-photo:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-lg); }

/* ---- questions (kit: Faq): native disclosures, a round marker, the answer in the light text */
.s-faq { display: grid; gap: var(--space-6); max-width: var(--max-width-narrow, 50rem); }
.s-faq__item { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.s-faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-8); font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; }
.s-faq__item > summary::-webkit-details-marker { display: none; }
.s-faq__item > summary > * { margin: 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; line-height: 1.4; color: var(--color-text); }
.s-faq__item > summary::after { content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-full); font-weight: 400; color: var(--color-primary-dark); }
.s-faq__item[open] > summary::after { content: "\2212"; }
.s-faq__item > summary:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.s-faq__item > :not(summary) { padding: 0 var(--space-8) var(--space-8); margin: 0; font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-light); }
@media (max-width: 599px) { .s-faq__item > summary { padding: var(--space-4) var(--space-5); } .s-faq__item > :not(summary) { padding: 0 var(--space-5) var(--space-5); } }

/* ---- the closing band (kit: CtaBand): charcoal, centred, the one gold button, a ghost beside it */
.s-band { padding: 130px 0; background: var(--color-charcoal); color: var(--color-bg); border: 0; text-align: center; }
.s-band .ending__inner, .s-band__inner { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: var(--max-width); margin: 0 auto; }
.s-band .ending__text { display: block; }
.s-band__eyebrow, .s-band .kicker { margin: 0 0 26px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-300); }
.s-band .ending__title, .s-band__title { margin: 0 auto 22px; max-width: 20ch; font-family: var(--font-display); font-weight: 500; font-size: var(--text-display-xl); line-height: 1.06; letter-spacing: -0.02em; color: var(--color-bg); text-wrap: balance; }
.s-band .ending__title em, .s-band__title em { font-style: italic; font-weight: 400; color: var(--gold-400); }
.s-band .ending__sub, .s-band__text { margin: 0 auto 44px; max-width: 52ch; font-size: 17px; line-height: 1.6; color: var(--gray-300); }
.s-band .ending__ctas, .s-band__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin: 0; }
.s-band .ending__ctas .btn, .s-band__ctas .btn { width: auto; }
.s-band :is(.btn--outline, .btn--call, .btn--ghost) { background: transparent; border-color: var(--gray-400); color: var(--color-bg); }
.s-band a:not(.btn) { color: var(--color-bg); }   /* the gold button keeps its charcoal text */
.s-band :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.s-band .s-band__note { margin: 26px 0 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-400); }
@media (max-width: 899px) { .s-band { padding: 80px 0; } .s-band .ending__title, .s-band__title { font-size: var(--text-display-lg); } }

/* ---- the gold action (kit: Button, gold): one per page; everything else is green, outline or text */
.s-btn-gold { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); box-shadow: var(--shadow-gold); }
.s-btn-gold:hover { background: var(--gold-600, #d4a438); border-color: var(--gold-600, #d4a438); }