/* Sentinel Engineering Analysis Ltd — site styles.
   Single stylesheet, no third-party requests, no webfonts fetched from a CDN. */

:root {
    --sans: 'Helvetica Neue', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --ink: #1c1f22; /* headings, dark shell */
    --body: #2e3338; /* paragraphs */
    --muted: #6e767d; /* captions, secondary */
    --page: #ffffff;
    --shell: #1c1f22; /* masthead + footer */
    --accent: #e4610f; /* rules, links */
    --line: #dfe3e6;
    --cardbg: #f7f8f9;
    --radius: 2px;
    --measure: 1080px;

    color-scheme: light;
}

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

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--body);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 24px;
}

a {
    color: var(--accent);
}
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

h1,
h2,
h3 {
    font-family: var(--sans);
    color: var(--ink);
    line-height: 1.15;
    margin: 0 0 0.5em;
}
h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.015em;
    font-weight: 700;
}
h2 {
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    letter-spacing: -0.005em;
}
h3 {
    font-size: 1.1rem;
}
p {
    margin: 0 0 1.1em;
    max-width: 68ch;
}

/* skip link */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: #fff;
    padding: 10px 16px;
    z-index: 10;
    text-decoration: none;
}
.skip:focus {
    left: 0;
}

/* masthead */
.masthead {
    background: var(--shell);
}
.masthead .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 18px;
    padding-bottom: 18px;
}
.brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.045em;
    text-decoration: none;
}
.masthead nav {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    font-size: 0.92rem;
}
.masthead nav a {
    color: #aeb6bc;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}
.masthead nav a:hover {
    color: #fff;
}
.masthead nav a[aria-current='page'] {
    color: #fff;
    border-bottom-color: var(--accent);
}

/* hero */
.hero img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
}

/* page intro */
.lede {
    padding: 52px 0 8px;
}
.eyebrow {
    color: var(--accent);
    font-size: 0.84rem;
    letter-spacing: 0.12em;
    margin: 0 0 14px;
    font-weight: 500;
}

/* cards */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin: 34px 0 56px;
    padding: 0;
    list-style: none;
}
.card {
    border: 1px solid var(--line);
    background: var(--cardbg);
    padding: 20px 22px;
    border-radius: var(--radius);
}
.card h3 {
    margin-bottom: 0.35em;
}
.card p {
    font-size: 0.95rem;
    margin: 0;
    color: var(--muted);
    max-width: none;
}

.section {
    padding: 12px 0 56px;
}
.rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0 0 44px;
}

/* figures */
figure {
    margin: 0 0 30px;
}
figcaption {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 10px;
}
/* The two photographs have opposite orientations (one portrait, one landscape).
   Matching them on width makes the portrait one tower over the other, so match
   them on height instead and let the widths fall out naturally. */
.figure-pair {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 26px;
    margin: 0 0 40px;
}
.figure-pair figure {
    margin: 0;
}
.figure-pair img {
    display: block;
    height: 420px;
    width: auto;
    max-width: 100%;
    border: 1px solid var(--line);
}
@media (max-width: 760px) {
    .figure-pair img {
        height: auto;
        width: 100%;
    }
}

/* a plain captioned photograph */
.photo {
    max-width: 640px;
}
.photo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
}

/* cross-dissolve cinemagraph */
/* The two frames are registered to each other (see README) and share these
   exact dimensions, so the box matches them and nothing is cropped or letterboxed. */
.cinemagraph {
    max-width: 630px;
}
.frames {
    position: relative;
    aspect-ratio: 630 / 456;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #000;
}
.frames img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.frames img.alt {
    opacity: 0;
    animation: crossfade 2.4s ease-in-out infinite;
}
@keyframes crossfade {
    0%,
    40% {
        opacity: 0;
    }
    50%,
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.frames.is-paused img.alt {
    animation-play-state: paused;
}

.motion-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 5px 12px;
    font: inherit;
    font-size: 0.82rem;
    font-family: var(--mono);
    color: var(--body);
    background: var(--cardbg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}
.motion-toggle:hover {
    border-color: var(--accent);
    color: var(--ink);
}

/* respect a reduced-motion preference: hold the first frame, let them opt in */
@media (prefers-reduced-motion: reduce) {
    .frames img.alt {
        animation-play-state: paused;
    }
}

/* outbound video links */
.links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    margin: 26px 0;
}
.linkcard {
    display: block;
    padding: 15px 18px;
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--cardbg);
}
.linkcard:hover {
    border-color: var(--accent);
}
.linkcard strong {
    display: block;
    color: var(--ink);
    font-size: 1rem;
}
.linkcard span {
    font-size: 0.82rem;
    color: var(--muted);
}

/* equipment list */
.equipment {
    columns: 2;
    column-gap: 40px;
    padding-left: 1.15em;
    margin: 0 0 40px;
}
.equipment li {
    break-inside: avoid;
    margin-bottom: 0.3em;
}
@media (max-width: 620px) {
    .equipment {
        columns: 1;
    }
}

/* contact */
.details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 26px;
    margin: 0 0 40px;
}
.details h3 {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 0.4em;
}
.details p {
    font-size: 1.05rem;
    margin: 0;
}

/* footer */
footer {
    background: var(--shell);
    color: #9aa2a9;
    margin-top: 40px;
    padding: 26px 0;
    font-size: 0.84rem;
}
footer .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    justify-content: space-between;
}
footer a {
    color: var(--accent);
}
footer p {
    margin: 0;
    max-width: none;
}

@media (max-width: 700px) {
    .hero img {
        height: 200px;
    }
    .lede {
        padding-top: 36px;
    }
}