/* FEW page styles */

.few-page {
    --few-graphite: #17181a;
    --few-graphite-warm: #1c1b19;
    --few-off-white: #ecebe6;
    --few-grey: #8a8d8a;
    --few-grey-line: #34352f;
    --few-od-green: #5c6b4f;

    background-color: var(--few-graphite-warm);
    color: var(--few-off-white);
    font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.few-intro {
    padding: 6rem 1.5rem 5rem;
}

.few-intro__inner {
    max-width: 64rem;
    margin: 0 auto;
}

.few-intro__header {
    margin-bottom: 4rem;
}

.few-intro__mark-wrap {
    margin: 0;
    line-height: 0;
}

.few-intro__mark {
    display: block;
    height: clamp(5.2rem, 18.2vw, 10.4rem);
    width: auto;
    max-width: 100%;
}

.few-intro__lede {
    margin: 1.5rem 0 0;
    max-width: 30rem;
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--few-off-white);
    border-top: 1px solid var(--few-od-green);
    padding-top: 1.25rem;
}

.few-intro__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 4rem;
}

.few-intro__media {
    margin: 0;
}

/*
 * Workshop photo is a 3:4 portrait. On narrow screens it is cropped to
 * 4:3 around the bending brake and the stacked stove bodies; on desktop
 * the narrow left column shows it near-full height at 4:5.
 */
.few-intro__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 72%;
    background-color: var(--few-graphite);
}

.few-intro__media-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--few-grey);
}

.few-intro__body {
    max-width: 38rem;
}

.few-intro__body p {
    margin: 0 0 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--few-off-white);
}

.few-intro__body p:last-child {
    margin-bottom: 0;
}

@media (min-width: 56rem) {
    .few-intro {
        padding: 8rem 2.5rem 7rem;
    }

    .few-intro__grid {
        grid-template-columns: 5fr 7fr;
        gap: 4rem;
        align-items: start;
    }

    .few-intro__photo {
        aspect-ratio: 4 / 5;
        object-position: 50% 60%;
    }
}

.few-fyringsvakta {
    padding: 5rem 1.5rem 6rem;
    border-top: 1px solid var(--few-grey-line);
}

.few-fyringsvakta__inner {
    max-width: 64rem;
    margin: 0 auto;
}

.few-fyringsvakta__title {
    margin: 0 0 3rem;
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--few-off-white);
}

.few-fyringsvakta__video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 3.5rem;
    border: 1px solid var(--few-grey-line);
    background-color: var(--few-graphite);
    overflow: hidden;
}

.few-fyringsvakta__video-el {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
}

.few-fyringsvakta__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    border: 0;
    background-color: rgba(23, 24, 26, 0.2);
    color: var(--few-off-white);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.few-fyringsvakta__play:hover,
.few-fyringsvakta__play:focus-visible {
    background-color: rgba(23, 24, 26, 0.35);
}

.few-fyringsvakta__play svg {
    width: clamp(3rem, 8vw, 4.5rem);
    height: clamp(3rem, 8vw, 4.5rem);
}

.few-fyringsvakta__video.is-playing .few-fyringsvakta__play {
    display: none;
}

.few-fyringsvakta__body {
    max-width: 38rem;
}

.few-fyringsvakta__body p {
    margin: 0 0 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--few-off-white);
}

.few-fyringsvakta__body p:last-child {
    margin: 0;
}

@media (min-width: 56rem) {
    .few-fyringsvakta {
        padding: 7rem 2.5rem 8rem;
    }

    .few-fyringsvakta__video-el {
        max-height: 75vh;
    }
}

.few-kontakt {
    padding: 5rem 1.5rem 6rem;
    border-top: 1px solid var(--few-grey-line);
}

.few-kontakt__inner {
    max-width: 64rem;
    margin: 0 auto;
}

.few-kontakt__title {
    margin: 0 0 3rem;
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--few-off-white);
}

.few-kontakt__group {
    margin: 0 0 2.5rem;
}

.few-kontakt__group:last-child {
    margin-bottom: 0;
}

.few-kontakt__line {
    margin: 0 0 0.375rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--few-off-white);
}

.few-kontakt__line:last-child {
    margin-bottom: 0;
}

.few-kontakt__email-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.few-kontakt__copy {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--few-grey);
    cursor: pointer;
    transition: color 0.2s ease;
}

.few-kontakt__copy:hover,
.few-kontakt__copy:focus-visible {
    color: var(--few-off-white);
}

.few-kontakt__link {
    color: var(--few-off-white);
    text-decoration: none;
    border-bottom: 1px solid var(--few-grey-line);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.few-kontakt__link:hover,
.few-kontakt__link:focus-visible {
    color: var(--few-od-green);
    border-color: var(--few-od-green);
}

@media (min-width: 56rem) {
    .few-kontakt {
        padding: 7rem 2.5rem 8rem;
    }
}

.few-pro-section {
    padding: 4rem 1.5rem;
}

.few-pro-section:first-child {
    padding-top: 6rem;
}

.few-pro-section:last-child {
    padding-bottom: 6rem;
}

.few-pro-section + .few-pro-section {
    border-top: 1px solid var(--few-grey-line);
}

.few-pro-inner {
    max-width: 64rem;
    margin: 0 auto;
}

.few-page .few-pro-title {
    margin: 0 0 1.5rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--few-off-white);
}

.few-pro-lede {
    margin: 0;
    max-width: 38rem;
    font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
    line-height: 1.7;
    color: var(--few-off-white);
}

.few-pro-photo {
    display: block;
    width: 100%;
    height: auto;
}

.few-pro-photo-caption {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--few-grey);
}

.few-pro-heading {
    margin: 0 0 1.75rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--few-off-white);
}

.few-pro-body {
    max-width: 38rem;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--few-off-white);
}

.few-pro-body + .few-pro-body,
.few-pro-body + .few-pro-doc {
    margin-top: 1.5rem;
}

.few-pro-doc {
    margin: 0 0 2rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--few-od-green);
}

.few-pro-doc-label {
    margin: 0 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--few-grey);
}

.few-pro-doc-link {
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--few-off-white);
    text-decoration: none;
    border-bottom: 1px solid var(--few-grey-line);
}

.few-pro-doc-link:hover,
.few-pro-doc-link:focus-visible {
    color: var(--few-od-green);
    border-color: var(--few-od-green);
}

@media (min-width: 56rem) {
    .few-pro-section {
        padding: 5rem 2.5rem;
    }

    .few-pro-section:first-child {
        padding-top: 8rem;
    }

    .few-pro-section:last-child {
        padding-bottom: 8rem;
    }
}

.few-map-section {
    padding: 5rem 1.5rem 6rem;
    border-top: 1px solid var(--few-grey-line);
}

@media (min-width: 56rem) {
    .few-map-section {
        padding: 7rem 2.5rem 8rem;
    }
}

.few-map {
    margin: 2rem auto 0;
    max-width: 100%;
}

.few-map__svg {
    display: block;
    width: 100%;
    height: auto;
}

.few-map__countries {
    fill: var(--few-grey-line);
}

.few-map__country {
    stroke: var(--few-graphite-warm);
    stroke-width: 0.6;
    stroke-linejoin: round;
}

/*
 * Highlighted destinations. This modifier class is applied at render time
 * by templates/few-page.php, based on the $few_map_destinations array —
 * that array is the only place destinations need to be added.
 */
.few-map__country--active {
    fill: var(--few-od-green);
}

/*
 * Svalbard is not part of $few_map_destinations (it is not a country), but
 * is still shown as delivered-to territory: its landmass is filled the same
 * accent as the highlighted countries, with a marker pinned on top.
 */
.few-map__svalbard {
    fill: var(--few-od-green);
}

.few-map__marker-ring {
    fill: none;
    stroke: var(--few-off-white);
    stroke-width: 1;
    opacity: 0.55;
}

.few-map__marker-dot {
    fill: var(--few-off-white);
}

.few-map__credit {
    margin: 0.75rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--few-grey);
    opacity: 0.65;
}

.few-map__credit-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--few-grey-line);
    text-underline-offset: 0.15em;
}

.few-map__credit-link:hover,
.few-map__credit-link:focus-visible {
    color: var(--few-off-white);
    text-decoration-color: currentColor;
}

.few-map__sr-desc.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * FIELD NOTES / FIELD TESTED
 * Page sections reuse .few-pro-section / .few-pro-inner / .few-pro-heading.
 */

/* The theme's content wrapper is a flex container; fill it regardless of how much text a page has. */
.few-page.few-field-notes {
    flex: 1 1 auto;
    width: 100%;
}

.few-page .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.few-fn-index {
    margin: 0;
    padding: 0;
    list-style: none;
}

.few-fn-index__item + .few-fn-index__item {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--few-grey-line);
}

.few-fn-index__link-row {
    margin: 1.75rem 0 0;
}

.few-fn-parent {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.few-fn-parent__link {
    color: var(--few-grey);
    text-decoration: none;
}

.few-fn-parent__link:hover,
.few-fn-parent__link:focus-visible {
    color: var(--few-off-white);
}

.few-fn-statement {
    margin-top: 2.5rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--few-od-green);
}

.few-fn-statement .few-pro-body {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--few-grey);
}

.few-equip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.few-equip-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--few-grey-line);
    background-color: var(--few-graphite);
}

.few-equip-card__media {
    aspect-ratio: 4 / 3;
    border-bottom: 1px solid var(--few-grey-line);
    overflow: hidden;
}

.few-equip-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.few-equip-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 1px dashed var(--few-grey-line);
}

.few-equip-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}

.few-equip-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--few-grey);
}

.few-equip-card__badge {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--few-od-green);
    color: var(--few-off-white);
}

.few-page .few-equip-card__title {
    margin: 0 0 1rem;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    color: var(--few-off-white);
}

.few-equip-card__manufacturer {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--few-grey);
}

.few-equip-card__product {
    display: block;
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.few-equip-card__desc {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--few-off-white);
}

.few-equip-card__notes {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--few-grey-line);
}

.few-equip-card__notes-label {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--few-grey);
}

.few-equip-card__notes p:not(.few-equip-card__notes-label) {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--few-off-white);
}

.few-equip-card__notes p:last-child {
    margin-bottom: 0;
}

.few-equip-card__link-row {
    margin: auto 0 0;
    padding-top: 1.5rem;
}

.few-equip-card__link {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--few-off-white);
    text-decoration: none;
    border-bottom: 1px solid var(--few-grey-line);
}

.few-equip-card__link:hover,
.few-equip-card__link:focus-visible {
    color: var(--few-od-green);
    border-color: var(--few-od-green);
}

@media (min-width: 48rem) {
    .few-equip-card {
        display: grid;
        grid-template-columns: 5fr 7fr;
    }

    .few-equip-card__media {
        border-bottom: 0;
        border-right: 1px solid var(--few-grey-line);
    }

    .few-equip-card__body {
        padding: 2rem;
    }
}