/* ============================================================
   newdgrie/default — _10_home.css

   Custom Home page sections. Loaded after _01–_05 (tokens
   + base + header + nav + footer) so it inherits the design
   system and only adds page-specific styling.

   Section structure:
     1. Hero        — full-bleed
     2. Manifesto   — quote
     3. Categories  — 3 cards
     4. Process     — 4 steps
     5. Featured    — product grid
     6. Stories     — editorial cards
     7. Newsletter  — sign-up
   ============================================================ */


.dg-home { display: block; }


/* ── Shared section bits ──────────────────────────────────── */

.dg-eyebrow {
    display: inline-block;
    font-family: var(--dg-font-sans);
    font-size: 11px;
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-faint);
    margin-bottom: 16px;
}
.dg-eyebrow--light { color: rgba(255, 255, 255, 0.6); }

.dg-section-head {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: 0 var(--dg-gutter);
    margin-bottom: 56px;
}
.dg-section-head--centered { text-align: center; }

.dg-section-title {
    font-family: var(--dg-font-serif);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: var(--dg-weight-regular);
    letter-spacing: 0.01em;
    color: var(--dg-ink);
    margin: 0;
    line-height: 1.15;
}


/* ── Buttons ──────────────────────────────────────────────── */

.dg-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    font-family: var(--dg-font-sans);
    font-size: 12px;
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid currentColor;
    background: transparent;
    transition: background var(--dg-duration-fast) var(--dg-ease),
                color      var(--dg-duration-fast) var(--dg-ease),
                border-color var(--dg-duration-fast) var(--dg-ease);
}
.dg-btn__arrow { transition: transform var(--dg-duration-fast) var(--dg-ease); }
.dg-btn:hover .dg-btn__arrow { transform: translateX(4px); }

.dg-btn--ghost {
    color: var(--dg-ink);
    border-color: var(--dg-ink);
}
.dg-btn--ghost:hover {
    background: var(--dg-ink);
    color: var(--dg-paper);
}

.dg-btn--ghost-light {
    color: var(--dg-paper);
    border-color: var(--dg-paper);
}
.dg-btn--ghost-light:hover {
    background: var(--dg-paper);
    color: var(--dg-ink);
}


/* ════════════════════════════════════════════════════════════
   1. HERO
   ════════════════════════════════════════════════════════════ */

.dg-hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--dg-stone);
}

.dg-hero__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.dg-hero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(20, 18, 12, 0.15) 0%,
                rgba(20, 18, 12, 0.4) 100%);
    z-index: 1;
}

.dg-hero__content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 80px var(--dg-gutter);
    text-align: center;
    color: var(--dg-paper);
}

.dg-hero__eyebrow {
    font-family: var(--dg-font-sans);
    font-size: 11px;
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 28px;
}

.dg-hero__title {
    font-family: var(--dg-font-serif);
    font-size: clamp(40px, 6.5vw, 76px);
    font-weight: var(--dg-weight-regular);
    letter-spacing: 0.01em;
    line-height: 1.05;
    margin: 0 0 28px;
    color: var(--dg-paper);
}

.dg-hero__lede {
    font-family: var(--dg-font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto 40px;
    max-width: 520px;
}

.dg-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: block;
    opacity: 0.7;
    transition: opacity var(--dg-duration-fast) var(--dg-ease);
}
.dg-hero__scroll:hover { opacity: 1; }

.dg-hero__scroll-line {
    display: block;
    width: 1px;
    height: 60px;
    background: var(--dg-paper);
    animation: dg-pulse 2.6s ease-in-out infinite;
}
@keyframes dg-pulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
    50%      { opacity: 1;   transform: scaleY(1);   }
}


/* ════════════════════════════════════════════════════════════
   1.5  USP STRIP

   Thin band of 4 value props between hero and manifesto.
   Background is paper (white), creating breathing room
   between the saturated hero image and the cream manifesto.
   On mobile, the row collapses to a 2x2 grid.
   ════════════════════════════════════════════════════════════ */

.dg-usp {
    background: var(--dg-paper);
    border-bottom: 1px solid var(--dg-line);
    padding: clamp(36px, 5vw, 56px) var(--dg-gutter);
}

.dg-usp__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--dg-container-max);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.dg-usp__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    /* Vertical separator between items, except after the last one */
    position: relative;
}
.dg-usp__item + .dg-usp__item::before {
    content: "";
    position: absolute;
    left: -16px;            /* half of grid gap */
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--dg-line);
}

.dg-usp__icon {
    width: 28px;
    height: 28px;
    color: var(--dg-ink);
    flex: 0 0 auto;
    margin-bottom: 4px;
}

.dg-usp__title {
    font-family: var(--dg-font-sans);
    font-size: 12px;
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-ink);
    margin: 0;
    line-height: 1.3;
}

.dg-usp__sub {
    font-family: var(--dg-font-sans);
    font-size: 12px;
    color: var(--dg-muted);
    margin: 0;
    line-height: 1.4;
    max-width: 220px;
}


/* ────────────────────────────────────────
   USP responsive
   ──────────────────────────────────────── */

@media (max-width: 980px) {
    .dg-usp {
        padding: clamp(32px, 6vw, 44px) var(--dg-gutter);
    }
    .dg-usp__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
    }
    /* Re-draw separators for 2x2: vertical between cols, horizontal between rows */
    .dg-usp__item::before {
        display: none;
    }
    .dg-usp__item:nth-child(2)::before,
    .dg-usp__item:nth-child(4)::before {
        display: block;
        content: "";
        position: absolute;
        left: -12px;
        top: 15%;
        bottom: 15%;
        width: 1px;
        background: var(--dg-line);
    }
}

@media (max-width: 540px) {
    .dg-usp__list {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .dg-usp__item:nth-child(2)::before,
    .dg-usp__item:nth-child(4)::before {
        display: none;
    }
    /* Horizontal separators between stacked items */
    .dg-usp__item + .dg-usp__item {
        padding-top: 28px;
        border-top: 1px solid var(--dg-line);
    }
}


/* ════════════════════════════════════════════════════════════
   2. MANIFESTO (rotating quotes)

   Three short quotes that fade through one after another on a
   slow loop. CSS-only animation — no JS dependency. Each quote
   is visible ~6s with a 1.5s cross-fade between. Total cycle
   18s. Pauses on hover/focus for polish.
   ════════════════════════════════════════════════════════════ */

.dg-manifesto {
    background: var(--dg-cream);
    padding: clamp(80px, 12vw, 140px) var(--dg-gutter);
    text-align: center;
}

.dg-manifesto__inner {
    max-width: 800px;
    margin: 0 auto;
}

/* Stack the quotes absolutely on top of each other.
   Container reserves enough height for the longest quote at
   the largest font size — 4 lines × 1.4 line-height ≈ 5.6em
   plus breathing room. clamp() keeps reservation responsive. */
.dg-manifesto__rotator {
    position: relative;
    min-height: clamp(180px, 22vw, 260px);
    margin: 0 0 32px;
}

.dg-manifesto__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: dg-manifesto-cycle 18s ease-in-out infinite;
}

/* Stagger the three slides so each gets its 6-second window.
   Quote 1: 0-6s visible, Quote 2: 6-12s, Quote 3: 12-18s. */
.dg-manifesto__slide:nth-child(1) { animation-delay: 0s;   }
.dg-manifesto__slide:nth-child(2) { animation-delay: -12s; }
.dg-manifesto__slide:nth-child(3) { animation-delay: -6s;  }

/* Each slide fades in over 1.5s, holds for ~3s, fades out
   for 1.5s, then stays hidden until the next cycle.
   Percentages (relative to 18s total):
     0%    - 8.3% (0-1.5s):   fade in
     8.3%  - 33.3% (1.5-6s):  fully visible
     33.3% - 41.6% (6-7.5s):  fade out
     41.6% - 100% (7.5-18s):  hidden                          */
@keyframes dg-manifesto-cycle {
    0%    { opacity: 0; transform: translateY(8px); }
    8.3%  { opacity: 1; transform: translateY(0);   }
    33.3% { opacity: 1; transform: translateY(0);   }
    41.6% { opacity: 0; transform: translateY(-8px); }
    100%  { opacity: 0; transform: translateY(8px);  }
}

/* Pause animation on hover/focus — feels deliberate when the
   visitor wants to read the current quote in full. */
.dg-manifesto__rotator:hover .dg-manifesto__slide,
.dg-manifesto__rotator:focus-within .dg-manifesto__slide {
    animation-play-state: paused;
}

.dg-manifesto__quote {
    font-family: var(--dg-font-serif);
    font-size: clamp(24px, 3.4vw, 38px);
    font-weight: var(--dg-weight-regular);
    line-height: 1.4;
    color: var(--dg-ink);
    margin: 0;
    font-style: italic;
}

.dg-manifesto__attribution {
    font-family: var(--dg-font-sans);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dg-faint);
    margin: 0;
}

/* Reduced motion: show only the first quote, no animation. */
@media (prefers-reduced-motion: reduce) {
    .dg-manifesto__slide                { animation: none; }
    .dg-manifesto__slide:nth-child(1)   { opacity: 1; position: static; }
    .dg-manifesto__slide:nth-child(2),
    .dg-manifesto__slide:nth-child(3)   { display: none; }
    .dg-manifesto__rotator              { min-height: 0; }
}


/* ════════════════════════════════════════════════════════════
   3. CATEGORIES
   ════════════════════════════════════════════════════════════ */

.dg-categories {
    background: var(--dg-paper);
    padding: clamp(80px, 10vw, 120px) 0;
}

.dg-categories__grid {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: 0 var(--dg-gutter);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.dg-cat-card {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    text-decoration: none;
    color: var(--dg-paper);
    display: block;
    isolation: isolate;
}

.dg-cat-card__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}
.dg-cat-card:hover .dg-cat-card__media { transform: scale(1.04); }

.dg-cat-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(0, 0, 0, 0.1) 0%,
                rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
}

.dg-cat-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 32px;
    z-index: 2;
}

.dg-cat-card__index {
    display: block;
    font-family: var(--dg-font-sans);
    font-size: 11px;
    letter-spacing: var(--dg-track-widest);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.dg-cat-card__title {
    font-family: var(--dg-font-serif);
    font-size: 36px;
    font-weight: var(--dg-weight-regular);
    letter-spacing: 0.06em;
    color: var(--dg-paper);
    margin: 0 0 12px;
}

.dg-cat-card__desc {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 20px;
    max-width: 280px;
}

.dg-cat-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dg-font-sans);
    font-size: 11px;
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-paper);
    border-bottom: 1px solid var(--dg-paper);
    padding-bottom: 4px;
    transition: gap var(--dg-duration-fast) var(--dg-ease);
}
.dg-cat-card:hover .dg-cat-card__cta { gap: 12px; }


/* ════════════════════════════════════════════════════════════
   4. PROCESS
   ════════════════════════════════════════════════════════════ */

.dg-process {
    background: var(--dg-cream);
    padding: clamp(80px, 10vw, 120px) 0;
}

.dg-process__steps {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: 0 var(--dg-gutter);
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.dg-process__step {
    display: flex;
    flex-direction: column;
}

.dg-process__media {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    margin-bottom: 24px;
}

.dg-process__num {
    font-family: var(--dg-font-serif);
    font-size: 14px;
    color: var(--dg-gold);
    letter-spacing: 0.2em;
    margin-bottom: 8px;
    display: block;
}

.dg-process__title {
    font-family: var(--dg-font-serif);
    font-size: 19px;
    font-weight: var(--dg-weight-regular);
    color: var(--dg-ink);
    margin: 0 0 12px;
}

.dg-process__body p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--dg-ink-soft);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════
   5. FEATURED PRODUCTS
   ════════════════════════════════════════════════════════════ */

.dg-featured {
    background: var(--dg-paper);
    padding: clamp(80px, 10vw, 120px) 0;
}

.dg-featured__grid {
    list-style: none;
    margin: 0 auto;
    padding: 0 var(--dg-gutter);
    max-width: var(--dg-container-max);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.dg-featured__item { display: block; }

.dg-featured__link {
    display: block;
    text-decoration: none;
    color: var(--dg-ink);
}

/* Featured Pieces — intentionally NO hover effect.
   The image sits flush inside a fixed-aspect frame and stays
   completely still on hover. This matches the editorial
   restraint requested for this section: it's a product grid,
   not an interactive feature.

   Aspect ratio matches the product image source (1:1 square)
   — fabric swatches and product crops in the catalog are
   square thumbnails, so a portrait frame would just letterbox
   them with dark bands top and bottom. */
.dg-featured__media {
    aspect-ratio: 1 / 1;
    background: var(--dg-stone);
    overflow: hidden;
    margin-bottom: 24px;
}
.dg-featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dg-featured__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-top: 4px;
}

.dg-featured__name {
    font-family: var(--dg-font-sans);
    font-size: 13px;
    font-weight: var(--dg-weight-regular);
    color: var(--dg-ink);
    margin: 0;
}

.dg-featured__price {
    font-family: var(--dg-font-sans);
    font-size: 13px;
    color: var(--dg-muted);
    text-wrap-mode: nowrap;
}

.dg-featured__cta-wrap {
    text-align: center;
    margin-top: 56px;
}


/* ════════════════════════════════════════════════════════════
   6. STORIES
   ════════════════════════════════════════════════════════════ */

.dg-stories {
    background: var(--dg-cream);
    padding: clamp(80px, 10vw, 120px) 0;
}

.dg-stories__grid {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: 0 var(--dg-gutter);
    display: grid;
    gap: clamp(28px, 3.2vw, 48px) clamp(20px, 2.4vw, 32px);
    /* Default to 2 columns; modifier classes below tune for n cards */
    grid-template-columns: repeat(2, 1fr);
}

/* 1 card — single feature, narrower so it doesn't stretch huge */
.dg-stories__grid--1up {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
}

/* 2 cards — side-by-side (default) */
.dg-stories__grid--2up {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 cards — 2 on top, 1 centered below (uses 2 col grid + span) */
.dg-stories__grid--3up {
    grid-template-columns: repeat(2, 1fr);
}
.dg-stories__grid--3up .dg-story-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
}

/* 4 cards — full 2x2 */
.dg-stories__grid--4up {
    grid-template-columns: repeat(2, 1fr);
}

.dg-story-card {
    text-decoration: none;
    color: var(--dg-ink);
    display: block;
}

/* Use the .dg-story-card__media element itself as the clipping frame.
   The background image renders inside via ::after, which is what we
   scale on hover — the frame stays fixed, only the image grows.
   This matches the .dg-cat-card pattern: parent has overflow:hidden
   + fixed aspect ratio, child grows but is clipped. */
.dg-story-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    background-color: var(--dg-cream-darker, #ece6dc);
    background-size: cover;             /* graceful fallback for browsers that don't inherit on ::after */
    background-position: center;
    margin-bottom: clamp(16px, 1.8vw, 24px);
    overflow: hidden;
    isolation: isolate;
}

/* The actual image lives in ::after, absolutely positioned to fill
   the frame, then scales independently of layout. We inherit the
   background-image from the inline style="" attribute on .__media
   via background-image: inherit. */
.dg-story-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}

.dg-story-card:hover .dg-story-card__media::after {
    transform: scale(1.04);
}

.dg-story-card__cat {
    display: inline-block;
    font-size: 11px;
    letter-spacing: var(--dg-track-widest);
    color: var(--dg-gold);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.dg-story-card__title {
    font-family: var(--dg-font-serif);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: var(--dg-weight-regular);
    color: var(--dg-ink);
    margin: 0 0 12px;
    line-height: 1.3;
}

.dg-story-card__excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--dg-ink-soft);
    margin: 0 0 16px;
    max-width: 480px;
}

.dg-story-card__read {
    font-size: 11px;
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-ink);
    border-bottom: 1px solid var(--dg-ink);
    padding-bottom: 2px;
    transition: color var(--dg-duration-fast) var(--dg-ease),
                border-color var(--dg-duration-fast) var(--dg-ease);
}
.dg-story-card:hover .dg-story-card__read {
    color: var(--dg-gold);
    border-color: var(--dg-gold);
}


/* ════════════════════════════════════════════════════════════
   7. NEWSLETTER (seamless w/ footer)

   Visually merged with the footer below:
     - Both share var(--dg-ink) background → no white gap
     - Bottom padding reduced (the footer provides closure)
     - Hairline divider between newsletter and footer columns
   ════════════════════════════════════════════════════════════ */

.dg-home-newsletter {
    background: var(--dg-ink);
    color: var(--dg-paper);
    /* Top padding generous, bottom slightly less.
       No divider line — the column headings in the footer
       below already have their own underlines, so an extra
       hairline here would read as visual clutter. We rely on
       vertical space alone to delineate the two zones. */
    padding: clamp(80px, 11vw, 130px) var(--dg-gutter)
             clamp(72px, 9vw,  110px);
    text-align: center;
}

.dg-home-newsletter__inner {
    max-width: 560px;
    margin: 0 auto;
}

.dg-home-newsletter__title {
    font-family: var(--dg-font-serif);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: var(--dg-weight-regular);
    color: var(--dg-paper);
    margin: 0 0 16px;
}

.dg-home-newsletter__lede {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 auto 36px;
    max-width: 440px;
}

.dg-home-newsletter__form {
    display: flex;
    gap: 0;
    max-width: 460px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.dg-home-newsletter__input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--dg-paper);
    font-family: var(--dg-font-sans);
    font-size: 14px;
    padding: 14px 4px;
    min-width: 0;
}
.dg-home-newsletter__input::placeholder { color: rgba(255, 255, 255, 0.4); }

.dg-home-newsletter__submit {
    background: transparent;
    border: 0;
    color: var(--dg-paper);
    font-family: var(--dg-font-sans);
    font-size: 11px;
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    padding: 14px 12px;
    cursor: pointer;
    transition: color var(--dg-duration-fast) var(--dg-ease);
    flex: 0 0 auto;
}
.dg-home-newsletter__submit:hover { color: var(--dg-gold-soft); }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
    .dg-hero { min-height: 70vh; }

    .dg-categories__grid {
        grid-template-columns: 1fr;
    }
    .dg-cat-card { aspect-ratio: 16 / 10; }

    .dg-process__steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-featured__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-stories__grid,
    .dg-stories__grid--1up,
    .dg-stories__grid--2up,
    .dg-stories__grid--3up,
    .dg-stories__grid--4up {
        grid-template-columns: 1fr;
    }
    .dg-stories__grid--3up .dg-story-card:nth-child(3) {
        grid-column: auto;
        max-width: none;
        justify-self: stretch;
    }
}

@media (max-width: 640px) {
    .dg-process__steps {
        grid-template-columns: 1fr;
    }
    .dg-featured__grid {
        grid-template-columns: 1fr;
    }
    .dg-home-newsletter__form {
        flex-direction: column;
        gap: 12px;
        border-bottom: 0;
    }
    .dg-home-newsletter__input {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        padding: 14px 0;
    }
    .dg-home-newsletter__submit {
        background: var(--dg-paper);
        color: var(--dg-ink);
        padding: 14px;
    }
}




/* ════════════════════════════════════════════════════════════
   3.5 MEASUREMENT OPTIONS  (v2 — Standard hero)

   Standard Size + Adjust featured as the recommended path,
   with 4 alternative methods (Body / Garment / Sample /
   Existing) arranged 2×2 alongside. Trust strip below for
   "every piece cut to order" promise covering all methods.

   Grid behaviour:
     ≥980px : hero 1.4fr + alt 1fr, alt = 2×2 inside
     ≤979px : stack — hero on top, alt 2×2 below
     ≤640px : single column, alt becomes 1 col stack
   ════════════════════════════════════════════════════════════ */

.dg-measure {
    background: var(--dg-paper);
    padding: clamp(80px, 10vw, 120px) 0 0;
}

.dg-measure__layout {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: 0 var(--dg-gutter);
    display: grid;
    grid-template-columns: 1.1fr 0.95fr 1fr;
    gap: 18px;
    align-items: stretch;
}


/* ── HERO (Standard Size + Adjust) ────────────────────────── */

.dg-measure-hero {
    display: flex;
    flex-direction: column;
    background: var(--dg-ink);
    color: var(--dg-paper);
    padding: clamp(32px, 4vw, 44px);
    text-decoration: none;
    min-height: 380px;
    transition: background var(--dg-duration-base) var(--dg-ease);
}
.dg-measure-hero:hover {
    background: #2a2a28;
    color: var(--dg-paper);
}

.dg-measure-hero__head {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dg-measure-hero__rec {
    font-family: var(--dg-font-serif);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dg-gold);
}

/* Gold pill next to the eyebrow — the brand promise that
   says "even Standard Size is cut fresh per order, not from
   stock". Short, punchy, English-only so it reads as a
   recognised industry phrase (like "made to order"). */
.dg-measure-hero__pill {
    display: inline-block;
    font-family: var(--dg-font-sans);
    font-size: 9px;
    font-weight: var(--dg-weight-medium);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--dg-gold);
    color: var(--dg-paper);
    line-height: 1.4;
}

.dg-measure-hero__title {
    font-family: var(--dg-font-serif);
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: var(--dg-weight-regular);
    line-height: 1.15;
    color: var(--dg-paper);
    margin: 0 0 18px;
}

.dg-measure-hero__lede {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 28px;
    max-width: 380px;
}


/* Teaser — 3 stat-rows shown inside a tinted panel.
   Visual preview of what the customer will fill in on the
   profile form: SIZE / BUILD / LENGTH. Each row left/right
   aligned, gold value on the right. */
.dg-measure-hero__teaser {
    list-style: none;
    margin: 0 0 32px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
}
.dg-measure-hero__teaser li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.dg-measure-hero__teaser li:last-child {
    border-bottom: 0;
}
.dg-measure-hero__teaser-label {
    font-family: var(--dg-font-sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.dg-measure-hero__teaser-value {
    font-family: var(--dg-font-sans);
    font-size: 13px;
    color: var(--dg-gold);
    letter-spacing: 0.02em;
}

.dg-measure-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-family: var(--dg-font-sans);
    font-size: 11px;
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-paper);
    border-bottom: 1px solid var(--dg-paper);
    padding-bottom: 5px;
    align-self: flex-start;
    margin-top: auto;
    transition: gap var(--dg-duration-fast) var(--dg-ease),
                color var(--dg-duration-fast) var(--dg-ease),
                border-color var(--dg-duration-fast) var(--dg-ease);
}
.dg-measure-hero:hover .dg-measure-hero__cta {
    gap: 14px;
    color: var(--dg-gold-soft);
    border-bottom-color: var(--dg-gold-soft);
}


/* ── AI — Smart Fit (middle card) ─────────────────────────── */

.dg-measure-ai {
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 3vw, 38px);
    text-decoration: none;
    min-height: 380px;
    background: linear-gradient(158deg, #faf6ef 0%, #f1e8d8 100%);
    border: 1px solid rgba(176, 141, 87, 0.42);
    color: var(--dg-ink);
    transition: border-color var(--dg-duration-base) var(--dg-ease);
}
.dg-measure-ai:hover {
    border-color: rgba(139, 111, 71, 0.72);
    color: var(--dg-ink);
}

.dg-measure-ai__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-family: var(--dg-font-sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    background: var(--dg-gold, #8b6f47);
    padding: 6px 12px;
    border-radius: 2px;
    margin-bottom: 22px;
}
.dg-measure-ai__spark { width: 13px; height: 13px; flex: 0 0 auto; }

.dg-measure-ai__title {
    font-family: var(--dg-font-serif);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: var(--dg-weight-regular);
    line-height: 1.08;
    margin: 0 0 14px;
    color: var(--dg-ink);
}

.dg-measure-ai__lede {
    font-family: var(--dg-font-sans);
    font-size: 13px;
    line-height: 1.6;
    color: var(--dg-ink-soft);
    margin: 0 0 18px;
    max-width: 34ch;
}

.dg-measure-ai__points {
    list-style: none;
    margin: 0 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.dg-measure-ai__points li {
    position: relative;
    padding-left: 20px;
    font-family: var(--dg-font-sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--dg-ink);
}
.dg-measure-ai__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dg-gold, #8b6f47);
}

.dg-measure-ai__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    margin-top: 26px;
    font-family: var(--dg-font-sans);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dg-gold, #8b6f47);
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    align-self: flex-start;
}


/* ── ALT GRID (Body / Garment / Sample / Existing) ────────── */

.dg-measure-alt {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dg-measure-alt__item {
    display: block;
}

.dg-measure-alt__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 22px 20px;
    background: var(--dg-cream);
    color: var(--dg-ink);
    text-decoration: none;
    border: 0.5px solid transparent;
    transition: background var(--dg-duration-base) var(--dg-ease),
                border-color var(--dg-duration-base) var(--dg-ease),
                transform var(--dg-duration-base) var(--dg-ease);
}
.dg-measure-alt__link:hover {
    background: var(--dg-paper);
    border-color: var(--dg-line);
}

.dg-measure-alt__num {
    font-family: var(--dg-font-serif);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dg-gold);
    margin-bottom: 10px;
}

.dg-measure-alt__title {
    font-family: var(--dg-font-serif);
    font-size: 17px;
    font-weight: var(--dg-weight-regular);
    color: var(--dg-ink);
    line-height: 1.3;
    margin: 0 0 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dg-measure-alt__title-th {
    font-family: var(--dg-font-sans);
    font-size: 11px;
    font-weight: var(--dg-weight-regular);
    letter-spacing: 0.02em;
    color: var(--dg-muted);
    line-height: 1.3;
}

.dg-measure-alt__desc {
    font-family: var(--dg-font-sans);
    font-size: 12px;
    line-height: 1.55;
    color: var(--dg-ink-soft);
    margin: 4px 0 0;
}


/* ── TRUST STRIP (covers all 5 methods) ───────────────────── */

.dg-measure__promise {
    max-width: var(--dg-container-max);
    margin: 24px auto 0;
    padding: 18px var(--dg-gutter);
    border-top: 0.5px solid var(--dg-line);
    border-bottom: 0.5px solid var(--dg-line);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.dg-measure__promise-icon {
    width: 22px;
    height: 22px;
    color: var(--dg-gold);
    flex: 0 0 auto;
}

.dg-measure__promise-en {
    font-family: var(--dg-font-sans);
    font-size: 11px;
    font-weight: var(--dg-weight-medium);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dg-ink);
}

.dg-measure__promise-sep {
    color: var(--dg-line);
    font-size: 11px;
}

.dg-measure__promise-th {
    font-family: var(--dg-font-sans);
    font-size: 12px;
    color: var(--dg-ink-soft);
    letter-spacing: 0.02em;
}


/* ────────────────────────────────────────
   Measurement Options — responsive
   ──────────────────────────────────────── */

@media (max-width: 980px) {
    /* Stack hero on top of the 2×2 alt grid */
    .dg-measure__layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .dg-measure-hero {
        min-height: 0;
        padding: 32px 28px;
    }
    .dg-measure-ai {
        min-height: 0;
        padding: 32px 28px;
    }
    .dg-measure-ai__lede {
        max-width: none;
    }
    .dg-measure-hero__lede {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .dg-measure {
        padding: clamp(56px, 14vw, 80px) 0 0;
    }
    .dg-measure-hero {
        padding: 28px 22px;
    }
    .dg-measure-hero__teaser {
        padding: 14px 14px;
        margin-bottom: 24px;
    }
    .dg-measure-hero__teaser-label {
        font-size: 10px;
    }
    .dg-measure-hero__teaser-value {
        font-size: 12px;
    }

    /* Alt grid: 1 col stack with row-style cards */
    .dg-measure-alt {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .dg-measure-alt__link {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 18px 20px;
    }
    .dg-measure-alt__num {
        margin-bottom: 0;
        flex: 0 0 auto;
        align-self: flex-start;
        padding-top: 4px;
    }
    .dg-measure-alt__title {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        font-size: 16px;
        margin-bottom: 2px;
        flex-wrap: wrap;
    }
    .dg-measure-alt__title-th {
        font-size: 11px;
    }
    .dg-measure-alt__desc {
        font-size: 11px;
    }

    /* Promise strip stacks vertically on phone */
    .dg-measure__promise {
        gap: 8px;
        padding: 16px var(--dg-gutter-mobile, 16px);
        text-align: center;
    }
    .dg-measure__promise-sep {
        display: none;
    }
    .dg-measure__promise-th {
        flex: 1 1 100%;
        font-size: 11px;
    }
}

/* DG-FIX 2026-06-04: Privacy link under home newsletter form */
.dg-home-newsletter__privacy {
    margin-top: 16px;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    line-height: 1.6;
    text-align: center;
}
.dg-home-newsletter__privacy-link {
    color: rgba(184,149,106,0.85);
    text-decoration: underline;
    margin-left: 4px;
}
.dg-home-newsletter__privacy-link:hover {
    color: rgba(184,149,106,1);
}


/* ════════════════════════════════════════════════════════════
   5b. FEATURED — BY CATEGORY  (DG-FEATURED-CATS v1 · 2026-06-07)
   Per-category wrapper + heading + grid. Card internals reuse
   .dg-featured__item/__media/__meta/__name/__price.
   Grid: 4-up desktop, 2x2 at <=980 and stays 2x2 down to phone
   (even count = never an orphaned single tile like a 3-up grid).
   ════════════════════════════════════════════════════════════ */

.dg-featured-cat {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: 0 var(--dg-gutter);
}
.dg-featured-cat + .dg-featured-cat { margin-top: clamp(48px, 6vw, 76px); }

.dg-featured-cat__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: clamp(20px, 2.4vw, 28px);
    padding-bottom: 14px;
    border-bottom: 0.5px solid var(--dg-line);
}

.dg-featured-cat__title {
    font-family: var(--dg-font-serif);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: var(--dg-weight-regular);
    letter-spacing: 0.02em;
    color: var(--dg-ink);
    margin: 0;
    line-height: 1.2;
}

.dg-featured-cat__viewall {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    font-family: var(--dg-font-sans);
    font-size: 11px;
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-ink);
    border-bottom: 1px solid var(--dg-ink);
    padding-bottom: 3px;
    transition: gap var(--dg-duration-fast) var(--dg-ease),
                color var(--dg-duration-fast) var(--dg-ease),
                border-color var(--dg-duration-fast) var(--dg-ease);
}
.dg-featured-cat__viewall:hover {
    gap: 11px;
    color: var(--dg-gold);
    border-bottom-color: var(--dg-gold);
}

.dg-featured-cat__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.8vw, 24px);
}

@media (max-width: 980px) {
    .dg-featured-cat__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .dg-featured-cat__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .dg-featured-cat + .dg-featured-cat { margin-top: 40px; }
}

/* ═══════════════════════════════════════════════════════════════
   dg-measure motifs v1 — faint line-art background per method card
   Assets: images/home/*.png (brand gold #8b6f47 on transparent)
   Additive, pure CSS — home.phtml untouched.
   Alt 2×2 keyed by source order: 1=Body 2=Garment 3=Sample 4=Existing
   ═══════════════════════════════════════════════════════════════ */
.dg-measure-hero,
.dg-measure-ai,
.dg-measure-alt__link {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.dg-measure-hero > *,
.dg-measure-ai > *,
.dg-measure-alt__link > * {
    position: relative;
    z-index: 1;
}
.dg-measure-hero::after,
.dg-measure-ai::after,
.dg-measure-alt__link::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
}
.dg-measure-hero::after {
    right: -24px; bottom: -20px;
    width: 260px; height: 200px;
    opacity: 0.20;
    background-image: url(../images/home/type-measure.png);
}
.dg-measure-ai::after {
    right: -6px; bottom: 0;
    width: 188px; height: 300px;
    opacity: 0.12;
    background-image: url(../images/home/full-body-measure.png);
}
.dg-measure-alt__link::after {
    right: -8px; bottom: -8px;
    width: 118px; height: 118px;
    opacity: 0.13;
}
.dg-measure-alt__item:nth-child(1) .dg-measure-alt__link::after { background-image: url(../images/home/body-measure.png); }
.dg-measure-alt__item:nth-child(2) .dg-measure-alt__link::after { background-image: url(../images/home/shirt-flat.png); }
.dg-measure-alt__item:nth-child(3) .dg-measure-alt__link::after { background-image: url(../images/home/package.png); }
.dg-measure-alt__item:nth-child(4) .dg-measure-alt__link::after { background-image: url(../images/home/shop.png); }
@media (max-width: 1024px) {
    .dg-measure-hero::after { width: 200px; height: 150px; opacity: 0.16; }
    .dg-measure-ai::after   { width: 150px; height: 230px; opacity: 0.10; }
    .dg-measure-alt__link::after { width: 92px; height: 92px; opacity: 0.12; }
}
/* end dg-measure motifs v1 */