/* El Planeta × Amaru edition (ep.goamaru.com). Loaded after the reader's own
   sheets, so it only restates what changes: El Planeta's palette, their
   masthead, and the two-logo lockup.

   El Planeta blue, tint and ink were read off elplaneta.com's computed styles.
   Their blue (#4586FF) is 3.4:1 on white, enough for icons and fills but not
   for small text, so text and buttons use the deeper blue (7:1).

   The reader's accents mostly run through the --amaru-red tokens, repointed
   below. The few hardcoded reds that still win the cascade are restated at
   the end; src/__tests__/website/elplaneta-reader.test.ts fails if a new
   hardcoded red appears in the reader's sheets. The Amaru logo keeps its own
   red: the brand guide never recolors it. */
:root{
  --ep-blue:#4586FF;
  --ep-blue-deep:#1f4fb8;
  --ep-blue-press:#173d8f;
  --ep-tint:#EFF8FA;
  --ep-ink:#4E5965;
  --amaru-red:var(--ep-blue-deep);
  --amaru-red-4:#4586ff0f;
  --amaru-red-8:#4586ff1f;
  --amaru-red-20:#4586ff40;
  --amaru-red-40:#4586ff80;
  --amaru-gray:var(--ep-ink);
  --paper:#f7f9fb;
}

/* Masthead band and section tabs, sized to match elplaneta.com's header as
   measured on Oct 26 2026: a 97px blue bar with the 326×38 wordmark centered,
   then a 48px row of 12px uppercase tabs split by thin blue rules, wrapping to
   a second line when narrow, as theirs does. At 768px and below (their
   breakpoint) the tabs go and the bar is 77px with the 32px round mark at the
   left. Both scroll away; the reader's header stays pinned below them. */
.ep-masthead{box-sizing:border-box;height:97px;padding:20px 0;background:var(--ep-blue);border-bottom:.5px solid #d9d9d9;display:flex;align-items:center;justify-content:center}
.ep-masthead a{display:block}
.ep-masthead img{display:block}
.ep-masthead .ep-mark{display:none}
.ep-wordmark{width:326px;height:38px}
.ep-rail{box-sizing:border-box;min-height:48px;padding:16px 20px;background:#fff;box-shadow:0 2px 4px #0000001a;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;font-size:12px;line-height:16px;font-weight:400;letter-spacing:.7px;text-transform:uppercase;position:relative;z-index:1}
.ep-rail a{color:#1a1a1a;white-space:nowrap}
.ep-rail a:hover{text-decoration:underline}
.ep-rail a+a{padding-left:16px;border-left:.5px solid var(--ep-blue)}
/* Embedded on elplaneta.com, their real masthead is already above the frame. */
.framed .ep-masthead,.framed .ep-rail{display:none}

/* Both marks at equal weight, each in its own colour. */
.cobrand-lockup{display:flex;align-items:center;gap:11px}
.site-header .brand .cobrand-lockup img{width:auto;height:38px}
.lockup-x{font-size:16px;font-weight:300;line-height:1;color:var(--amaru-gray)}
.brand-title{color:var(--ep-blue-deep)}

/* El Planeta sets headlines heavy and uppercase. */
h1{font-weight:800;text-transform:uppercase;letter-spacing:-.6px;font-size:clamp(28px,2.4vw,36px)}
.card-heading .industry-symbol,.card-heading-arrow,.edition-dot,.tiny-mark,.overview-link.active .grid-icon{color:var(--ep-blue)}
.edition-dot{background:var(--ep-blue)}
.card-heading{background:var(--ep-tint);border-bottom-color:#d6e8ee}
a.card-heading:hover{background:#e3f1f5}

/* Hardcoded reds left in the reader's sheets. */
.toolkit-link .toolkit-name{color:var(--ep-blue-deep)}
.search-submit:hover,.apply-filters:hover,.primary-button:hover{background-color:var(--ep-blue-press)}

/* elplaneta.com's phone header: no tabs, a 77px bar, the round mark at left. */
@media(max-width:768px){
  .ep-masthead{height:77px;padding:10px;justify-content:flex-start;box-shadow:0 2px 4px #0000001a;position:relative;z-index:1}
  .ep-masthead .ep-wordmark{display:none}
  .ep-masthead .ep-mark{display:block;width:32px;height:32px}
  .ep-rail{display:none}
}
@media(max-width:760px){
  /* The two logos carry the brand; the Toolkit note needs the width. */
  .site-header .brand-title{display:none}
  .site-header .brand .cobrand-lockup img{height:28px}
  .cobrand-lockup{gap:7px}
  .lockup-x{font-size:13px}
  h1{font-size:25px;letter-spacing:-.4px}
}
@media(max-width:359px){
  .site-header .brand .cobrand-lockup img{height:24px}
}