/* Live "days met" counter — sits above the moments/portfolio section.
   Editorial card with three figures (years · days · hours), a soft rose
   ornament above the title, and a subtle date stamp underneath. */
.days-counter {
    margin-top: 96px;
    padding: clamp(34px, 6vw, 56px) clamp(20px, 5vw, 48px);
    text-align: center;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(180deg, #fff5ef 0%, #fbe5e9 100%);
    border: 1px solid var(--paper-edge);
    box-shadow:
        0 1px 0 rgba(255,255,255,.7) inset,
        0 30px 80px -32px rgba(146,82,106,.32),
        0 8px 22px -10px rgba(146,82,106,.18);
    position: relative;
    overflow: hidden;
}
/* Subtle blue inflection when Hins is signed in */
body[data-current-role="hins"] .days-counter {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(180deg, var(--hins-blue-tint) 0%, var(--hins-blue-pale) 100%);
    border-color: var(--hins-blue-edge);
    box-shadow:
        0 1px 0 rgba(255,255,255,.7) inset,
        0 30px 80px -32px rgba(48,80,130,.32),
        0 8px 22px -10px rgba(48,80,130,.18);
}

/* Decorative rose ornament floating above the title */
.days-counter::before {
    content: '';
    display: block;
    width: 60px;
    height: 14px;
    margin: 0 auto 18px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' fill='none'><path d='M0 7 H22' stroke='%23d97a8b' stroke-width='1'/><path d='M38 7 H60' stroke='%23d97a8b' stroke-width='1'/><circle cx='30' cy='7' r='3' stroke='%23d97a8b' fill='%23fbe5e9'/></svg>") center/contain no-repeat;
    opacity: .65;
}
body[data-current-role="hins"] .days-counter::before {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' fill='none'><path d='M0 7 H22' stroke='%233a6dab' stroke-width='1'/><path d='M38 7 H60' stroke='%233a6dab' stroke-width='1'/><circle cx='30' cy='7' r='3' stroke='%233a6dab' fill='%23d8e7f9'/></svg>") center/contain no-repeat;
}

.counter-title {
    margin: 0 0 28px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.7rem, 4.4vw, 2.6rem);
    color: var(--ink);
    letter-spacing: -.005em;
}

.counter-row {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(14px, 3vw, 36px);
    flex-wrap: nowrap;
    margin-bottom: 22px;
    padding: 4px 0;
}
.counter-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 76px;
    padding: 0 8px;
}
.counter-num {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.6rem, 7.5vw, 4.2rem);
    line-height: 1;
    color: var(--rose-deep);
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
    transition: transform var(--t-mid);
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
body[data-current-role="hins"] .counter-num { color: var(--hins-blue); }
.counter-num.tick {
    animation: counterTick 600ms cubic-bezier(.4,1.4,.4,1);
}
@keyframes counterTick {
    0%   { transform: translateY(0)    scale(1); }
    35%  { transform: translateY(-4px) scale(1.05); }
    100% { transform: translateY(0)    scale(1); }
}
.counter-label {
    margin-top: 10px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--ink-soft);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}
.counter-sep {
    align-self: center;
    width: 1px;
    height: clamp(40px, 6vw, 64px);
    background: linear-gradient(180deg, transparent, rgba(178, 88, 103, .35), transparent);
}
body[data-current-role="hins"] .counter-sep {
    background: linear-gradient(180deg, transparent, rgba(58, 109, 171, .35), transparent);
}

.counter-since {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink-soft);
    letter-spacing: .02em;
}

@media (max-width: 760px) {
    .days-counter { margin-top: 70px; padding: 32px 18px; }
    .counter-row { gap: 8px; }
    .counter-cell { min-width: 60px; padding: 0 4px; }
    .counter-num { font-size: clamp(2rem, 11vw, 3rem); }
    .counter-label { font-size: 0.66rem; letter-spacing: .18em; }
    .counter-sep { height: 36px; }
}
@media (max-width: 380px) {
    .counter-label { letter-spacing: .12em; }
    .counter-sep { display: none; }
}