/* Canonical shared foundation. Run tools/sync-brand-system.mjs after changes. */
:root {
  --ep-ink: #20292e;
  --ep-muted: #52616b;
  --ep-paper: #f5f7f7;
  --ep-surface: #fafbfb;
  --ep-silver: #e8edef;
  --ep-line: #bdc8ce;
  --ep-radius: 20px;
  --ep-control-radius: 99px;
  --ep-space: clamp(1rem, 3.5vw, 3rem);
  --ep-content: 1180px;
  --ep-ease: cubic-bezier(.16, 1, .3, 1);
  --ink: var(--ep-ink);
  --ink-soft: #34454e;
  --muted: var(--ep-muted);
  --paper: var(--ep-paper);
  --surface: var(--ep-surface);
  --surface-muted: var(--ep-silver);
  --surface-cool: var(--ep-silver);
  --line: var(--ep-line);
  --line-dark: #7b8c97;
  --graphite: var(--ep-ink);
  --silver: #c5d0d6;
  --accent: var(--ep-ink);
  --accent-soft: var(--ep-silver);
  --dark: var(--ep-ink);
  --font: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --content: var(--ep-content);
  --gutter: var(--ep-space);
  --ease: var(--ep-ease);
}
body { background: var(--ep-paper); color: var(--ep-ink); font-family: var(--font); }
:where(h1,h2,h3) { text-wrap: balance; }
:where(p,li) { text-wrap: pretty; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid #416b82; outline-offset: 4px; }
:where(button,input,select,textarea) { font: inherit; }
:where(button,a,summary) { -webkit-tap-highlight-color: transparent; }
:where(input,select,textarea) { accent-color: var(--ep-ink); }
:where(img) { max-width: 100%; }
[hidden] { display: none !important; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }

/* Direct topic navigation and a discreet editorial brand signature. */
.topic-navigation { display: flex; justify-content: center; gap: clamp(1rem,2vw,2rem); overflow-x: auto; white-space: nowrap; scrollbar-width: thin; padding: .45rem var(--gutter); border-bottom: 1px solid var(--ep-line); background: var(--ep-paper); }
.topic-navigation a { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; color: var(--ep-ink); font-size: .9375rem; text-decoration: none; }
.topic-navigation a:is(:hover,:focus-visible) { text-decoration: underline; text-underline-offset: .4em; }
.ep-signature { position: absolute; top: 16px; right: 18px; z-index: 2; font-family: Georgia, serif; font-size: 28px; line-height: 1; letter-spacing: -.12em; font-weight: 400; color: #f5f7f7; text-shadow: 0 1px 8px #20292e80; pointer-events: none; }
@media(max-width:64rem) { .topic-navigation { justify-content: flex-start; gap: 1.25rem; } }

/* The continuous ribbon shares a single rhythm across both brand experiences. */
.ep-announcement { position: relative; overflow: hidden; background: #20292e; color: #f5f7f7; }
.ep-ticker-link { display: block; color: inherit; text-decoration: none; padding-right: 0; }
.ep-ticker-window { display: block; overflow: hidden; }
.ep-ticker-track { display: flex; width: max-content; animation: ep-ribbon 36s linear infinite; }
.ep-ticker-group { display: flex; flex: 0 0 auto; align-items: center; gap: 2.5rem; padding: 1.05rem 1.25rem; white-space: nowrap; font-size: clamp(.9375rem,1.2vw,1.1rem); font-weight: 700; letter-spacing: .075em; }
.ep-ticker-star { color: #c5d0d6; font-size: 1.25rem; }
.ep-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ep-service-note { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem,5vw,5rem); max-width: 1180px; margin: 4rem auto; padding: 3rem 0; border-top: 1px solid var(--ep-line); }
.ep-service-note h2 { font-size: clamp(2rem,3.5vw,3rem); line-height: 1.08; font-weight: 500; margin: .6rem 0 0; }
.ep-service-kicker { font-size: .875rem; letter-spacing: .09em; text-transform: uppercase; }
.ep-service-details { display: grid; gap: 1.5rem; }
.ep-service-details h3 { margin: 0 0 .4rem; font-size: 1.25rem; }
.ep-service-details p { font-size: 1rem; line-height: 1.6; color: var(--ep-muted); margin: 0; }
.ep-service-details a { color: var(--ep-ink); text-decoration: underline; text-underline-offset: .2em; }
[data-home-refined] .category-art .ep-signature { position: absolute; font: 400 28px/1 Georgia,serif; letter-spacing: -.12em; color: #f5f7f7; }
@keyframes ep-ribbon { to { transform: translateX(-50%); } }
@media(max-width:42rem) { .ep-service-note { grid-template-columns: 1fr; margin: 2rem auto; padding: 2rem 0; } }

.ep-signature,[data-home-refined] .category-art .ep-signature { width: 64px; height: 64px; font-size: 0; text-shadow: none; background: url("assets/ep-orbit-white.svg") center / contain no-repeat; }
.ep-join-link { display: inline-flex; align-items: center; min-height: 48px; margin-top: .7rem; font-size: 1rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }

/* Original campaign gallery and source-linked editorial cards, shared by both sites. */
.ep-campaign,.ep-reading{scroll-margin-top:120px;width:min(calc(100% - 48px),1240px);margin:72px auto;color:#20292e}
.ep-editorial-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.ep-editorial-heading h2{font:600 clamp(32px,4.3vw,58px)/1.04 "Hanken Grotesk",sans-serif;letter-spacing:-.035em;margin:0;color:#20292e}
.ep-editorial-heading>p{font-size:16px;line-height:1.5;margin:0;color:#50616b}
.ep-editorial-heading>a{font-size:16px;color:#263a45;text-underline-offset:5px;padding-block:12px;flex-shrink:0}
.ep-campaign .ep-editorial-kicker,.ep-reading .ep-editorial-kicker{font-size:14px;font-weight:600;letter-spacing:.035em;line-height:1.45;margin:0 0 14px;color:#53646f}
.ep-campaign-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.ep-campaign-grid figure{margin:0;min-width:0;grid-column:span 4}
.ep-campaign-grid .ep-campaign-packaging{grid-column:span 7}.ep-campaign-grid .ep-campaign-hand{grid-column:span 5}
.ep-campaign-grid img{display:block;width:100%;height:280px;object-fit:cover;border-radius:22px;background:#e6e9eb}
.ep-campaign-packaging img,.ep-campaign-hand img{height:350px}
.ep-campaign-hand img{object-position:center 46%}.ep-campaign-collection img{object-position:center 66%}
.ep-campaign-grid figcaption{display:grid;gap:5px;padding:15px 3px 10px;color:#24323b}
.ep-campaign-grid figcaption strong{font-size:18px;font-weight:600}.ep-campaign-grid figcaption span{font-size:14px;line-height:1.45;color:#52616a}
.ep-campaign-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px}
.ep-campaign-footer p,.ep-reading-note{font-size:14px;line-height:1.5;color:#52616a;margin:0}
.ep-campaign-controls{display:flex;gap:8px;flex-shrink:0}.ep-campaign-controls[hidden]{display:none}
.ep-campaign-controls button{display:grid;place-items:center;width:46px;height:46px;border:1px solid #b7c2c9;background:#e9edef;color:#24323b;border-radius:50%;font-size:22px;cursor:pointer}
.ep-campaign-controls button:disabled{opacity:.45;cursor:default}
.ep-reading{padding-top:32px;border-top:1px solid #c5cfd5}
.ep-reading-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:22px}
.ep-reading-grid article{min-width:0}
.ep-reading-card{display:flex;flex-direction:column;height:100%;color:#20292e;text-decoration:none!important;border-radius:22px;overflow:hidden;background:#eef1f3;border:1px solid #dce2e6;transition:transform .2s,box-shadow .2s}
.ep-reading-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px #20303a12}
.ep-reading-card:active{transform:translateY(-1px)}
.ep-reading-card figure{position:relative;margin:0;height:270px;overflow:hidden}
.ep-reading-card img{width:100%;height:100%;object-fit:cover;display:block}
.ep-reading-badge{position:absolute;top:16px;left:16px;background:#f5f7f8;color:#27343d;border:1px solid #d2dbe0;padding:8px 13px;font-size:14px;border-radius:24px}
.ep-reading-copy{display:flex;flex-direction:column;flex:1;padding:24px}
.ep-reading-copy h3{font:500 clamp(23px,2.2vw,30px)/1.16 "Hanken Grotesk",sans-serif;letter-spacing:-.02em;color:#20292e;margin:0 0 16px}
.ep-reading-copy>p:not(.ep-editorial-kicker){font-size:16px;line-height:1.5;margin:0 0 24px;color:#52616a}
.ep-reading-action{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:16px;font-weight:600;margin-top:auto;min-height:44px;border-top:1px solid #cad3d9;padding-top:16px}
.ep-campaign :focus-visible,.ep-reading :focus-visible{outline:3px solid #3c657e;outline-offset:5px}
@media(max-width:1000px){.ep-campaign-grid img{height:230px}.ep-campaign-packaging img,.ep-campaign-hand img{height:300px}.ep-reading-grid{gap:14px}.ep-reading-copy{padding:18px}.ep-reading-card figure{height:220px}}
@media(max-width:700px){.ep-campaign,.ep-reading{scroll-margin-top:120px;width:calc(100% - 32px);margin-block:48px}.ep-editorial-heading{align-items:start;flex-direction:column;gap:16px;margin-bottom:22px}.ep-campaign-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain;padding:4px 0 14px}.ep-campaign-grid figure,.ep-campaign-grid .ep-campaign-packaging,.ep-campaign-grid .ep-campaign-hand{grid-column:auto;scroll-snap-align:start}.ep-campaign-grid img{height:300px}.ep-campaign-footer{align-items:start;margin-top:10px}.ep-campaign-footer p{max-width:230px}.ep-reading-grid{grid-template-columns:1fr;gap:20px}.ep-reading-card figure{height:280px}.ep-reading-copy{padding:22px}.ep-reading-copy h3{font-size:28px}}
@media(prefers-reduced-motion:reduce){.ep-reading-card{transition:none}.ep-reading-card:hover{transform:none}}

@media(prefers-reduced-motion:reduce) { .ep-ticker-track { animation:none; width:auto; } .ep-ticker-group { flex-wrap:wrap; gap:.7rem 1rem; white-space:normal; } .ep-ticker-group + .ep-ticker-group { display:none; } }
.community-scene { grid-column:1/-1; margin:0; min-width:0; }
.community-scene img { display:block; width:100%; height:auto; border-radius:18px; }
.community-scene figcaption { margin-top:.75rem; color:#d5dee3; font-size:.875rem; line-height:1.5; }

/* Lifestyle imagery decorates membership; it is separate from customer evidence. */
.brand-lifestyle { grid-column:1/-1; margin:1rem 0 0; overflow:hidden; border-radius:18px; }
.brand-lifestyle img { display:block; width:100%; height:auto; aspect-ratio:2.8; object-fit:cover; object-position:center 42%; }
.collection-footnote:has(> .rail-controls:only-child) { justify-content:flex-end; }
@media(max-width:42rem) {
 .brand-lifestyle img { aspect-ratio:1.6; }
 .ep-ticker-group { padding-block:.7rem; }
 .topic-navigation { scroll-padding-inline:1rem; }
}
