/*
 * Strictlydev - Base
 * Reset, element defaults and the typographic scale.
 *
 * Typography rules follow guidelines p.29:
 *   Headlines  - short, declarative, usually left aligned
 *   Body copy  - readable sizes, generous spacing, no dense justified blocks
 *   Numbers    - important metrics made prominent
 *   All caps   - sparingly, for labels, section codes and small metadata
 *   Emphasis   - weight and spacing before extra colour
 */

/* ---------- Reset ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--sd-header-h) + var(--sd-space-4));
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul {
    margin: 0;
}

ul[class],
ol[class] {
    padding: 0;
    list-style: none;
}

body {
    min-height: 100vh;
    background-color: var(--sd-surface);
    color: var(--sd-text);
    font-family: var(--sd-font);
    font-size: var(--sd-text-base);
    font-weight: var(--sd-weight-regular);
    line-height: var(--sd-leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

svg {
    fill: currentColor;
}

/* ---------- Headings ---------- */

h1, h2, h3, h4, h5, h6 {
    color: var(--sd-heading);
    font-weight: var(--sd-weight-semibold);
    line-height: var(--sd-leading-heading);
    letter-spacing: var(--sd-tracking-heading);
    text-wrap: balance;
}

h1 { font-size: var(--sd-size-h1); }
h2 { font-size: var(--sd-size-h2); }
h3 { font-size: var(--sd-size-h3); }
h4 { font-size: var(--sd-size-h4); }
h5 { font-size: var(--sd-size-h5); }

h6 {
    font-size: var(--sd-size-h6);
    font-weight: var(--sd-weight-semibold);
    letter-spacing: var(--sd-tracking-body);
}

/*
 * Display is reserved for the single principal statement on a page -
 * typically the signature line. Never more than one per view.
 */
.sd-display {
    color: var(--sd-heading);
    font-size: var(--sd-size-display);
    font-weight: var(--sd-weight-bold);
    line-height: var(--sd-leading-display);
    letter-spacing: var(--sd-tracking-display);
    max-width: var(--sd-measure-tight);
}

.sd-h1 { font-size: var(--sd-size-h1); }
.sd-h2 { font-size: var(--sd-size-h2); }
.sd-h3 { font-size: var(--sd-size-h3); }
.sd-h4 { font-size: var(--sd-size-h4); }

/* ---------- Body copy ---------- */

p {
    max-width: var(--sd-measure);
}

p + p {
    margin-top: var(--sd-space-4);
}

.sd-lead {
    font-size: var(--sd-text-lead);
    line-height: var(--sd-leading-snug);
    color: var(--sd-text-muted);
    max-width: 58ch;
}

.sd-text-sm { font-size: var(--sd-text-sm); }
.sd-text-muted { color: var(--sd-text-muted); }
.sd-text-meta { color: var(--sd-text-meta); }

/* Emphasis through weight before colour. */
strong, b { font-weight: var(--sd-weight-semibold); }

/*
 * Label / section code. All caps, tracked out, small. Guidelines restrict
 * caps to labels, section codes and metadata - do not apply to sentences.
 */
.sd-label {
    display: block;
    font-size: var(--sd-text-xs);
    font-weight: var(--sd-weight-semibold);
    line-height: 1.3;
    letter-spacing: var(--sd-tracking-caps);
    text-transform: uppercase;
    color: var(--sd-text-meta);
}

.sd-label--accent { color: var(--sd-warm-700); }

.sd-surface--navy .sd-label--accent { color: var(--sd-warm); }

/* Section code, e.g. "01 / BRAND FOUNDATION" - carries a leading rule. */
.sd-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sd-space-3);
    font-size: var(--sd-text-xs);
    font-weight: var(--sd-weight-semibold);
    letter-spacing: var(--sd-tracking-caps);
    text-transform: uppercase;
    color: var(--sd-text-meta);
    margin-bottom: var(--sd-space-4);
}

.sd-eyebrow::before {
    content: '';
    inline-size: var(--sd-space-8);
    block-size: 2px;
    flex: none;
    background-color: var(--sd-brand-blue);
}

/* Prominent metrics - "make important metrics prominent" (p.29). */
.sd-metric {
    display: block;
    font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
    font-weight: var(--sd-weight-bold);
    line-height: 1;
    letter-spacing: var(--sd-tracking-display);
    font-variant-numeric: tabular-nums;
}

/* ---------- Links ---------- */

a {
    color: var(--sd-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--sd-duration-fast) var(--sd-ease);
}

a:hover {
    color: var(--sd-link-hover);
}

/* ---------- Lists ---------- */

.sd-list {
    display: grid;
    gap: var(--sd-space-3);
    padding: 0;
    list-style: none;
    max-width: var(--sd-measure);
}

.sd-list > li {
    position: relative;
    padding-left: var(--sd-space-6);
}

.sd-list > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    inline-size: 0.5rem;
    block-size: 2px;
    background-color: var(--sd-brand-blue);
}

/* ---------- Rules and figures ---------- */

hr,
.sd-rule {
    border: 0;
    block-size: 1px;
    background-color: var(--sd-border);
    margin: var(--sd-space-8) 0;
}

blockquote {
    margin: 0;
}

figcaption {
    font-size: var(--sd-text-sm);
    color: var(--sd-text-meta);
    margin-top: var(--sd-space-3);
}

code, pre, kbd, samp {
    font-family: var(--sd-font-mono);
    font-size: 0.9em;
}

/* ---------- Focus ---------- */

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

:focus:not(:focus-visible) {
    outline: none;
}

/* ---------- Accessibility helpers ---------- */

.sd-visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sd-skip-link {
    position: absolute;
    top: var(--sd-space-2);
    left: var(--sd-space-2);
    z-index: var(--sd-z-overlay);
    padding: var(--sd-space-3) var(--sd-space-5);
    background-color: var(--sd-deep-navy);
    color: var(--sd-white);
    font-weight: var(--sd-weight-semibold);
    border-radius: var(--sd-radius-sm);
    transform: translateY(-200%);
    transition: transform var(--sd-duration) var(--sd-ease);
}

.sd-skip-link:focus {
    transform: translateY(0);
    color: var(--sd-white);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    body {
        background: #FFFFFF;
        color: #000000;
    }

    .sd-site-header,
    .sd-site-footer,
    .sd-nav-toggle {
        display: none !important;
    }
}