/*
 * The étalon page.
 *
 * This is the formal end of the site and it is deliberately quiet. Fraunces
 * runs at --wonk-formal throughout: the same typeface as the litter pages,
 * dialled straight, because this page's whole job is to be believed and the
 * canted alternates undercut that. The one exception is the affixe under the
 * name — the only line here that is a flourish rather than a fact.
 *
 * Colour follows the four roles declared in tokens.css:
 *   field green  structure — rules, section heads, links that go deeper
 *   rosette gold honours and documents, and nothing else on the page
 *   cream ground unchanged, because it is the French idiom
 *
 * There is no grass, no heart canvas and no vine slider here. Those are the
 * charm layer and they stay on the pages about the family.
 */

/* ---- Page ------------------------------------------------------------ */

.page-etalon {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.page-etalon h1,
.page-etalon h2,
.page-etalon h3 {
    font-family: var(--font-display);
    font-variation-settings: var(--wonk-formal);
    color: var(--color-ink-deep);
    line-height: 1.1;
    text-wrap: balance;
}

.page-etalon a {
    color: var(--color-field);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.page-etalon a:hover,
.page-etalon a:focus-visible {
    color: var(--color-ink-deep);
}

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

.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: var(--space-md);
    top: var(--space-md);
    z-index: var(--z-modal);
    background: var(--color-paper);
    padding: var(--space-sm) var(--space-md);
    border-radius: 4px;
}

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

/* ---- Hero -------------------------------------------------------------

   One photograph, full bleed, with the name over it.

   The band is a DIFFERENT SHAPE at each size on purpose — 2.6:1 on a desktop,
   16:9 on a tablet, 4:5 on a phone — because a letterbox that works across a
   monitor becomes a slit on a handset. That is the whole reason framing has
   three tiers: this one photo has to survive all three, and the crop that
   keeps the dog in a wide band will cut his head off in a tall one.

   The tier values arrive as custom properties set on the <img> by
   tools/build-etalon.mjs, NOT as an inline object-position — an inline
   declaration beats any stylesheet rule at any specificity, so the media
   queries below could never have overridden it and every size would silently
   render the desktop framing.

   Frame it in the editor like any other crop; the probe measures these three
   shapes from this stylesheet rather than being told about them. */

.hero {
    position: relative;
    /* One named cell, explicitly sized. Without `minmax(0, 1fr)` the row sizes
       to its content instead of to the band: the image's `height: 100%` is a
       cyclic reference, the browser falls back to the intrinsic height, and the
       children end up far taller than the band — so the caption is clipped away
       and the hero renders as a silent strip of sky. */
    display: grid;
    grid-template: "stack" minmax(0, 1fr) / minmax(0, 1fr);
    /* aspect-ratio plus max-height makes a grid shrink its WIDTH to keep the
       ratio, so the band stops short of the viewport edge. Pin it. */
    width: 100%;
    isolation: isolate;
    aspect-ratio: 2.6 / 1;
    max-height: 34rem;
    overflow: hidden;
    background: var(--color-rule);
}

.hero-img,
.hero-scrim,
.hero-caption {
    grid-area: stack;
    min-width: 0;
    min-height: 0;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
    object-position: var(--hero-focus, 50% 50%);
    transform: scale(var(--hero-zoom, 1));
    transform-origin: var(--hero-focus, 50% 50%);
}

/* These must come AFTER the rule above: both have the same specificity, so
   source order is the only thing deciding which wins. */
@media (max-width: 68.75rem) {          /* 1100px — tablet */
    .hero { aspect-ratio: 16 / 9; }

    .hero-img {
        object-position: var(--hero-focus-tablet, var(--hero-focus, 50% 50%));
        transform: scale(var(--hero-zoom-tablet, var(--hero-zoom, 1)));
        transform-origin: var(--hero-focus-tablet, var(--hero-focus, 50% 50%));
    }
}

@media (max-width: 40rem) {             /* 640px — phone */
    .hero { aspect-ratio: 4 / 5; max-height: 30rem; }

    .hero-img {
        object-position: var(--hero-focus-phone, var(--hero-focus-tablet, var(--hero-focus, 50% 50%)));
        transform: scale(var(--hero-zoom-phone, var(--hero-zoom-tablet, var(--hero-zoom, 1))));
        transform-origin: var(--hero-focus-phone, var(--hero-focus-tablet, var(--hero-focus, 50% 50%)));
    }
}

/* A scrim, not a flat overlay: the name needs contrast at the bottom and the
   photograph deserves to be untouched at the top. */
.hero-scrim {
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(20, 14, 11, 0.10) 0%,
        rgba(20, 14, 11, 0.00) 35%,
        rgba(20, 14, 11, 0.45) 78%,
        rgba(20, 14, 11, 0.78) 100%);
}

.hero-caption {
    z-index: 2;
    align-self: end;
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: var(--space-md) var(--space-md) var(--space-lg);
    /* Left-aligned, not centred: a centred title lands squarely in the middle
       of the frame, which is exactly where the subject of a dog photograph
       tends to be. Off to one side, the name and the dog can both be read. */
    text-align: left;
    color: #fff;
}

@media (max-width: 40rem) {
    /* On a phone the band is nearly square and the caption spans it anyway,
       so centring reads better than a hard left edge. */
    .hero-caption { text-align: center; }
}

.hero-caption .eyebrow {
    color: #fff;
    opacity: 0.85;
    margin-bottom: var(--space-xs);
}

.hero-caption .etalon-name {
    color: #fff;
    /* The name sits on photography, which is never a uniform value, so it
       carries its own shadow rather than relying on the scrim alone. */
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.hero-caption .etalon-affix {
    color: #fff;
    opacity: 0.9;
    margin: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* ---- Header type ------------------------------------------------------- */

.eyebrow {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-field);
    font-weight: 700;
    margin: 0 0 var(--space-sm);
}

/* The scale gap is the point. What separates the credible breeder sites from
   the amateur ones is a display size that commits, set against small tracked
   labels — sites that live between 14px and 32px have no hierarchy at all. */
.etalon-name {
    font-size: clamp(3rem, 1.2rem + 7vw, 6.5rem);
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 0.95;
}

.etalon-affix {
    font-family: var(--font-display);
    font-variation-settings: var(--wonk-warm);
    font-size: var(--text-lg);
    color: var(--color-ink-soft);
    margin: var(--space-xs) 0 var(--space-lg);
}

/* ---- Portrait carousel ----------------------------------------------- */

.portrait-carousel {
    max-width: 34rem;
    margin: 0 auto;
}

.portrait-stage {
    position: relative;
    /* A fixed ratio stops the page reflowing as slides of different shapes
       cross-fade, which is what makes most photo carousels feel cheap. */
    aspect-ratio: 4 / 5;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
}

.portrait-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity var(--motion-slow) var(--ease-out);
    pointer-events: none;
}

.portrait-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.portrait-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Default only. Each slide carries its own object-position inline, from
       the `focus` value in data/dogs.json. */
    object-position: 50% 40%;
    display: block;
}

.portrait-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-bg) 80%, transparent);
    backdrop-filter: blur(4px);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-out);
}

.portrait-arrow--prev { left: var(--space-sm); }
.portrait-arrow--next { right: var(--space-sm); }

.portrait-arrow img {
    width: 1.1rem;
    height: 1.1rem;
    opacity: 0.7;
}

.rotate-90  { transform: rotate(90deg); }
.rotate-270 { transform: rotate(270deg); }

/* Arrows are chrome; they appear when the visitor shows intent. They are
   always present for keyboard users, which is what :focus-within covers. */
.portrait-carousel:hover .portrait-arrow,
.portrait-carousel:focus-within .portrait-arrow {
    opacity: 1;
}

/* Touch has no hover, so there they are simply always visible. */
@media (hover: none) {
    .portrait-arrow { opacity: 1; }
}

.portrait-dots {
    display: flex;
    justify-content: center;
    /* No gap: each button is 24 wide and carries its own air, which is what
       puts 24px between centres. A gap on top of that would only push the
       dots further apart than the design wants. */
    gap: 0;
    margin-top: var(--space-sm);
}

/* The dot you SEE is 8px; the dot you can HIT is 24. WCAG 2.2 asks for 24×24
   or 24px between centres, and eight-pixel circles 13.6px apart were neither.
   Drawing the circle as a pseudo-element buys the target without making the
   dots bigger — on a page this quiet, five fat dots under the photograph
   would be the loudest thing in the section. */
.portrait-dot {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.portrait-dot::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-rule);
    transition: background var(--motion-fast) var(--ease-out),
                transform var(--motion-fast) var(--ease-out);
}

.portrait-dot.is-active::before {
    background: var(--color-field);
    transform: scale(1.35);
}

/* ---- Headline facts --------------------------------------------------- */

.headline-facts {
    list-style: none;
    max-width: 54rem;
    margin: 0 auto;
    padding: var(--space-md);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

.headline-facts li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 9rem;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: 4px;
}

.headline-facts .k {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-ink-soft);
}

.headline-facts .v {
    font-weight: 700;
    color: var(--color-ink-deep);
}

/* ---- Blocks ----------------------------------------------------------- */

.block {
    max-width: 54rem;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) 0;
}

.block h2 {
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-field);
}

.block h3 {
    font-size: var(--text-lg);
    margin: var(--space-lg) 0 var(--space-sm);
    color: var(--color-field);
}

.lede {
    color: var(--color-ink-soft);
    margin: 0 0 var(--space-md);
}

.block-action {
    margin: var(--space-md) 0 0;
}

/* ---- Productions ------------------------------------------------------ */

.litter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--space-md);
}

.litter-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: 6px;
    overflow: hidden;
}

.litter-cover {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-rule);
}

.litter-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--motion-slow) var(--ease-out);
}

.litter-card:hover .litter-photo {
    transform: scale(1.03);
}

.litter-body {
    padding: var(--space-md);
}

.litter-body h3 {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--color-ink-deep);
}

.litter-body h3 a {
    text-decoration: none;
}

.litter-pair {
    margin: 0.15rem 0 0;
    font-weight: 700;
    color: var(--color-field);
}

.litter-born,
.litter-count {
    margin: 0.15rem 0 0;
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
}

.litter-names {
    margin: var(--space-sm) 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-ink);
}

.litter-chips {
    margin: var(--space-sm) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.chip {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
}

.chip--disponible { color: var(--color-field); }
.chip--reserve    { color: var(--color-rosette); }
.chip--place,
.chip--garde      { color: var(--color-ink-soft); }

/* ---- Origines --------------------------------------------------------- */

.parent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-lg);
    text-align: center;
}

.parent-portrait {
    width: min(13rem, 60vw);
    margin: 0 auto var(--space-sm);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    /* The circular crop is the family-page identity treatment, kept here on
       purpose: the parents belong to the lineage, not to the dossier. */
    border: 3px solid var(--color-rule);
    background: var(--color-surface);
}

.parent-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.parent-role {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-field);
    font-family: var(--font-body);
    font-weight: 700;
}

.parent-name {
    margin: 0.1rem 0 0;
    font-family: var(--font-display);
    font-variation-settings: var(--wonk-formal);
    font-size: var(--text-lg);
    color: var(--color-ink-deep);
}

.parent-full {
    margin: 0;
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-ink-soft);
}

.parent-link {
    font-size: var(--text-sm);
}

/* ---- Facts ------------------------------------------------------------ */

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    column-gap: var(--space-lg);
    row-gap: 0;
    margin: 0;
}

.fact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-rule);
}

.fact dt {
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.fact dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
    color: var(--color-ink-deep);
}

/* ---- Tables ----------------------------------------------------------- */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.results {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.results thead th {
    text-align: left;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-ink-soft);
    font-weight: 700;
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 2px solid var(--color-field);
    white-space: nowrap;
}

.results tbody th,
.results tbody td {
    text-align: left;
    padding: var(--space-sm);
    border-bottom: 1px solid var(--color-rule);
    font-weight: 400;
    vertical-align: top;
}

.results tbody th { color: var(--color-ink-deep); }

.results .gene {
    color: var(--color-ink-soft);
    white-space: nowrap;
}

.results .mut {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
}

.results .result {
    font-weight: 700;
    white-space: nowrap;
}

/* A clear result is marked in field green rather than with a tick — the row
   stays data, and the colour is the one already structuring the page. */
.results .is-clear .result   { color: var(--color-field); }
.results .is-carrier .result { color: var(--color-rosette); }

.results.morph tbody th {
    color: var(--color-ink-soft);
}

/* ---- Provenance ------------------------------------------------------- */

.provenance {
    margin: var(--space-md) 0 0;
    padding: var(--space-md);
    background: var(--color-surface);
    border-left: 3px solid var(--color-field);
    border-radius: 0 4px 4px 0;
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
}

.provenance strong { color: var(--color-ink-deep); }

/* Gold is reserved for documents and honours. Nothing else on the page uses
   it, and that scarcity is the only thing keeping it from reading as the
   breeder-template idea of "premium". */
.doc-link {
    display: inline-block;
    margin-top: var(--space-xs);
    color: var(--color-rosette);
    font-weight: 700;
}

.doc-link:hover,
.doc-link:focus-visible {
    color: var(--color-ink-deep);
}

/* ---- Saillie ---------------------------------------------------------- */

#saillie p { max-width: 42rem; }

.tarif {
    font-weight: 700;
    color: var(--color-ink-deep);
}

/* ---- Legal + footer --------------------------------------------------- */

.block--legal {
    margin-top: var(--space-xl);
    font-size: var(--text-sm);
}

.block--legal h2 {
    font-size: var(--text-lg);
    border-bottom-width: 1px;
    border-bottom-color: var(--color-rule);
}

.facts--legal .fact dd {
    font-weight: 400;
}

.legal-note {
    color: var(--color-ink-soft);
    margin-top: var(--space-md);
}

.site-footer {
    max-width: 54rem;
    margin: var(--space-xl) auto 0;
    padding: var(--space-md) var(--space-md) var(--space-xl);
    border-top: 1px solid var(--color-rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    flex-wrap: wrap;
    font-size: var(--text-sm);
}

.site-footer-nav {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: 0;
}

.site-footer-mark {
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: var(--wonk-formal);
    color: var(--color-ink-soft);
}

/* ---- Small screens ---------------------------------------------------- */

@media (max-width: 40rem) {
    .fact {
        flex-direction: column;
        gap: 0;
    }
    .fact dd { text-align: left; }


    /* Three stacked cards with full padding pushed the first real content
       below the fold on a phone. */
    .headline-facts {
        gap: var(--space-xs);
    }

    .headline-facts li {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--space-sm);
        width: 100%;
        padding: var(--space-xs) var(--space-sm);
    }

    .etalon-header {
        padding-top: var(--space-lg);
    }
}

/* ---- Motion policy ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .portrait-slide,
    .portrait-arrow,
    .portrait-dot::before,
    .litter-photo {
        transition: none;
    }
    .litter-card:hover .litter-photo {
        transform: none;
    }
}

/* ---- Contact ----------------------------------------------------------
   The one thing on this page that has to be found without looking for it,
   so the address is set at display size rather than tucked into body copy. */

.contact-line {
    margin: 0 0 var(--space-sm);
}

.contact-mail {
    font-family: var(--font-display);
    font-variation-settings: var(--wonk-formal);
    font-size: clamp(1.4rem, 1rem + 1.8vw, 2.2rem);
    font-weight: 700;
    color: var(--color-field);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    word-break: break-word;
}

.contact-mail:hover,
.contact-mail:focus-visible {
    color: var(--color-ink-deep);
}

.contact-hint {
    max-width: 42rem;
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
    margin: 0;
}